Animacija CSS3 - Ustvarjanje fan-outa z bounce efektom z uporabo Bezierjeve krivulje

Ali ste vedeli, da geometrijske transformacije dodan elementom HTML z transformLastnost CSS, kot je lestvica, poševnost in vrtenje, je lahko animirana? Lahko jih animirate z uporabo prehod premoženja in @keyframes animacije, ampak kar je še bolj hladno je, da lahko animirane transformacije postanejo zarezane z dodatkom malo učinek odbijanja, uporabljati kubični-bezier () časovne funkcije.

Na kratko, kubični-bezier () (v CSS) je a časovna funkcija za prehode. Določa hitrost prehoda in med drugim se lahko uporablja tudi za to ustvarite odbojni učinek v animacijah.

Na tem mestu bomo najprej ustvarite preprosto animacijo preoblikovanja do katerih smo kasneje dodajte a kubični-bezier () časovne funkcije. Na koncu te vadnice boste razumeli, kako ustvarite animacijo, ki jo uporablja tako oboževalec kot učinek odbijanja. Tu je končni rezultat (kliknite za ogled učinka).

Demo je navdihnila ta čudoviti Dribbble posnetek Christopherja Jonesa o animiranem označevalniku lokacije.

1. Ustvarjanje listov

Oblika oznake mesta je sestavljena iz petih (naj jih imenujemo) listov. Če želite ustvariti ovalne oblike listov uporabimo polmer meje Lastnost CSS. The polmer meje enega vogala sestavljena iz dveh polmerov, vodoravno in navpično, kot je prikazano spodaj.

The polmer meje lastnost ima veliko različnih skladenj. Za obliko markerja bomo uporabili bolj zapleteno:

 obrobni polmer: htl htr hbr hbl / vtl vtr vbr vbl; 

V tej skladnji so vodoravni in navpični polmeri združeni; h & v predstavljajo vodoravni in navpični polmeri in t, l, b & r predstavljajo zgornji, levi, spodnji in desni vogali. Na primer, vbl pomeni navpični polmer spodnjega levega kota.

Če daš samo ena vrednost za vodoravno ali navpično stran bo ta vrednost brskalnika kopirana v vse druge vodoravne ali navpične radije.

Za ustvarite vertikalno ovalno obliko, ohranite vodoravni radij na 50% za vse vogale in prilagodite navpične, dokler ne vidite želene oblike. The vodoravna stran bo uporabljala samo eno vrednost: 50%.

The navpični polmeri zgornji levi in ​​zgornji desni kot 30%, medtem ko bodo spodnji levi in ​​spodnji desni vogali uporabili 70% vrednost.

HTML

CSS

.pinStarLeaf širina: 60px; višina: 120px; obmejni polmer: 50% / 30% 30% 70% 70%; barva ozadja: # B8F0F5; 

2. Množenje listov

Ker bo označevalnik razkril pet listov, jih ustvarimo Še štiri kopije lista v različnih barvah in z absolutnim položajem, da jih med seboj nalagajo.

HTML

CSS

#pinStarWrapper širina: 300px; višina: 300px; položaj: relativna;  .pinStarLeaf širina: 60px; višina: 120px; položaj: absolutno; obmejni polmer: 50% / 30% 30% 70% 70%; levo: 0; desno: 0; na vrh: 0; spodaj: 0; margin: auto; motnost: .5;  .pinStarLeaf: nth-of-type (1) background-color: # B8F0F5;  .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC;  .pinStarLeaf: nth-of-tipa (3) background-color: # 94F3B0;  .pinStarLeaf: nth-of-tipa (4) background-color: # D2F8A1;  .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;  

3. Zajemanje Kliknite Dogodek in izboljšanje estetike

Gremo dodajte potrditveno polje z #pinStarCenterChkBox identifikator za zajem dogodka klikanja. Ko je potrditveno polje označeno, bodo listi razpršeni (zavrteli). Dodati moramo tudi a bel krog z #pinStarCenter identifikator za estetiko. Postavljen bo na vrh markerja in bo osrednji del oznake mesta.

HTML

Preden postavimo potrditveno polje in beli krog po listih:

CSS

Najprej nastavimo osnovne sloge za potrditveno polje in krog, ki pokriva:

 #pinStarCenter, #pinStarCenterChkBox širina: 45px; višina: 50px; položaj: absolutno; levo: 0; desno: 0; vrh: -60px; spodaj: 0; margin: auto; barva ozadja: #fff; obmejni polmer: 50%; kazalec: kazalec;  #pinStarCenter, .pinStarLeaf pointer-dogodki: nič;  #pinStarCenter> input [type = "checkbox"] width: 100%; višina: 100%; kazalec: kazalec;  

Vsak list se bo vrtel vzdolž osi z pod različnimi koti, določiti moramo transform: rotatez (); ustrezno lastnino ustvarite obliko zvezde. Uporabljamo tudi prehod nepremičnine za učinek vrtenja (natančneje uporabljamo prehod: transformacija 1s linearna pravilo za listje).

 #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf prehod: transformacija 1s linearna;  #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Če pogledate CSS zgoraj, lahko vidite iz prisotnosti #pinStarCenterChkBox: označeno ~ splošni izbirnik za sestre, ki ga dodamo samo prehod in transform lastnosti ko potrdite polje (ko je uporabnik kliknil oznako).

4. Spreminjanje središča rotacije

Privzeto je središče vrtenja pozicionirano v sredini vrtljivega elementa, v našem primeru v središču listov. Središče transformacije moramo premakniti na notranji konec listov. To lahko naredimo z uporabo transformacije Lastnost CSS, ki spremeni položaj transformiranih elementov.

Če želite, da učinek rotacije deluje pravilno, dodamo naslednja pravila .pinStarLeaf izbirnik v datoteki CSS:

 .pinStarLeaf transform-origin: 30px 30px; prehod: transformacija 1s linearna;  

Oglejmo si našo animacijo, ki se razgiba v akciji - na tej točki, brez učinka odskoka še. Kliknite na beli krog na vrhu oznake.

Razumevanje Kako ubic-Bezier () deluje

Zdaj, da bi dodali učinek bounce, moramo zamenjati linearno s časovno funkcijo kubični-bezier () v prehod v CSS datoteki.

Najprej pa naj razumemo logika kubični-bezier () časovne funkcije tako da lahko zlahka razumete učinek odboja.

Skladnja za kubični-bezier () funkcija je naslednja, d in t so razdalja in čas, in njihove vrednosti so običajno med 0 in 1:

kubični-bezier (t1, d1, t2, d2)

Čeprav razlaga CSS kubični-bezier () glede na razdaljo in čas ni natančno, to je veliko lažje razumeti.

Predpostavimo, da obstaja polje, ki se premika od točke A do točke B v 6 sekundah. Uporabimo naslednje kubični-bezier () časovno funkcijo za prehod z t1 = 0 in d1 = 1 vrednosti.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubični-bezier (0,1,0,0) 

V skoraj nobenem trenutku se škatla premakne iz točke A v srednjo točko in preostanek časa doseže B.

Poskusimo enako prehod z vrednostmi t1 = 1 in d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubični-bezier (1,0,0,0) 

Prve tri sekunde se polje ne premakne veliko, kasneje pa skoraj skoči na srednjo točko in se začne enakomerno premikati proti B.

Kot lahko vidite, d1 nadzoruje razdalja med A & središče, in t1 čas, potreben za dosego sredine točke od A.

Uporabimo d2 in t2 zdaj. Oboje t1 in d1 bo 1, in t2 = 1 in d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubični-bezier (1,1,0,1) 

Škatla se premakne skoraj do polovice v 3 sekundah (zaradi t1 = 1, d1 = 1) in takoj skoči na točko B.

Zadnji primer zamenja prejšnje vrednosti t2 in d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubični-bezier (1,1,1,0) 

Škatla se premakne skoraj do polovice v 3 sekundah (zaradi t1 = 1, d1 = 1), potem se še 3 sekunde ne premakne veliko pred skokom v točko B.

Ti primeri to kažejo d2 in t2 nadzirate razdaljo in čas, ki ga potrebuje polje od sredine točke do točke B.

Čeprav verjetno niste potrebovali te dolge (še redke) razlage kubični-bezier () na tej točki menim, da vam bo to pomagalo bolje razumeti to funkcijo. Zdaj, kje pride vse to do preloma?

5. Dodajanje učinka odbijanja s kubičnim-bezierjem ()

The ključni parametri za učinek bounce so razdalje, d1 in d2. A d1 vrednost. \ t manj kot 1 vzame polje za točko A pred nadaljevanjem proti B na začetku animacije.

A d2 vrednost. \ t več kot 1 vzame polje nad točko B preden se vrnete na počitek v B na koncu animacije. Iz tega sledi, da je učinek odskoka nazaj in nazaj.

Sedaj bom dodal kubični-bezier () vrednosti neposredno na naš demo namesto prvega linearno vrednost. \ t prehod lastnost, in vam omogočajo, da vidite rezultate.

 #pinStarCenterChkBox: preverjeno ~ .pinStarLeaf prehod: transformira 1s kubični-bezier (.8, - .5, .2,1.4);  

Tu je končni rezultat, animacija CSS samo za fan-out z učinkom odbijanja:

Za primerjavo in boljše razumevanje bounce efekta, tukaj je, kako kubični-bezier () vrednost animacije se obnaša, ko je uporabljena za naš primerni okvir: