Animácia CSS3 - Vytvorenie výstupu Fan-Out s efektom odskoku pomocou Bezierovej krivky

Vedeli ste, že geometrické transformácie pridané do elementov HTML s premeniťVlastnosť CSS, ako je mierka, skosenie a rotácia, môžete animovať? Môžu byť animované pomocou prechod majetok a @keyframes animácie, ale čo je ešte chladnejšie, je to, že animované transformácie môžu byť prijaté do zárezu s trochou pridania efekt odrazu, pomocou kubických Beziérových () funkcia časovania.

Stručne, kubických Beziérových () (v CSS) je a časová funkcia pre prechody. Určuje rýchlosť prechodu a okrem iného sa dá zvyknúť vytvoriť efekt poskakovania v animáciách.

V tomto príspevku najprv budeme vytvoriť jednoduchú transformačnú animáciu ku ktorému sme neskôr pridaj kubických Beziérových () funkcia časovania. Na konci tohto tutoriálu pochopíte, ako vytvoriť animáciu, ktorá používa ako fan-out, tak efekt odrazu. Tu je konečný výsledok (kliknite na efekt).

Demo je inšpirované týmto prekrásnym Dribbble shot od Christophera Jonesa o animovanom mieste.

1. Vytvorenie listov

Tvar značky pozostáva z piatich (nazývame im) listy. Vytvoriť oválny tvar listu, použite border-radius Vlastnosť CSS. border-radius z jedného rohu je pozostáva z dvoch polomerov, horizontálne a vertikálne, ako je uvedené nižšie.

border-radius vlastnosť má mnoho rôznych syntaxov. Na tvar značky použijeme zložitejšie:

 okraj polomeru: htl htr hbr hbl / vtl vtr vbr vbl; 

V tejto syntaxe sú horizontálne a vertikálne polia zoskupené; hod & proti predstavujú horizontálne a vertikálne polomery a T, l, b & r predstavujú horné, ľavé, spodné a pravé rohy. Napríklad, VBL znamená vertikálny polomer ľavého dolného rohu.

Ak dáte iba jedna hodnota pre horizontálnu alebo vertikálnu stranu bude táto hodnota skopírovaná do všetkých ostatných horizontálnych alebo vertikálnych polomerov prehliadačom.

na vytvorte vertikálny oválny tvar, udržujte horizontálne polomery na 50% pre všetky rohy a nastavte vertikálne, kým sa nezobrazí požadovaný tvar. horizontálna strana bude používať iba jednu hodnotu: 50%.

vertikálne polomery horného ľavého a horného pravého rohu 30%, zatiaľ čo rohy v ľavom a pravom dolnom rohu použijú 70% hodnota.

HTML

CSS

.pinStarLeaf šírka: 60px; výška: 120px; polomer okrajov: 50% / 30% 30% 70% 70%; farba pozadia: # B8F0F5; 

2. Vynásobenie listov

Vzhľadom k tomu, značka bude fanúšikovia ukazuje päť listov, ktoré vytvoríme štyri ďalšie kópie listu v rôznych farbách as absolútnou polohou, aby sa navzájom stohovali.

HTML

CSS

#pinStarWrapper šírka: 300px; výška: 300px; pozícia: relatívna;  .pinStarLeaf šírka: 60px; výška: 120px; poloha: absolútna; polomer okrajov: 50% / 30% 30% 70% 70%; vľavo: 0; doprava: 0; top: 0; dno: 0; marža: auto; opacita: .5; . pinStarLeaf: n-of-type (1) farba pozadia: # B8F0F5; . pinStarLeaf: n-of-type (2) farba pozadia: # 9CF3DC; . pinStarLeaf: n-of-type (3) farba pozadia: # 94F3B0; . pinStarLeaf: n-of-type (4) farba pozadia: # D2F8A1; . pinStarLeaf: n-of-type (5) farba pozadia: # F3EDA2;  

3. Zachytenie udalosti kliknutia a zlepšenie estetiky

Poďme pridajte začiarkavacie políčko s #pinStarCenterChkBox identifikátor na zachytenie udalosti kliknutia. Po začiarknutí políčka sa listy rozvinú (otáčajú). Musíme tiež pridať a biely kruh s #pinStarCenter identifikátor pre estetiku. Bude umiestnená na hornej strane značky a bude stredovým prvkom značky polohy.

HTML

Zaškrtávacie políčko umiestnime pred tým a biely kruh po listoch:

CSS

Najprv nastavíme základné štýly pre začiarkavacie políčko a krycí kruh:

 # pinStarCenter, #pinStarCenterChkBox šírka: 45px; výška: 50px; poloha: absolútna; vľavo: 0; doprava: 0; top: -60px; dno: 0; marža: auto; farba pozadia: #fff; polomer okrajov: 50%; kurzor: ukazovateľ;  #pinStarCenter, .pinStarLeaf pointer-events: žiadne;  #pinStarCenter> zadajte [typ = "začiarkavacie políčko]" šírka: 100%; výška: 100%; kurzor: ukazovateľ;  

Každý list sa bude otáčať pozdĺž osi z v rôznych uhloch, musíme nastaviť transformovať: rotatez (); majetok zodpovedajúcim spôsobom vytvorte tvar hviezdy. Aplikujeme tiež prechod vlastnosť pre efekt rotácie (presnejšie používame prechod: transformácia 1s lineárna pravidlo pre listy).

 #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf prechod: transformácia 1s lineárna;  #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf: n-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf: n-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf: n-o-typ (3) transform: rotatez (180deg);  #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf: n-z typu (2) transform: rotatez (255deg);  #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf: n-z typu (1) transform: rotatez (325deg);  

Ak sa pozriete na vyššie uvedený CSS, môžete vidieť z prítomnosti #pinStarCenterChkBox: začiarknuté ~ všeobecný výber súrodenca, ktorý pridáme iba prechod a premeniť vlastnosti keď je začiarknuté políčko (keď používateľ klikol na značku).

4. Modifikácia stredu otáčania

Predvolene je umiestnený stred otáčania v strede otočeného prvku, v našom prípade, v strede listov. Musíme presunúť stred transformácie na vnútorný koniec listov. Môžeme to urobiť pomocou transformácie-origin Vlastnosť CSS to mení polohu transformovaných prvkov.

Ak chcete efekt rotácie fungovať správne, pridajte dve nasledujúce pravidlá do .pinStarLeaf selektor v našom súbore CSS:

 .pinStarLeaf transform-pôvod: 30px 30px; prechod: transformácia 1s lineárna;  

Pozrime sa na našu fanúšikovú animáciu v akcii - v tomto momente, bez toho, aby sme mali ešte efekt odrazu. Kliknite na biely kruh, ktorý sa nachádza nad značkou.

Pochopenie toho, ako funguje ubic-Bezier ()

Ak chcete pridať efekt odrazu, musíme nahradiť lineárne časová funkcia s kubických Beziérových () v prechod v našom súbore CSS.

Ale po prvé, chápeme to logika za kubických Beziérových () funkcia časovania takže môžete ľahko pochopiť efekt odrazu.

Syntax pre kubických Beziérových () funkcia je nasledujúca, d a T sú vzdialenosť a čas, a ich hodnoty sa zvyčajne pohybujú v rozmedzí od 0 do 1:

kubic-bezier (t1, d1, t2, d2)

Aj keď vysvetľuje CSS kubických Beziérových () z hľadiska vzdialenosti a času nie je presné, je to oveľa jednoduchšie pochopiť týmto spôsobom.

Predpokladajme, že existuje krabice, ktorá sa presúva z bodu A do bodu B za 6 sekúnd. Použite nasledujúce kubických Beziérových () časová funkcia pre prechod s t1 = 0 a d1 = 1 hodnoty.

 / t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubický bezier (0,1,0,0) 

V takmer žiadnom okamihu sa krabica presunie z bodu A do stredu a zvyšok času dosiahne hodnotu B.

Skúsme rovnaký prechod s hodnotami t1 = 1 a d1 = 0.

 / t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubický bezier (1,0,0,0) 

Počas prvých troch sekúnd sa box veľmi nehýbe a neskôr skoro skokom do stredu a začne sa postupne pohybovať smerom k B.

Ako môžeš vidieť, d1 riadi vzdialenosť medzi A & v strednom bode, a t1 čas potrebný na dosiahnutie stredného bodu od bodu A.

Použmeme to d2 a t2 Teraz. oba t1 a d1 bude 1 a t2 = 1 a d2 = 0.

 / t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubický bezier (1,1,0,1) 

Krabica sa pohybuje takmer do polovice za 3 sekundy (kvôli t1 = 1, d1 = 1) a v žiadnom momente neskočí na bod B.

Posledný príklad vymieňa predchádzajúce hodnoty t2 a d2:

 / t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubický bezier (1,1,1,0) 

Krabica sa pohybuje takmer do polovice za 3 sekundy (kvôli t1 = 1, d1 = 1), potom ešte po dobu ďalších 3 sekúnd nepohybuje veľa pred skokom do bodu B.

Tieto príklady ukazujú, že d2 a t2 kontrolujte vzdialenosť a čas, od ktorého je zaškrtnutá políčka prejdite od stredu do bodu B.

Aj keď ste pravdepodobne nepotrebovali toto dlhé (ale riedke) vysvetlenie kubických Beziérových () v tomto bode si myslím, že vám pomôže lepšie pochopiť túto funkciu. Teraz, kde to všetko prináša odraz?

5. Pridanie efektu Bounce s Cubic-Bezier ()

kľúčové parametre pre efekt odrazu sú vzdialenosti, d1 a d2. d1 hodnota menej ako 1 vezme okienko za bod A predtým, než budete pokračovať smerom k B na začiatku animácie.

d2 hodnota viac ako 1 vezme okienko za bod B predtým, ako sa vrátite k odpočinku na B na konci animácie. Z tohto dôvodu je efekt odrazu a dozadu.

Teraz pridám kubických Beziérových () hodnoty priamo na naše demo namiesto pôvodného lineárne hodnota prechod majetok a umožňujú vám vidieť výsledky.

 #pinStarCenterChkBox: začiarknuté ~ .pinStarLeaf prechod: transformácia 1s cubic-bezier (.8, - .5, .2,1.4);  

Tu je konečný výsledok, animácia fan-out CSS s efektom odchodov:

Pre porovnanie a lepšie pochopenie efektu odrazu, ako je to kubických Beziérových () hodnota animácie sa správa, keď sa použije v našom príklade: