Animacija CSS3 - Stvaranje fan-outa s efektom odbijanja pomoću Bezier krivulje

Jeste li znali da geometrijske transformacije dodan u elemente HTML s oznakom transformiratiSvojstvo 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: