CSS3 animācija - ventilatora izejas izveide ar atlekšanas efektu, izmantojot Bezieras līkni

Vai jūs zinājāt, ka ģeometriskās transformācijas pievienots HTML elementiem ar pārveidotCSS īpašumus, piemēram, mērogu, šķībi un pagriešanu, var animēt? Tos var animēt, izmantojot pāreju īpašums un @ taustiņi animācijas, bet tas, kas ir vēl vēsāks, ir tas, ka animācijas pārveidojumi var tikt uzņemti ar nelielu papildinājumu lielība, izmantojot kubikmetrs () laika noteikšanas funkcija.

Īsumā, kubikmetrs () (CSS) ir a pārejas laika noteikšanas funkcija. Tas nosaka pārejas ātrumu, un, cita starpā, to var izmantot arī radīt animācijas efektu.

Šajā ziņojumā vispirms mēs ejam izveidot vienkāršu transformācijas animāciju kam mēs vēlāk pievienot a kubikmetrs () laika noteikšanas funkcija. Šīs apmācības beigās jūs sapratīsiet, kā izveidot animāciju, kas izmanto gan fan-out, gan lielība. Šeit ir gala rezultāts (noklikšķiniet, lai redzētu efektu).

Demo ir iedvesmojis šis skaistais Dribbble, kuru Christopher Jones nošāva par animācijas atrašanās vietas marķieri.

1. Lapu izveide

Atrašanās vietas marķiera forma sastāv no piecām (pieņemsim tos) lapām. Lai izveidotu ovāla forma lapas, izmantojiet robežu rādiuss CSS īpašums. The robežu rādiuss no viena stūra ir sastāv no diviem rādiusiem, horizontāli un vertikāli, kā parādīts zemāk.

The robežu rādiuss īpašumam ir daudz dažādu sintaksi. Marķiera formai mēs izmantosim sarežģītāku:

 robežu rādiuss: htl htr hbr hbl / vtl vtr vbr vbl; 

Šajā sintaksē horizontālie un vertikālie rādījumi ir sagrupēti kopā; h & v attēlo horizontālos un vertikālos rādiusus, un t, l, b & r ir augšējie, kreisie, apakšējie un labie stūri. Piemēram, vbl apzīmē apakšējā kreisā stūra vertikālo rādiusu.

Ja jūs dodaties tikai viena vērtība vai nu horizontālā, vai vertikālā pusē šī vērtība tiks kopēta uz visiem pārējiem horizontālajiem vai vertikālajiem rādiusiem, izmantojot pārlūkprogrammu.

Uz izveidot vertikālu ovālu formu, saglabāt horizontālos rādiusus 50% Visiem stūriem un pielāgojiet vertikālās, līdz tiek parādīta vēlamā forma. The horizontālā puse izmantos tikai vienu vērtību: 50%.

The vertikālie rādiusi augšējā un augšējā labajā stūrī 30%, kamēr kreisajā un apakšējā labajā stūrī tiks izmantots 70% vērtību.

HTML

CSS

.pinStarLeaf platums: 60px; augstums: 120 pikseļi; robežu rādiuss: 50% / 30% 30% 70% 70%; fona krāsa: # B8F0F5; 

2. Lapu reizināšana

Tā kā marķieris izstaro piecas lapas, mēs izveidosim vēl četras lapas kopijas dažādās krāsās un ar absolūtu pozicionēšanu, lai tos sakārtotu.

HTML

CSS

#pinStarWrapper platums: 300px; augstums: 300px; pozīcija: relatīvais;  .pinStarLeaf platums: 60px; augstums: 120 pikseļi; pozīcija: absolūta; robežu rādiuss: 50% / 30% 30% 70% 70%; pa kreisi: 0; pa labi: 0; tops: 0; apakšā: 0; starpība: auto; dūmainība: .5;  .pinStarLeaf: nth-of-type (1) fona krāsa: # B8F0F5;  .pinStarLeaf: nth-of-type (2) fona krāsa: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) fona krāsa: # 94F3B0;  .pinStarLeaf: nth-of-type (4) fona krāsa: # D2F8A1;  .pinStarLeaf: nth-of-type (5) fona krāsa: # F3EDA2;  

3. Klikšķa notikuma un estētikas uzlabošana

Let's pievienojiet izvēles rūtiņu Ar #pinStarCenterChkBox identifikators, lai uztvertu klikšķa notikumu. Ja ir atzīmēta izvēles rūtiņa, lapas tiks ventilētas (rotē). Mums arī jāpievieno balts aplis Ar #pinStarCenter estētikas identifikators. Tas tiks novietots marķiera augšpusē, un tas būs atrašanās vietas marķiera centrs.

HTML

Pirms ievietojam izvēles rūtiņu un pēc tam balto apli - lapas:

CSS

Pirmkārt, mēs noteicam izvēles rūtiņas galvenos stilus un pārklājuma loku:

 #pinStarCenter, #pinStarCenterChkBox platums: 45px; augstums: 50px; pozīcija: absolūta; pa kreisi: 0; pa labi: 0; top: -60px; apakšā: 0; starpība: auto; fona krāsa: #fff; robežu rādiuss: 50%; kursors: rādītājs;  #pinStarCenter, .pinStarLeaf rādītāju notikumi: nav;  #pinStarCenter> ievade [type = "checkbox"] platums: 100%; augstums: 100%; kursors: rādītājs;  

