CSS3-animaatio - Fan-Outin luominen kääntöefektillä Bezier-käyrän avulla

Tiesitkö että geometriset muunnokset lisätään HTML-elementteihin muuttaaCSS-ominaisuus, kuten mittakaava, vinoutuminen ja kiertäminen, voidaan animoida? Ne voidaan animoida käyttämällä siirtyminen omaisuutta ja @keyframes animaatioita, mutta vielä viileämpi on, että animoidut muunnokset voidaan ottaa pituudeksi lisäämällä hieman bounce-vaikutus, käyttämällä kuutio-bezier () ajoitus.

Pähkinänkuoressa, kuutio-bezier () (CSS: ssä) on a ajoitustoiminto siirtymille. Siinä määritellään siirtymän nopeus, ja sitä voidaan muun muassa käyttää myös luo pomppiva vaikutus animaatioihin.

Tässä viestissä aiomme ensin luo yksinkertainen muunnos-animaatio johon me myöhemmin lisää kuutio-bezier () ajoitus. Tämän oppaan lopussa ymmärrät, miten luodaan animaatio, joka käyttää sekä fan-out että bounce-vaikutus. Tässä on lopullinen tulos (napsauta nähdäksesi vaikutuksen).

Demo on innoittamana tästä kauniista Christopher Jonesin kuvaamasta Dribbbleista animoidusta sijaintimerkistä.

1. Lehden luominen

Sijaintimerkin muoto koostuu viidestä (kutsutaan heistä). Voit luoda Ovaalin muotoinen lehtiä, käytetään border-säde CSS-ominaisuus. border-säde yksi kulma on koostuu kahdesta säteestä, vaaka ja pystysuora, kuten alla on esitetty.

border-säde omaisuudella on monia eri syntakseja. Merkin muotoon käytämme monimutkaisempaa:

 raja-säde: htl htr hbr hbl / vtl vtr vbr vbl; 

Tässä syntaksissa vaaka- ja pystysuorat säteet on ryhmitelty yhteen; h & v edustavat vaakasuoria ja pystysuoria säteitä, ja T, l, b & R edustavat ylä-, vasen-, ala- ja oikeaa kulmaa. Esimerkiksi, VBL tarkoittaa vasemman alakulman pystysuoraa sädettä.

Jos annat vain yksi arvo joko vaaka- tai pystysuoran sivun osalta selain kopioi arvon kaikille muille vaaka- tai pystysuorille sädeille.

jotta luoda pystysuora soikea muoto, pitää vaakasuorat säteet 50% kaikille kulmille ja säädä pystysuoria, kunnes haluttu muoto näkyy. vaakasuora puoli käyttää vain yhtä arvoa: 50%.

pystysuorat säteet vasemman ja oikean yläkulman kulmat 30%, vasemmassa ja oikeassa alakulmassa käytetään 70% arvo.

HTML

CSS

.pinStarLeaf leveys: 60px; korkeus: 120px; raja-säde: 50% / 30% 30% 70% 70%; taustaväri: # B8F0F5; 

2. Lehdet kerrotaan

Koska merkki puhaltaa esiin viisi sivua, luomme neljä muuta kopiota lehdestä eri väreissä ja absoluuttisesti sijoitettuna, jotta ne voidaan pinota toisilleen.

HTML

CSS

#pinStarWrapper leveys: 300px; korkeus: 300px; asema: suhteellinen;  .pinStarLeaf leveys: 60px; korkeus: 120px; asema: absoluuttinen; raja-säde: 50% / 30% 30% 70% 70%; vasen: 0; oikea: 0; alkuun: 0; pohja: 0; marginaali: auto; opasiteetti: .5;  .pinStarLeaf: nth-of-type (1) taustaväri: # B8F0F5;  .pinStarLeaf: nth-of-type (2) taustaväri: # 9CF3DC;  .pinStarLeaf: nth-of-type (3) taustaväri: # 94F3B0;  .pinStarLeaf: nth-of-type (4) taustaväri: # D2F8A1;  .pinStarLeaf: nth-of-type (5) taustaväri: # F3EDA2;  

3. Napsauta tapahtuman ja estetiikan parantaminen

Katsotaanpa Lisää valintaruutu kanssa #pinStarCenterChkBox tunniste napsautustapahtuman tallentamiseksi. Kun valintaruutu on valittu, lehdet puhuvat ulos (kiertyvät). Meidän on myös lisättävä a valkoinen ympyrä kanssa #pinStarCenter estetiikan tunniste. Se sijoitetaan merkin päälle ja se on sijaintimerkin keskiosa.

HTML

Laita valintaruutu ennen, ja valkoinen ympyrä jälkeen, lehdet:

CSS

Ensin asetamme valintaruudun ja peittoympyrän perustyylit:

 #pinStarCenter, #pinStarCenterChkBox leveys: 45px; korkeus: 50px; asema: absoluuttinen; vasen: 0; oikea: 0; alkuun: -60px; pohja: 0; marginaali: auto; taustaväri: #fff; raja-säde: 50%; kohdistin: osoitin;  #pinStarCenter, .pinStarLeaf osoittimet-tapahtumat: ei;  #pinStarCenter> input [type = "checkbox"] leveys: 100%; korkeus: 100%; kohdistin: osoitin;  

Koska jokainen lehti pyörii z-akselia pitkin eri näkökulmista, meidän on asetettava muunnos: rotatez (); omaisuutta vastaavasti luo tähti. Sovellamme myös siirtyminen omaisuus pyörimisvaikutuksesta (tarkemmin käytämme siirtyminen: muuntaa 1s lineaariseksi sääntö lehdille).

 #pinStarCenterChkBox: check ~ .pinStarLeaf siirtyminen: muunnos 1s lineaarinen;  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg);  #pinStarCenterChkBox: check ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);  

Jos katsot yllä olevaa CSS: ää, voit nähdä #pinStarCenterChkBox: valittu ~ yleinen sisaruksenvalitsin, johon vain lisätään siirtyminen ja muuttaa ominaisuudet kun valintaruutu on valittuna (kun käyttäjä napsautti merkkiä).

4. Rotation keskuksen muuttaminen

Oletusarvoisesti pyörimiskeskus on sijoitettu käännetyn elementin keskellä, meidän tapauksessamme, lehtien keskellä. Meidän on siirrettävä muutoksen keskipiste lehtien sisäiseen päähän. Voimme tehdä tämän käyttämällä muunnos-alkuperää CSS-ominaisuus muuttaa muunnettujen elementtien asemaa.

Jotta pyörimisvaikutus toimisi oikein, lisätään seuraavat kaksi sääntöä .pinStarLeaf CSS-tiedoston valitsin:

 .pinStarLeaf transform-origin: 30px 30px; siirtyminen: muunnos 1s lineaarinen;  

Katsotaan, että fanimme animaatio on toiminnassa - tässä vaiheessa ilman pomppuvaikutusta. Napsauta valkoista ympyrää, merkin päällä.

Ymmärtäminen, miten ubic-Bezier () toimii

Nyt, kun haluat lisätä pomppuvaikutuksen, meidän on korvattava lineaarinen ajastintoiminto kuutio-bezier () vuonna siirtyminen ilmoitukset CSS-tiedostossamme.

Mutta ensin ymmärrämme logiikan takana kuutio-bezier () ajoitus jotta voit helposti ymmärtää pomppivaikutuksen.

Syntaksi kuutio-bezier () toiminto on seuraava, d ja T olemme etäisyys ja aika, ja niiden arvot ovat tyypillisesti välillä 0 ja 1:

kuutiometri (t1, d1, t2, d2)

Vaikka selitetään CSS: ää kuutio-bezier () Etäisyyden ja ajan suhteen ei ole tarkka, on paljon helpompi ymmärtää se tällä tavalla.

Oletetaan laatikko, joka siirtyy pisteestä A - B 6 sekunnissa. Käytä seuraavia kuutio-bezier () ajastintoiminto siirtymistä varten t1 = 0 ja d1 = 1 arvot.

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

Lähes ei aikaa, laatikko siirtyy A: sta keskipisteeseen ja vie loppuosan B: hen.

Kokeile samaa siirtymistä arvojen kanssa t1 = 1 ja d1 = 0.

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

Kolmen ensimmäisen sekunnin ajan laatikko ei liiku paljon, ja myöhemmin se lähes hyppää keskipisteeseen ja alkaa liikkua tasaisesti kohti B: tä.

Kuten näet, D1 ohjaa etäisyys A: sta & puolivälissä, ja t1 aika, joka kuluu keskipisteen saavuttamiseksi A: sta.

Käytetään D2 ja t2 nyt. molemmat t1 ja D1 on 1 ja t2 = 1 ja d2 = 0.

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

Laatikko liikkuu melkein puolivälissä 3 sekunnissa (johtuen t1 = 1, d1 = 1), eikä missään vaiheessa hypätä kohtaan B.

Viimeinen esimerkki vaihtaa aiemmat arvot t2 ja D2:

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

Laatikko liikkuu melkein puolivälissä 3 sekunnissa (johtuen t1 = 1, d1 = 1), sitten kolme sekuntia ei liiku paljon ennen kuin siirryt kohtaan B.

Nämä esimerkit osoittavat tämän D2 ja t2 hallita etäisyyttä ja aikaa, jonka se vie ruutuun siirry keskipisteestä pisteeseen B.

Vaikka et todennäköisesti tarvinnut tätä pitkää (mutta harvaa) selitystä kuutio-bezier () Tässä vaiheessa mielestäni se auttaa sinua ymmärtämään tämän toiminnon paremmin. Nyt missä pomppi tulee tähän kaikkeen?

5. Bounce Effectin lisääminen Cubic-Bezier ()

tärkeimmät parametrit pomppumisvaikutukset ovat etäisyydet, D1 ja D2. D1 jonkin arvo alle 1 ottaa ruudun kohdan A takana ennen kuin jatkat kohti B: tä animaation alussa.

D2 jonkin arvo yli 1 ottaa ruudun B-kohdan ulkopuolella ennen kuin palaat lepoon B-animaation lopussa. Näin ollen edestakainen pomppivaikutus.

Lisää nyt kuutio-bezier () arvot suoraan demoomme entisen sijasta lineaarinen arvo siirtyminen voit nähdä tulokset.

 #pinStarCenterChkBox: check ~ .pinStarLeaf siirtyminen: muuntaa 1s kuutio-bezier (.8, - .5, .2,1.4);  

Tässä on lopullinen tulos, vain CSS: n tuulettimen ulosveto, jossa on hyppyvaikutus:

Vertailun vuoksi ja ymmärtääksesi pomppivaikutuksen paremmin, tässä on miten kuutio-bezier () animaation arvo käyttäytyy, kun sitä sovelletaan esimerkkilaatikkoon: