CSS3 animacija - „Fan-Out“ sukūrimas su „Bounce Effect“ naudojant „Bezier“ kreivę
Ar žinote, kad geometrinių transformacijų pridėta prie HTML elementų transformuotiCSS savybė, pvz., Skalė, pasviręs ir pasukamas, gali būti animuota? Jie gali būti animuoti naudojant perėjimas nuosavybė ir @keyframes animacija, bet dar vėlesnė yra tai, kad animuotus transformacijas galima įdėti į pjūvį, pridėjus šiek tiek atšokimo efektas, naudojant kubinis-bezier () laiko nustatymo funkcija.
Trumpai tariant, kubinis-bezier () (CSS) yra a laiko nustatymo funkcija perėjimams. Jame nurodomas perėjimo greitis, be kita ko, jis gali būti naudojamas sukurti animacinius efektus.
Šiame pranešime pirmiausia ketiname sukurti paprastą transformacijos animaciją mes vėliau Pridėti kubinis-bezier () laiko nustatymo funkcija. Baigę šią pamoką suprasite, kaip sukurti animaciją, kuri naudoja ir ventiliatorius, ir atšokimo efektas. Čia pateikiamas galutinis rezultatas (spustelėkite, jei norite pamatyti efektą).
Demo įkvėpė šis gražus Dribbble, kurį fotografavo Christopher Jones apie animacinį vietos žymeklį.
1. Lapų kūrimas
Vietos žymeklio forma sudaryta iš penkių (vadiname juos) lapų. Norėdami sukurti ovalo formos lapą, naudokime pasienio spindulys CSS nuosavybė. The pasienio spindulys vieno kampo yra sudarytas iš dviejų spindulių, horizontaliai ir vertikaliai, kaip parodyta žemiau.
The pasienio spindulys nuosavybė turi daug skirtingų sintaksų. Žymės formai naudosime sudėtingesnį:
pasienio spindulys: htl htr hbr hbl / vtl vtr vbr vbl;
Šioje sintaksėje horizontalūs ir vertikalūs spinduliai sugrupuoti; h & v reiškia horizontalius ir vertikalius spindulius, ir. \ t t, l, b & r reiškia viršutinį, kairįjį, apatinį ir dešinįjį kampą. Pavyzdžiui, vbl reiškia apatinį kairiojo kampo vertikalų spindulį.
Jei duosite tik viena vertė horizontalios arba vertikalios pusės atveju ši vertė bus nukopijuota į visus kitus horizontalius arba vertikalius spindulius naršyklėje.
Į sukurti vertikalią ovalo formą, išlaikyti horizontalius spindulius 50% visuose kampuose ir reguliuokite vertikalias, kol bus matoma norima forma. The horizontalios pusės naudos tik vieną vertę: 50%.
The vertikalūs spinduliai viršutiniame kairiajame ir viršutiniame dešiniajame kampe 30%, o apatiniame kairiajame ir apatiniame dešiniajame kampe bus naudojamas 70% vertė.
HTML
CSS
.pinStarLeaf plotis: 60px; aukštis: 120px; pasienio spindulys: 50% / 30% 30% 70% 70%; fono spalva: # B8F0F5;
2. Lapų dauginimas
Kadangi žymeklis išryškins penkis lapus, mes sukursime dar keturios lapo kopijos skirtingomis spalvomis ir absoliučiai pozicionuojant, kad juos būtų galima sukrauti vienas į kitą.
HTML
CSS
#pinStarWrapper plotis: 300px; aukštis: 300px; pozicija: santykinis; .pinStarLeaf plotis: 60px; aukštis: 120px; pozicija: absoliutus; pasienio spindulys: 50% / 30% 30% 70% 70%; kairėje: 0; dešinėje: 0; viršuje: 0; apačioje: 0; marža: auto; neskaidrumas: .5; .pinStarLeaf: n-ojo tipo (1) fono spalva: # B8F0F5; .pinStarLeaf: n-ojo tipo (2) fono spalva: # 9CF3DC; .pinStarLeaf: nth-of-type (3) fono spalva: # 94F3B0; .pinStarLeaf: nth-of-type (4) fono spalva: # D2F8A1; .pinStarLeaf: nth-of-type (5) fono spalva: # F3EDA2;
3. Paspaudus įvykį ir gerinant estetiką
Leiskite pridėkite žymės langelį su #pinStarCenterChkBox identifikatorius, skirtas užfiksuoti paspaudimo įvykį. Pažymėjus žymimąjį langelį, lapai išjungs (sukasi). Taip pat turime pridėti a baltas apskritimas su #pinStarCenter estetikos identifikatorius. Jis bus išdėstytas žymeklio viršuje ir bus centrinis vietos žymeklis.
HTML
Prieš pažymėdami žymės langelį ir baltą apskritimą, lapai:
CSS
Pirma, nustatome pagrindinius langelio stilius ir uždengimo ratą:
#pinStarCenter, #pinStarCenterChkBox plotis: 45px; aukštis: 50px; pozicija: absoliutus; kairėje: 0; dešinėje: 0; viršuje: -60px; apačioje: 0; marža: auto; fono spalva: #fff; pasienio spindulys: 50%; žymeklis: žymeklis; #pinStarCenter, .pinStarLeaf rodyklių įvykiai: nėra; #pinStarCenter> įvestis [type = "checkbox"] plotis: 100%; aukštis: 100%; žymeklis: žymeklis;
Kadangi kiekviena lapai sukasi palei z ašį skirtingais kampais, turime nustatyti transformuoti: rotatez (); turtą atitinkamai sukurti žvaigždės formą. Mes taip pat taikome perėjimas nuosavybė sukimosi efektui (tiksliau mes naudojame perėjimas: transformuoti 1s linijinį taisyklė lapams).
#pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf perėjimas: transformuoti 1s linijinį; #pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf: nth-of-type (5) transformuoti: rotatez (35deg); #pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf: nth-of-type (4) transformuoti: rotatez (105deg); #pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf: nth-of-type (3) transformuoti: rotatez (180deg); #pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf: nth-of-type (2) transformuoti: rotatez (255deg); #pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf: nth-of-type (1) transformuoti: rotatez (325deg);
Jei pažvelgsite į aukščiau pateiktą CSS, galite matyti iš #pinStarCenterChkBox: pažymėtas ~ bendrasis broliai ir seserys, kuriuos mes pridėjome tik perėjimas ir transformuoti savybės pažymėtas žymimasis laukelis (kai vartotojas spustelėjo žymeklį).
4. Rotacijos centro keitimas
Pagal nutylėjimą sukimosi centras yra išdėstytas pasukto elemento centre, mūsų atveju, lapų centre. Mes turime perkelti transformacijos centrą į vidinį lapų galą. Tai galime padaryti naudodami transformuoti CSS nuosavybė keičia transformuotų elementų padėtį.
Kad sukimosi efektas veiktų tinkamai, pridėkime dvi toliau nurodytas taisykles .pinStarLeaf CSS rinkmenos selektorius:
.pinStarLeaf transform-origin: 30px 30px; perėjimas: transformuoti 1s linijinį;
Pažiūrėkime, kaip veikia mūsų gerbėjų animacija - šiuo metu, dar nepadarius smūgio efekto. Paspauskite ant balto rato, esančio žymeklio viršuje.
Supratimas, kaip veikia ubic-Bezier ()
Dabar, norėdami pridėti atšokimo efektą, turime pakeisti linijinis laiko nustatymo funkcija kubinis-bezier () viduje konors perėjimas deklaracijas mūsų CSS faile.
Bet pirmiausia suprasime logika kubinis-bezier () laiko nustatymo funkcija kad galėtumėte lengvai suvokti atsipalaidavimo efektą.
Sintaksė kubinis-bezier () funkcija yra tokia, d ir t yra atstumas ir laikas, ir jų vertės paprastai svyruoja tarp 0 ir 1:
kubinio dydžio (t1, d1, t2, d2)
Nors paaiškina CSS kubinis-bezier () pagal atstumą ir laiką nėra tiksli, todėl daug lengviau tai suprasti.
Tarkime, yra langelis, perkeliantis iš taško A į B per 6 sekundes. Naudokime šiuos veiksmus kubinis-bezier () laiko nustatymo funkcija perėjimui su t1 = 0 ir d1 = 1 vertės.
/ * t1 = 0, d1 = 1, t2 = 0, d2 = 0 * / kubinio dydžio (0,1,0,0)
Beveik be laiko, langelis pereina nuo A iki vidurio taško, o likęs laikas pasiekia B.
Pabandykime tą patį perėjimą su vertybėmis t1 = 1 ir d1 = 0.
/ * t1 = 1, d1 = 0, t2 = 0, d2 = 0 * / kubinio dydžio (1,0,0,0)
Pirmąsias tris sekundes dėžutė neperkelia daug, o vėliau ji beveik šokinėja į vidurio tašką ir pradeda judėti link B.
Kaip matai, d1 valdo atstumas tarp A & viduryje, ir t1 laikas, per kurį pasiekiamas vidurio taškas nuo A.
Naudokime d2 ir t2 dabar. Abi t1 ir d1 bus 1, ir t2 = 1 ir d2 = 0.
/ * t1 = 1, d1 = 1, t2 = 0, d2 = 1 * / kubinio dydžio (1,1,0,1)
Dėžutė per 3 sekundes juda beveik pusiaukelėje (dėl t1 = 1, d1 = 1), ir jokiu metu jis nesikreipia į B tašką.
Paskutinis pavyzdys keičia ankstesnes t2 ir d2:
/ * t1 = 1, d1 = 1, t2 = 1, d2 = 0 * / kubinio dydžio (1,1,1,0)
Dėžutė per 3 sekundes juda beveik pusiaukelėje (dėl t1 = 1, d1 = 1), tada dar 3 sekundes nesikreipia daug prieš šokant į B tašką.
Šie pavyzdžiai rodo, kad d2 ir t2 valdyti atstumą ir laiką, į kurį reikia įdėti langelį pereiti nuo vidurio taško iki taško B.
Nors jums tikriausiai nereikėjo šio ilgo (bet reto) paaiškinimo kubinis-bezier () šiuo metu manau, kad tai padės jums geriau suprasti šią funkciją. Dabar, kur šokinėja visa tai?
5. Bounce efekto pridėjimas prie kubinio Bezierio ()
The pagrindiniai parametrai už atšokimo efektą yra atstumai, d1 ir d2. A d1 vertė mažiau nei 1 užima langelį už A taško prieš pradedant judėti į B animacijos pradžioje.
A d2 vertė daugiau kaip 1 užima langelį už B taško prieš sugrįždami į poilsio vietą B animacijos pabaigoje. Taigi, pirmyn ir atgal bounce efektas.
Dabar pridėsiu kubinis-bezier () vertina tiesiogiai mūsų demo vietoj pirmojo linijinis vertės perėjimas turtą ir parodykite rezultatus.
#pinStarCenterChkBox: pažymėtas ~ .pinStarLeaf perėjimas: transformuoti 1s kubinių-smulkmenų (.8, -. 5, .2,1,4);
Štai galutinis rezultatas - CSS tik ventiliatoriaus išjungimo animacija su atšokimo efektu:
Palyginimui ir geriau suprasti šuolio efektą, čia yra kaip kubinis-bezier () animacijos vertė elgiasi, kai ji taikoma mūsų pavyzdžio laukui:
