CSS3-animatsioon - ventilaatori väljavõtte tegemine põrgutugevusega, kasutades Bezier-kõverat
Kas teadsite, et geomeetrilised muutused lisatakse HTML-elementidele teisendadaCSS-i omadusi, näiteks skaala, viltuse ja pööramise, saab animeerida? Neid saab animeerida üleminek vara ja @keyframes animatsioone, kuid mis veelgi lahedam on see, et animeeritud muundamisi saab lisada pisut lisades põrgatama, kasutades kuupmeetri () ajastusfunktsioon.
Lühidalt, kuupmeetri () (CSS-is) on a ülemineku ajastamise funktsioon. See määratleb ülemineku kiiruse ja seda võib muuhulgas kasutada ka varem luua animatsioonides kopsakas.
Selles postituses läheb kõigepealt luua lihtne transformatsiooni animatsioon millele me hiljem Lisa kuupmeetri () ajastusfunktsioon. Selle juhendi lõpus saate aru, kuidas luua animatsiooni, mis kasutab nii fan-out kui ka põrgatavat efekti. Siin on lõpptulemus (efekti nägemiseks klõpsake).
Demo on inspireeritud sellest kaunist Dribbble'ist, mille Christopher Jones pildistas animeeritud asukohamarkeriga.
1. Lehekülgede loomine
Asukohamarkeri kuju koosneb viiest (kutsume neid). Selle loomiseks ovaalne lehest, kasutame raadius CSS-i omadus. The raadius ühe nurgaga koosneb kahest raadiusest, horisontaalne ja vertikaalne, nagu allpool näidatud.
The raadius Omandil on palju erinevaid süntakseid. Markeri kuju jaoks kasutame keerulisemat:
äärisraadius: htl htr hbr hbl / vtl vtr vbr vbl;
Selles süntaksis rühmitatakse horisontaalsed ja vertikaalsed raadiused; h & v kujutavad horisontaalseid ja vertikaalseid raame ning t, l, b & r esindavad ülemist, vasakut, alumist ja paremat nurka. Näiteks, vbl tähistab vasakus alumises nurgas asuvat vertikaalset raadiust.
Kui sa annad ainult üks väärtus horisontaalse või vertikaalse külje puhul kopeerib see väärtus kõikidele teistele horisontaalsetele või vertikaalsetele raadiusele.
Et luua vertikaalne ovaalne kuju, hoidke horisontaalraadiusega 50% kõigi nurkade jaoks ja reguleerige vertikaalsed, kuni soovitud kuju on näha. The horisontaalne külg kasutab ainult ühte väärtust: 50%.
The vertikaalne raadius vasakpoolse ja ülemise parema nurga all 30%, vasakus ja alumises paremas nurgas kasutatakse 70% väärtus.
HTML
CSS
.pinStarLeaf laius: 60 px; kõrgus: 120 px; raadius: 50% / 30% 30% 70% 70%; taustavärv: # B8F0F5;
2. Lehtede korrutamine
Kuna marker tõmbab välja viie lehe, loome veel neli koopiat lehest erinevates värvides ja absoluutse positsioneerimisega, et neid üksteisele virnastada.
HTML
CSS
#pinStarWrapper laius: 300 px; kõrgus: 300 px; positsioon: suhteline; .pinStarLeaf laius: 60 px; kõrgus: 120 px; positsioon: absoluutne; raadius: 50% / 30% 30% 70% 70%; vasakul: 0; paremale: 0; top: 0; põhja: 0; marginaal: auto; läbipaistmatus: .5; .pinStarLeaf: nth-of-type (1) taustavärv: # B8F0F5; .pinStarLeaf: nth-of-type (2) taustavärv: # 9CF3DC; .pinStarLeaf: nth-of-type (3) taustavärv: # 94F3B0; .pinStarLeaf: nth-of-type (4) taustavärv: # D2F8A1; .pinStarLeaf: nth-of-type (5) taustavärv: # F3EDA2;
3. Klõpsa sündmuse ja esteetika parandamine
Olgem lisage märkeruut koos #pinStarCenterChkBox identifikaator klikkimise sündmuse salvestamiseks. Kui märkeruut on märgitud, hakkavad lehed välja (pöörlevad). Peame lisama ka a valge ring koos #pinStarCenter esteetika identifikaator. See asetatakse markeri ülaosale ja see on asukohamarkeri keskosa.
HTML
Me asetame märkeruudu enne ja valge ring pärast lehti:
CSS
Kõigepealt määrame ruudu ja katteringi põhilised stiilid:
#pinStarCenter, #pinStarCenterChkBox laius: 45px; kõrgus: 50 px; positsioon: absoluutne; vasakul: 0; paremale: 0; top: -60px; põhja: 0; marginaal: auto; taustavärv: #fff; raadius: 50%; kursor: pointer; #pinStarCenter, .pinStarLeaf pointer-sündmused: pole; #pinStarCenter> sisend [type = "checkbox"] laius: 100%; kõrgus: 100%; kursor: pointer;
Kuna iga leht pöörleb piki z-telge erinevates nurkades, peame määrama transform: rotatez (); kinnisvara vastavalt luua tähtkuju. Rakendame ka üleminek vara pöörlemise efekti jaoks (täpsemalt me kasutame üleminek: teisendage 1s lineaarseks reegel lehtedele).
#pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf üleminek: teisendada 1s lineaarset; #pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf: nth-of-type (5) transform: rotatez (35deg); #pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf: nth-of-type (4) transform: rotatez (105deg); #pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf: nth-of-type (3) transform: rotatez (180deg); #pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf: nth-of-type (2) transform: rotatez (255deg); #pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf: nth-of-type (1) transform: rotatez (325deg);
Kui te vaatate ülaltoodud CSS-i, siis näete #pinStarCenterChkBox: kontrollitud ~ üldine vendade valik, mille lisame ainult üleminek ja teisendada omadused kui märkeruut on märgitud (kui kasutaja klõpsas markeril).
4. Pööramise keskuse muutmine
Vaikimisi paikneb pöörlemise keskpunkt pööratud elemendi keskel, meie puhul, lehtede keskel. Me peame ümberkujundamise keskpunkti liikuma lehtede sisemise otsaga. Me saame seda teha kasutades teisenduse päritolu CSS-i omadus muudab transformeeritud elementide asukohta.
Pöördefekti nõuetekohaseks toimimiseks lisage kaks järgmist reeglit .pinStarLeaf meie CSS-faili valija:
.pinStarLeaf transform-origin: 30px 30px; üleminek: teisendage 1s lineaarne;
Vaatame oma fännide animeerimist toimingutes - praegu, ilma põrgatöö efektita. Klõpsa markeril oleva valge ringi peal.
Mõistmine, kuidas ubic-Bezier () toimib
Nüüd, põrgatuse efekti lisamiseks peame asendama lineaarne ajastusfunktsioon koos kuupmeetri () Euroopa üleminek deklaratsioonid meie CSS-failis.
Kuid kõigepealt mõista loogika taga kuupmeetri () ajastusfunktsioon et saaksite kergesti mõista põrgatavat efekti.
Süntaks kuupmeetri () funktsioon on järgmine, d ja t on kaugus ja aega, ja nende väärtused jäävad tavaliselt vahemikku 0 kuni 1:
kuupmeetri (t1, d1, t2, d2)
Kuigi CSS-i selgitatakse kuupmeetri () kauguse ja aja poolest ei ole see õige, see on sellest palju lihtsam mõista.
Oletame, et seal on kast, mis liigub punktist A kuni B 6 sekundi jooksul. Kasutame järgmist kuupmeetri () ajastamise funktsioon üleminekuga t1 = 0 ja d1 = 1 väärtused.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kuupmeetri suurune (0,1,0,0)
Peaaegu aja jooksul liigub karp A-st keskpunktini ja võtab ülejäänud aja B-ni.
Proovime sama üleminekut väärtustega t1 = 1 ja d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kuupmeetri suurune (1,0,0,0)
Esimese kolme sekundi jooksul ei liigu kasti palju ja hiljem hüppab see peaaegu keskpunkti ja hakkab B-suunas liikuma..
Nagu sa näed, d1 kontrollib A vahemaa & keskpunkt, ja t1 the A-aja keskpunktini jõudmiseks kulub aega.
Kasutagem d2 ja t2 nüüd. Mõlemad t1 ja d1 on 1 ja t2 = 1 ja d2 = 0.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kuupmeetri suurune (1,1,0,1)
Kast liigub 3 sekundi jooksul peaaegu pooleldi (tänu sellele t1 = 1, d1 = 1) ja mitte mingil ajal hüppab punktini B.
Viimane näide vahetab eelmised väärtused t2 ja d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kuupmeetri suurune (1,1,1,0)
Kast liigub 3 sekundi jooksul peaaegu pooleldi (tänu sellele t1 = 1, d1 = 1), siis veel kolm sekundit ei liigu palju enne punkti B hüppamist.
Need näited näitavad seda d2 ja t2 kontrollib kaugust ja kellaaega minna keskpunktist punktini B.
Kuigi te ilmselt ei vaja seda pikka (veel harva) selgitust kuupmeetri () praegu leian, et see aitab teil seda funktsiooni paremini mõista. Nüüd, kus põrgatab see kõik?
5. Bounce'i efekti lisamine Cubic-Bezieriga ()
The peamised parameetrid põrgutamise efektiks on vahemaad, d1 ja d2. A d1 väärtus vähem kui 1 võtab kasti punkti A taga enne B algust animatsiooni alguses.
A d2 väärtus rohkem kui 1 võtab kasti kaugemale punktist B enne naasmist animatsiooni lõpus B-le. Seega on edasi-tagasi põrgatamise efekt.
Lisan nüüd kuupmeetri () väärtused otse meie demole selle esimese asemel lineaarne väärtuse üleminek ja näete tulemusi.
#pinStarCenterChkBox: kontrollitud ~ .pinStarLeaf üleminek: teisendage 1s kuupmeetri suurust (.8, - .5, .2,1.4);
Siin on lõpptulemus, ainult CSS-i väljatõrjumise animatsioon, millel on tagasilöögiefekt:
Võrdluseks ja põrgatöö paremaks mõistmiseks on siin, kuidas kuupmeetri () animatsiooni väärtus käitub, kui seda rakendatakse meie näidiskastile:
