CSS3 Animace - Vytvoření Fan-Out s efektem odrazu pomocí Bezierovy křivky
Věděli jste, že geometrické transformace přidán do elementů HTML pomocí přeměnitVlastnost CSS, jako je měřítko, zkosení a otočení, lze animovat? Mohou být animovány pomocí přechod vlastnictví a @ keyframes animace, ale to, co je ještě chladnější, je, že animované transformace mohou být převzaty vrub s přidáním trochu odrazit efekt, za použití cubic-bezier () časování.
Ve zkratce, cubic-bezier () (v CSS) je a časování pro přechody. Určuje rychlost přechodu a mimo jiné může být také použita vytvořit odrazující efekt v animacích.
V tomto příspěvku budeme nejprve vytvořit jednoduchou transformační animaci ke kterému později přidat cubic-bezier () časování. Na konci tohoto kurzu pochopíte, jak vytvořit animaci, která se používá jak fanda, tak odraz. Zde je konečný výsledek (klikněte pro zobrazení).
Demo je inspirováno tímto krásným Dribbble výstřelem Christophera Jonesa o animovaném umístění značky.
1. Vytváření listů
Tvar značky polohy je tvořen pěti (nazýváme je) listy. Vytvořit oválný tvar použijte list poloměr ohraničení Vlastnost CSS. poloměr ohraničení jednoho rohu se skládá ze dvou poloměrů, horizontální a vertikální, jak je znázorněno níže.
poloměr ohraničení vlastnost má mnoho různých syntaxí. Pro tvar značky použijeme komplikovanější:
border-radius: htl htr hbl / vtl vtr vbr vbl;
V této syntaxi jsou horizontální a vertikální poloměry seskupeny; h & proti představují vodorovné a svislé poloměry a t, Já, b & r představují horní, levý, dolní a pravý roh. Například, vbl znamená vertikální poloměr dolního levého rohu.
Pokud dáš pouze jednu hodnotu pro horizontální nebo vertikální stranu bude tato hodnota prohlížečem zkopírována do všech ostatních horizontálních nebo vertikálních poloměrů.
Na vytvořit vertikální oválný tvar, udržujte vodorovné poloměry na 50% pro všechny rohy a upravte svislé, dokud není vidět požadovaný tvar. horizontální straně použije pouze jednu hodnotu: 50%.
svislé poloměry horního levého a horního pravého rohu 30%, zatímco dolní levý a pravý dolní roh bude používat 70% hodnota.
HTML
CSS
.pinStarLeaf width: 60px; výška: 120px; poloměr hranic: 50% / 30% 30% 70% 70%; barva pozadí: # B8F0F5;
2. Vynásobení listů
Vzhledem k tomu, že se značka rozevře a zobrazí pět listů, vytvoříme čtyři další kopie listu v různých barvách as absolutním umístěním, aby se na sebe stohovaly.
HTML
CSS
#pinStarWrapper width: 300px; výška: 300px; poloha: relativní; .pinStarLeaf width: 60px; výška: 120px; pozice: absolutní; poloměr hranic: 50% / 30% 30% 70% 70%; vlevo: 0; vpravo: 0; nahoru: 0; dole: 0; okraj: auto; opacity: .5; .pinStarLeaf: nth-of-type (1) barva pozadí: # B8F0F5; .pinStarLeaf: nth-of-type (2) background-color: # 9CF3DC; .pinStarLeaf: nth-of-type (3) barva pozadí: # 94F3B0; .pinStarLeaf: nth-of-type (4) background-color: # D2F8A1; .pinStarLeaf: nth-of-type (5) background-color: # F3EDA2;
3. Zachycení Click Event & Improving Estetics
Pojďme přidat zaškrtávací políčko s #pinStarCenterChkBox identifikátor pro zachycení události kliknutí. Je-li zaškrtávací políčko zaškrtnuto, listy se vyklopí (otočí). Potřebujeme také přidat bílý kruh s #pinStarCenter identifikátor estetiky. Bude umístěn na horní části značky a bude to středový kus značky polohy.
HTML
Zaškrtneme políčko před, a bílý kruh za, listy:
CSS
Nejprve nastavíme základní styly pro zaškrtávací políčko a krycí kruh:
#pinStarCenter, #pinStarCenterChkBox width: 45px; výška: 50px; pozice: absolutní; vlevo: 0; vpravo: 0; nahoru: -60px; dole: 0; okraj: auto; barva pozadí: #fff; poloměr hranic: 50%; kurzor: ukazatel; #pinStarCenter, .pinStarLeaf pointer-events: none; #pinStarCenter> input [type = "zaškrtávací políčko"] width: 100%; výška: 100%; kurzor: ukazatel;
Jak se každý list otáčí podél osy z v různých úhlech, musíme nastavit transform: rotatez (); majetku, na vytvořit tvar hvězdy. Také aplikujeme přechod vlastnictví pro rotační efekt (přesněji používáme přechod: lineární lineární transformace pravidlo pro listy).
#pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s lineární; #pinStarCenterChkBox: zaškrtnuto ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: zaškrtnuto ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: zaškrtnuto ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: zaškrtnuto ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: zaškrtnuto ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Pokud se podíváte na CSS výše, můžete vidět z přítomnosti #pinStarCenterChkBox: zaškrtnuto ~ obecný sourozenec selektor, který přidáme pouze přechod a přeměnit vlastnosti Pokud je políčko zaškrtnuto (když uživatel klikl na značku).
4. Úprava středu rotace
Ve výchozím nastavení je střed rotace umístěn ve středu otočného prvku, v našem případě, uprostřed listů. Musíme přemístit střed transformace na vnitřní konec listů. Můžeme to udělat pomocí transformačního původu CSS vlastnost, která mění polohu transformovaných prvků.
Aby efekt rotace fungoval správně, přidejte dvě následující pravidla .pinStarLeaf volič v našem souboru CSS:
.pinStarLeaf transformace-původ: 30px 30px; přechod: transformace 1s lineární;
Podívejme se, jak se v této chvíli rozjíždí animace v akci - a to ještě bez odrazu. Klikněte na bílý kruh v horní části značky.
Pochopení jak ubic-Bezier () funguje
Chcete-li přidat efekt odrazu, musíme nahradit lineární funkce časování cubic-bezier () v přechod deklarace v našem souboru CSS.
Nejdříve ale pochopíme logika za cubic-bezier () časování tak, abyste mohli snadno pochopit efekt odrazu.
Syntaxe pro cubic-bezier () funkce je následující, d a t jsou vzdálenost a čas, a jejich hodnoty se typicky pohybují mezi 0 a 1:
cubic-bezier (t1, d1, t2, d2)
I když vysvětluje CSS cubic-bezier () pokud jde o vzdálenost a čas není přesný, je to mnohem snazší pochopit tímto způsobem.
Předpokládejme, že je pole, které se pohybuje z bodu A do bodu B za 6 sekund. Použijme následující cubic-bezier () časování funkce pro přechod s t1 = 0 a d1 = 1 hodnoty.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubický bezier (0,1,0,0)
V téměř žádném okamžiku se box přesune z bodu A do poloviny a zbytek času dosáhne B.
Zkusme stejný přechod s hodnotami t1 = 1 a d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubický bezier (1,0,0,0)
Během prvních tří vteřin se box moc nepohybuje a později téměř skočí do středu a začne se stále pohybovat směrem k B.
Jak můžete vidět, d1 ovládá vzdálenost mezi A & střed, a t1 čas potřebný k dosažení středního bodu od bodu A.
Použijme d2 a t2 Nyní. 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)
Krabice se pohybuje téměř do poloviny během 3 sekund (kvůli t1 = 1, d1 = 1) a v žádném okamžiku nepřekročí bod B.
Poslední příklad přepíše předchozí hodnoty t2 a d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubický bezier (1,1,1,0)
Krabice se pohybuje téměř do poloviny během 3 sekund (kvůli t1 = 1, d1 = 1), pak se po dobu dalších 3 vteřin příliš nepohne, než skočíte na bod B.
Tyto příklady ukazují, že d2 a t2 ovládat vzdálenost a dobu, po kterou box přejde přejděte ze středu na bod B.
I když jste pravděpodobně nepotřebovali toto dlouhé (ale řídké) vysvětlení cubic-bezier () v tomto bodě si myslím, že vám to pomůže lépe porozumět této funkci. A kde to všechno dopadne?
5. Přidání efektu odrazu pomocí Cubic-Bezier ()
klíčové parametry pro efekt odrazu jsou vzdálenosti, d1 a d2. A d1 hodnota menší než 1 vezme box za bodem A před pokračováním směrem k B na začátku animace.
A d2 hodnota více než 1 vezme box za bod B před návratem k odpočinku v B na konci animace. Odtud tedy dochází k efektu odrazu vpřed a vzad.
Teď přidám cubic-bezier () hodnoty přímo na naše demo místo toho prvního lineární hodnotu přechod a uvidíte výsledky.
#pinStarCenterChkBox: checked ~ .pinStarLeaf transition: transform 1s cubic-bezier (.8, -. 5, .2,1,4);
Zde je konečný výsledek, animace CSS-fan-out s efektem odrazu:
Pro srovnání a lepší pochopení efektu odrazu, zde je jak cubic-bezier () hodnota animace se chová, když je použita v našem příkladu:
