Animacija CSS3 - Stvaranje fan-outa s efektom odbijanja pomoću Bezier krivulje
Jeste li znali da geometrijske transformacije dodan u elemente HTML s oznakom transformirati
Svojstvo CSS-a, kao što su skala, izvrtanje i rotiranje, može biti animirano? Mogu se animirati pomoću gumba tranzicija
imovine i @keyframes
animacije, ali ono što je još hladnije je to što se animirane transformacije mogu podijeliti s dodatkom malo učinak odbijanja, koristiti kubičnih Bezijerove ()
funkcija vremena.
U suštini, kubičnih Bezijerove ()
(u CSS) je funkcija vremena za prijelaze. Ona određuje brzinu prijelaza, a između ostalog se može koristiti i za to stvoriti odskakanje učinak u animacijama.
U ovom postu, prvo ćemo stvorite jednostavnu animaciju transformacije na što smo kasnije dodati kubičnih Bezijerove ()
funkcija vremena. Na kraju ovog vodiča shvatit ćete kako stvoriti animaciju koja se koristi i fan-out i efekt odskoka. Ovo je konačni rezultat (kliknite za prikaz efekta).
Demo je inspiriran ovom prekrasnom Dribbble snimkom Christophera Jonesa o animiranoj oznaci mjesta.
1. Stvaranje lišća
Oblik oznake mjesta sastoji se od pet (nazovimo ih) odlazaka. Za izradu ovalni oblik list, iskoristimo granica-radijus
CSS svojstvo. granica-radijus
jednog kuta je sastavljen od dva polumjera, vodoravno i okomito, kao što je prikazano dolje.
granica-radijus
svojstvo ima mnogo različitih sintaksa. Koristit ćemo složeniji oblik za oznaku:
granični radijus: htl htr hbr hbl / vtl vtr vbr vbl;
U ovoj sintaksi, vodoravni i okomiti radijus grupirani su zajedno; h
& v
predstavljaju vodoravne i okomite radijuse i t
, l
, b
& r
predstavljaju gornji, lijevi, donji i desni kut. Na primjer, VBL
označava okomiti radijus donjeg lijevog kuta.
Ako dajete samo jedna vrijednost za horizontalnu ili okomitu stranu, ta će se vrijednost preglednika kopirati na sve druge vodoravne ili okomite radijuse.
Do stvoriti vertikalni ovalni oblik, zadržite vodoravni radijus od 50%
za sve kutove i prilagodite okomite, dok ne vidite željeni oblik. vodoravna strana koristit će samo jednu vrijednost: 50%
.
okomiti radijusi gornjih lijevih i gornjih desnih uglova 30%
, dok će dno lijevi i donji desni kut koristiti 70%
vrijednost.
HTML
CSS
.pinStarLeaf širina: 60px; visina: 120px; granični polumjer: 50% / 30% 30% 70% 70%; boja pozadine: # B8F0F5;
2. Umnožavanje lišća
Budući da će se marker označiti s pet listova, mi stvaramo još četiri kopije lista u različitim bojama i uz apsolutno pozicioniranje kako bi ih međusobno slagali.
HTML
CSS
#pinStarWrapper širina: 300px; visina: 300px; pozicija: relativna; .pinStarLeaf širina: 60px; visina: 120px; položaj: apsolutni; granični polumjer: 50% / 30% 30% 70% 70%; lijevo: 0; desno: 0; na vrh: 0; dno: 0; margina: auto; neprozirnost: .5; .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5; .pinStarLeaf: nth-of-type (2) pozadinska boja: # 9CF3DC; .pinStarLeaf: nth-of-type (3) background-color: # 94F3B0; .pinStarLeaf: nth-of-type (4) pozadinska boja: # D2F8A1; .pinStarLeaf: nth-of-type (5) pozadinska boja: # F3EDA2;
3. Snimanje Kliknite Događaj i Poboljšanje estetike
Recimo dodajte potvrdni okvir s #pinStarCenterChkBox
identifikator za snimanje događaja klika. Kada je potvrdni okvir označen, lišće će se raspršiti (rotirati). Također moramo dodati bijeli krug s #pinStarCenter
identifikator za estetiku. Ona će biti postavljena na vrh oznake i bit će središnji dio oznake mjesta.
HTML
Prije toga stavljamo potvrdni okvir, a iza njega bijeli krug:
CSS
Najprije postavimo osnovne stilove za potvrdni okvir i krug koji pokriva:
#pinStarCenter, #pinStarCenterChkBox širina: 45px; visina: 50px; položaj: apsolutni; lijevo: 0; desno: 0; vrh: -60px; dno: 0; margina: auto; boja pozadine: #fff; granični polumjer: 50%; pokazivač: pokazivač; #pinStarCenter, .pinStarLeaf pointer-događaji: ništa; #pinStarCenter> input [type = "checkbox"] width: 100%; visina: 100%; pokazivač: pokazivač;
Kako će se svaki list rotirati duž z-osi u različitim kutovima, trebamo postaviti transformacija: rotatez ();
u skladu s tim, na stvorite oblik zvijezde. Također primjenjujemo tranzicija
svojstvo za efekt rotacije (točnije mi koristimo prijelaz: transformacija 1s linearna
pravilo za lišće).
#pinStarCenterChkBox: označeno ~ .pinStarLeaf tranzicija: transformacija 1s linearna; #pinStarCenterChkBox: označeno ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: označeno ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: označeno ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: označeno ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: označeno ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Ako pogledate CSS iznad, možete vidjeti iz prisutnosti #pinStarCenterChkBox: označeno ~
opći sibling selektor koji samo dodajemo tranzicija
i transformirati
nekretnine kada je potvrdni okvir označen (kada je korisnik kliknuo na oznaku).
4. Izmjena središta rotacije
Prema zadanim postavkama, središte rotacije je postavljeno u središtu rotiranog elementa, u našem slučaju, u središtu lišća. Moramo pomaknuti središte transformacije na unutarnji kraj lišća. To možemo učiniti pomoću transformirati-podrijetlo
CSS svojstvo koje mijenja položaj transformiranih elemenata.
Da bi učinak rotacije ispravno funkcionirao, dodamo sljedeća pravila .pinStarLeaf
selektor u CSS datoteci:
.pinStarLeaf transform-origin: 30px 30px; prijelaz: transformacija 1s linearna;
Pogledajmo našu animaciju u akciji - u ovom trenutku, bez efekta odbijanja. Kliknite na bijeli krug, na vrhu oznake.
Razumijevanje kako ubic-Bezier () djeluje
Sada, da bismo dodali efekt odbijanja, moramo zamijeniti linearan
s vremenskom funkcijom kubičnih Bezijerove ()
u tranzicija
izjave u CSS datoteci.
Ali prvo, hajde da shvatimo logika iza kubičnih Bezijerove ()
funkcija vremena tako da možete lako shvatiti učinak odbijanja.
Sintaksa za kubičnih Bezijerove ()
funkcija je sljedeća, d
i t
su udaljenost i vrijeme, i njihove se vrijednosti obično kreću između 0 i 1:
kubni-bezier (t1, d1, t2, d2)
Iako objašnjava CSS kubičnih Bezijerove ()
u smislu udaljenosti i vremena nije točno, to je mnogo lakše razumjeti na ovaj način.
Pretpostavimo da postoji okvir koji se kreće od točke A do točke B za 6 sekundi. Iskoristimo sljedeće kubičnih Bezijerove ()
funkcija vremena za prijelaz s t1 = 0
i d1 = 1
vrijednosti.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubni-bezier (0,1,0,0)
U gotovo nikakvom trenutku, kutija se kreće od točke A do sredine, a ostatak vremena traje do B.
Pokušajmo istu tranziciju s vrijednostima t1 = 1
i d1 = 0
.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubni-bezier (1,0,0,0)
Prve tri sekunde, kutija se ne pomiče mnogo, a kasnije gotovo skoči na srednju točku i počinje se neprestano kretati prema B.
Kao što vidiš, D1
kontrolira udaljenost između A & sredina točke, i t1
vrijeme potrebno za postizanje sredine točke od A.
Iskoristimo d2
i t2
sada. Oba t1
i D1
će biti 1, i t2 = 1
i d2 = 0
.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubni-bezier (1,1,0,1)
Kutija se pomiče na pola puta za 3 sekunde (zbog t1 = 1
, d1 = 1
), a za kratko vrijeme prelazi na točku B.
Zadnji primjer zamjenjuje prethodne vrijednosti t2
i d2
:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubni-bezier (1,1,1,0)
Kutija se pomiče na pola puta za 3 sekunde (zbog t1 = 1
, d1 = 1
), zatim se još 3 sekunde ne pomiče mnogo prije skoka u točku B..
Ovi primjeri to pokazuju d2
i t2
kontrolirajte udaljenost i vrijeme koje je potrebno kutiji od sredine do točke B.
Iako vam vjerojatno nije trebalo ovo dugo (ali rijetko) objašnjenje kubičnih Bezijerove ()
u ovom trenutku, mislim da će vam pomoći bolje razumjeti tu funkciju. Sada, gdje dolazi do odskoka u svemu ovome?
5. Dodavanje efekta odbijanja s kubičnim-bezier ()
ključni parametri za odbijanje učinak su udaljenosti, D1
i d2
. D1
vrijednost manje od 1 uzima kutiju iza točke A prije nastavka prema B na početku animacije.
d2
vrijednost više od 1 uzima kutiju iznad točke B prije povratka na odmor na B na kraju animacije. Otuda i povratni i povratni efekt.
Sada ću dodati kubičnih Bezijerove ()
vrijednosti izravno na naš demo umjesto prvog linearan
vrijednost tranzicija
i omogućiti vam da vidite rezultate.
#pinStarCenterChkBox: označen je ~ .pinStarLeaf tranzicijski: transformira 1s kubni-bezier (.8, - .5, .2,1.4);
Ovo je konačni rezultat, animacija CSS samo za fanove s efektom odbijanja:
Za usporedbu i bolje razumijevanje učinka odbijanja, ovdje je kako kubičnih Bezijerove ()
vrijednost animacije se ponaša kada se primijeni u našem primjeru: