CSS-i üleminekute ja animatsioonide alused
Veebiarenduses määrab animatsiooni või ülemineku dünaamika ajastusfunktsioon (inglise keeles timing function). Kui muudate CSS-i abil elemendi asukohta, värvi või suurust, ei pea see muutus toimuma ühtlase kiirusega. Ajastusfunktsioon määrab, kuidas animatsiooni progress ajas jaotub, luues loomulikuma ja füüsikaseadustele vastava liikumise.
CSS-is kasutatakse ajastusfunktsioonide määramiseks omadusi transition-timing-function ja animation-timing-function. Neid saab kirjutada ka lühivormide (näiteks transition või animation) osana. Standardsete võtmesõnade nagu ease või linear taga peitub matemaatiline kuup-Bézier' kõver, mida väljendatakse funktsioonina cubic-bezier(x1, y1, x2, y2). CSS Cubic Bezier generaator võimaldab neid väärtusi visuaalselt luua ja kohandada.
Kuup-Bézier' kõvera matemaatiline põhimõte
Kuup-Bézier' kõver (inglise keeles cubic Bezier curve) on parameetriline kõver, mida kasutatakse arvutigraafikas ja animatsioonis sujuvate liikumiste kirjeldamiseks. CSS-is defineeritakse see kõver nelja punktiga, millest esimene ja viimane on fikseeritud:
- Alguspunkt P₀ asub alati koordinaatidel (0, 0), tähistades animatsiooni algust nii ajas kui ka progressis.
- Lõpp-punkt P₃ asub alati koordinaatidel (1, 1), tähistades animatsiooni lõppu.
Kõvera kuju ja sellest tulenevat kiiruse muutumist juhitakse kahe vahepealse juhtpunkti abil:
- Esimene juhtpunkt P₁ koordinaatidega (x1, y1).
- Teine juhtpunkt P₂ koordinaatidega (x2, y2).
Kõver kulgeb all-vasakult (algusest) ülal-paremale (lõppu). Horisontaalne telg (X) tähistab aja kulgemist vahemikus 0 kuni 1, kus 0 on animatsiooni algushetk ja 1 on lõpphetk. Vertikaalne telg (Y) tähistab animatsiooni progressi ehk sihtväärtuse saavutamist. Juhtpunktide asukoht määrab, kuidas kõver nendest punktidest mööda kulgeb, mõjutades otseselt animatsiooni kiirendust ja aeglustust.
Juhtpunktide reeglid ja piirangud
Kõvera korrektseks toimimiseks CSS-is kehtivad juhtpunktide koordinaatidele kindlad reeglid:
| Juhtpunkti koordinaat | Lubatud vahemik | Kirjeldus |
|---|---|---|
| Esimene juhtpunkt X (x1) | 0 ≤ x1 ≤ 1 | Määrab esimese juhtpunkti ajatelje asukoha. |
| Esimene juhtpunkt Y (y1) | -0.70 ≤ y1 ≤ 1.70 | Määrab esimese juhtpunkti progressi asukoha. |
| Teine juhtpunkt X (x2) | 0 ≤ x2 ≤ 1 | Määrab teise juhtpunkti ajatelje asukoha. |
| Teine juhtpunkt Y (y2) | -0.70 ≤ y2 ≤ 1.70 | Määrab teise juhtpunkti progressi asukoha. |
Aja kulgemine ei saa liikuda tagasisuunas, mistõttu on X-väärtused rangelt piiratud vahemikuga 0 kuni 1. Kui proovite sisestada väärtust väljaspool seda vahemikku – näiteks sisestate väljale "Esimene juhtpunkt" väärtuse 9 ja liigute väljalt ära (fookus kaob) –, korrigeerib tööriist selle automaatselt maksimaalseks lubatud väärtuseks ehk arvuks 1. Kui tühjendate numbrilise sisestusvälja täielikult ja kaotate fookuse, taastatakse väljal eelmine kehtiv väärtus. Mittetäielike või mittenumbriliste sisestuste korral ootab tööriist korrektse väärtuse sisestamist.
Juhtpunktide peenhäälestamiseks saab kasutada klaviatuuri: vajutades vasakut nooleklahvi ajal, mil juhtpunkti pide on fookuses, muutub selle väärtus väiksemaks (näiteks väärtuseni 0.99).
Ülehüpped ja tagasitõmbed animatsioonis
Erinevalt X-koordinaatidest võivad Y-koordinaatide väärtused ulatuda üle ülemise piiri (suurem kui 1) või alla alumise piiri (väiksem kui 0) vahemikus -0.70 kuni 1.70. See võimaldab luua erilisi animatsiooniefekte:
- Tagasitõmme (pull-back): Kui Y-väärtus on negatiivne (alla 0), liigub animatsioon alguses veidi tagasisuunas ehk algväärtusest allapoole, enne kui hakkab lõppväärtuse poole kiirendama. See tekitab liikumise ettevalmistamise või hoovõtu efekti.
- Ülehüpe (overshoot): Kui Y-väärtus on suurem kui 1, liigub animatsioon oma lõppväärtusest mööda (hüppab üle sihtmärgi) ja pöördub seejärel tagasi lõppväärtusele.
Seda efekti demonstreerib eelseadistus "Tagasi välja (Back Out)", mis määrab kuup-Bézier' funktsiooni väärtuseks cubic-bezier(0.34, 1.56, 0.64, 1). Kuna teise juhtpunkti Y-väärtus on 1.56, ületab element enne peatumist oma lõppasendi.
Keerukate animatsioonide piirangud
Kuigi üksik cubic-bezier() funktsioon on võimas tööriist sujuvate üleminekute loomiseks, on sellel matemaatilised piirangud. Üksik kuup-Bézier' kõver suudab teha küll eel- ja ülehüppeid, kuid see saab liikuda ainult ühes suunas ja seejärel lõpp-punktis peatuda.
See tähendab, et ühe cubic-bezier() funktsiooniga ei ole võimalik luua efekte, mis muudavad suunda mitu korda järjest, nagu näiteks:
- Põrkumine (bounce-efekt), kus element põrkab pinnalt mitu korda tagasi.
- Elastne võnkumine (elastic-efekt), kus element võngub ümber lõpp-punkti edasi-tagasi.
Selliste korduvate suunamuutustega efektide saavutamiseks tuleb kasutada CSS-i @keyframes reegleid või mitme peatusega linear() ajastusfunktsiooni.
Privaatsus ja andmetöötlus
CSS Cubic Bezier generaator töötab täielikult kliendipoolselt. Kõver joonistatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse, mis tagab, et teie sisestatud andmed ja loodud kõverad ei lahku teie seadmest.
Korduma kippuvad küsimused
Mida tähendavad kaks pidet ja neli numbrit?
Kõver kulgeb all-vasakult (algusest) ülal-paremale (lõppu), kus aeg liigub vasakult paremale ja progress alt üles. Kaks pidet on juhtpunktid, mis seda painutavad – mõlemal on X ja Y, moodustades koos cubic-bezier(x1, y1, x2, y2). X jääb vahemikku 0 kuni 1, samas kui Y võib minna ülemisest piirist kõrgemale või alumisest madalamale, et tekitada liikumise ülehüpe või tagasitõmme enne kohalejõudmist.
Kuidas kasutada väärtust oma CSS-is?
Kopeerige cubic-bezier() ja asetage see mistahes kohta, kuhu sobib ajastusfunktsioon — transition-timing-function, animation-timing-function või lühivorm, nt transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Võtmesõnad ease, ease-in, ease-out ja ease-in-out on lihtsalt fikseeritud cubic-bezier kõverad, seega nende eelseadistuste valimine näitab teile täpset väärtust võtmesõna taga.
Kas sellega saab luua põrkumise või elastse efekti?
Mitte iseseisvalt. Üksik cubic-bezier suudab teha eel- ja ülehüppeid – „back“ eelseadistused tõmbavad ühe pideme kastist välja just selle saavutamiseks –, kuid see saab liikuda ainult ühes suunas ja seejärel peatuda. Põrkumise (bounce) ja elastse efekti puhul muutub suund mitu korda, mida ükski cubic-bezier ei suuda väljendada; nende jaoks on vaja CSS keyframes-kaadreid või paljude peatustega linear() funktsiooni.