Tā kā katra lapa rotē gar z-asi dažādos leņķos, mums ir jānosaka transformēt: rotatez (); attiecīgi veidot zvaigžņu formu. Mēs arī piemērojam pāreju īpašums rotācijas efektam (precīzāk mēs izmantojam pāreja: pārveidot 1s lineāru noteikums lapām).

 #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf pāreja: pārveidot 1s lineāro;  #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf: nth-of-type (5) transformēt: rotatez (35deg);  #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf: nth-of-type (4) transformēt: rotatez (105deg);  #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf: nth-of-type (3) transformēt: rotatez (180deg);  #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf: nth-of-type (2) pārveidot: rotatez (255deg);  #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf: nth-of-type (1) transformēt: rotatez (325deg);  

Ja jums ir apskatīt iepriekšminēto CSS, jūs varat redzēt no #pinStarCenterChkBox: pārbaudīts ~ vispārējais brālis / brālis, kuru mēs tikai pievienojam pāreju un pārveidot īpašības atzīmējot izvēles rūtiņu (kad lietotājs noklikšķināja uz marķiera).

4. Rotācijas centra maiņa

Pēc noklusējuma rotācijas centrs ir novietots rotētā elementa centrā, mūsu gadījumā, lapu centrā. Mums jāpārvieto transformācijas centrs uz lapu iekšējo galu. To varam izdarīt, izmantojot pārveidot CSS īpašums maina transformēto elementu stāvokli.

Lai rotācijas efekts darbotos pareizi, pievienosim divus turpmāk minētos noteikumus .pinStarLeaf atlasītājs mūsu CSS failā:

 .pinStarLeaf transform-origin: 30px 30px; pāreja: pārveidot 1s lineāro;  

Paskatīsimies mūsu fanu animāciju darbībā - šajā brīdī, bez vēl lieliem efektiem. Noklikšķiniet uz balta apļa, kas atrodas marķiera augšpusē.

Izpratne par to, kā darbojas ubic-Bezier ()

Tagad, lai pievienotu piepeši efektu, mums jāaizstāj lineāra laika funkcija ar kubikmetrs () iekš pāreju deklarācijas mūsu CSS failā.

Bet vispirms sapratīsim loģika aiz kubikmetrs () laika noteikšanas funkcija lai jūs varētu viegli saprast atlēkušo efektu.

Sintakse kubikmetrs () funkcija ir šāda, d un t ir attālums un laiks, un to vērtības parasti svārstās no 0 līdz 1:

kubikmetrs (t1, d1, t2, d2)

Pat ja izskaidro CSS kubikmetrs () attāluma un laika ziņā tas nav precīzs, tas ir daudz vieglāk saprast.

Pieņemsim, ka tur ir lodziņš, kas pārvietojas no punkta A uz B 6 sekunžu laikā. Izmantosim sekojošo kubikmetrs () laika noteikšanas funkcija pārejai ar t1 = 0 un d1 = 1 vērtības.

 / * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubikmetru (0,1,0,0) 

Gandrīz bez laika, lodziņš pārvietojas no A punkta uz viduspunktu un pārējo laiku sasniedz B.

Izmēģināsim to pašu pāreju ar vērtībām t1 = 1 un d1 = 0.

 / * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubikmetru (1,0,0,0) 

Pirmajās trīs sekundēs lodziņš nepārvietojas daudz, un vēlāk tas gandrīz paceļas uz viduspunktu un sāk virzīties uz priekšu uz B.

Kā jūs redzat, d1 kontrolē attālums starp A & viduspunktu, un t1 the laiks, kas nepieciešams, lai sasniegtu viduspunktu no A.

Izmantojam d2 un t2 tagad. Abi t1 un d1 būs 1, un t2 = 1 un d2 = 0.

 / * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubikmetru (1,1,0,1) 

Kaste 3 sekundēs pārvietojas gandrīz pusceļā (pateicoties t1 = 1, d1 = 1), un nekādā gadījumā tas nepārlec uz punktu B.

Pēdējais piemērs maina iepriekšējās vērtības t2 un d2:

 / * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubikmetru (1,1,1,0) 

Kaste 3 sekundēs pārvietojas gandrīz pusceļā (pateicoties t1 = 1, d1 = 1), tad vēl 3 sekundes nepārvietojas daudz, pirms pāriet uz punktu B.

Šie piemēri liecina, ka d2 un t2 kontrolēt attālumu un laiku, kas nepieciešams lodziņam pāriet no viduspunkta uz punktu B.

Lai gan jums, iespējams, nav vajadzīgs šis ilgais (bet retais) skaidrojums kubikmetrs () šajā brīdī es domāju, ka tas palīdzēs jums labāk izprast šo funkciju. Tagad, kur tas piepildās?

5. Atlekšanas efekta pievienošana ar kubik-Bezieru ()

The galvenie parametri par piepeši efekts ir attālumi, d1 un d2. A d1 vērtība mazāk nekā 1 ņem lodziņu aiz A punkta pirms turpināt virzīties uz B animācijas sākumā.

A d2 vērtība vairāk nekā 1 ņem lodziņu ārpus B punkta pirms atgriešanās atpūsties pie B animācijas beigās. Līdz ar to ir atpakaļ un atpakaļ.

Es tagad pievienošu kubikmetrs () vērtības tieši mūsu demonstrācijai pirmās vietas vietā lineāra vērtība pāreju īpašums, un ļauj jums redzēt rezultātus.

 #pinStarCenterChkBox: pārbaudīts ~ .pinStarLeaf pāreja: pārveidot 1s kubik-bezier (.8, -. 5, .2,1,4);  

Lūk, gala rezultāts, tikai CSS-fan-out animācija ar atlēkušo efektu:

Salīdzinājumam un labākai bounce efektu izpratnei šeit ir redzams, kā kubikmetrs () animācijas vērtība darbojas, kad tā tiek piemērota mūsu piemēru lodziņam: