Generator CSS cubic-bezier

Kaj je to orodje?

cubic-bezier() je funkcija časovnega poteka v CSS, ki nadzoruje, kako animirana ali prehajajoča vrednost pospešuje in upočasnjuje skozi čas, namesto da se giblje s konstantno hitrostjo. Določata jo dve kontrolni točki — (x1, y1) in (x2, y2) — ki upogneta krivuljo med fiksno začetno točko (0,0) in končno točko (1,1). Vrednosti x morajo ostati med 0 in 1, vrednosti y pa lahko presežejo ta razpon in ustvarijo učinke prehitevanja ali odboja.

Ročno je nastavljanje štirih decimalnih številk za občutek, ki ni niti preveč sunkovit niti premehak, veliko poskusov in napak. To orodje to ugibanje nadomesti z neposrednim upravljanjem: povleci drsnik, opazuj, kako se krivulja upogne in predogledna krogla premika, ter kopiraj CSS, ko gibanje deluje pravilno.

Vir: CSS Easing Functions Level 1, W3C — specifikacija, ki definira cubic-bezier() in pet imenovanih ključnih besed, na katerih temeljijo predloge tega orodja.

Zakaj ga uporabiti?

• Živ graf SVG natančno prikaže, kako se tvoja krivulja upogne med fiksno začetno in končno točko, z narisanima obema kontrolnima točkama in njunima ročajema za jasnost.
• Gumb za predvajanje animira predogledni element čez progo z uporabo tvoje natančne krivulje, tako da gibanje začutiš, ne le vidiš statičen graf.
• Predloge z enim klikom za pet standardnih imenovanih funkcij pojemanja — ease, ease-in, ease-out, ease-in-out in linear — kot so dokumentirane v specifikaciji CSS Easing Functions.
• Vrednosti y lahko gredo pod 0 ali nad 1, kar ti omogoča ustvarjanje pojemanj v slogu prehitevanja/odboja, ki jih imenovane ključne besede ne morejo doseči.
• Ustvari pripravljen za lepljenje CSS transition-timing-function — ista vrednost deluje tudi za animation-timing-function.
• Deluje v celoti v tvojem brskalniku — nič od tega, kar konfiguriraš, se nikamor ne naloži. Brezplačno, brez prijave.

Kako ga uporabljati

1. Povleci drsnika x1/y1, da nastaviš prvo kontrolno točko, ki oblikuje začetek animacije.
2. Povleci drsnika x2/y2, da nastaviš drugo kontrolno točko, ki oblikuje konec animacije.
3. Opazuj črno krivuljo na grafu — krivulja, ki se na začetku izboči nad diagonalo, pomeni, da se gibanje začne hitro, tista, ki ostane pod njo, pa pomeni, da se začne počasi.
4. Klikni Predvajaj, da vidiš, kako se predogledni element premakne po progi z uporabo tvoje krivulje kot transition-timing-function.
5. Preizkusi predlogo (ease, ease-in, ease-out, ease-in-out, linear) kot izhodišče, nato od tam premikaj drsnike.
6. Kopiraj ustvarjen CSS in ga prilepi v pravilo transition ali animation.

Primer

Vnos

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Rezultat

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

To je standardna ključna beseda CSS ease, izpisana kot eksplicitne kontrolne točke — hiter začetek, oster pospešek, nato postopno upočasnjevanje proti koncu.

Zakaj lahko vrednosti y presežejo 0–1

Za razliko od osi x, ki predstavlja čas in mora teči od 0 do 1, os y predstavlja napredek animirane vrednosti in nima take omejitve. Nastavitev y1 pod 0 ali y2 nad 1 povzroči, da krivulja pade pod začetno vrednost ali strelja mimo končne vrednosti, preden se ustali — osnova učinkov prehitevanja in pričakovanja, ki se uporabljajo pri pritiskih gumbov, prikazih modalnih oken in igrivih mikrointerakcijah vmesnika. Nobena od petih imenovanih ključnih besed (ease, ease-in, ease-out, ease-in-out, linear) tega ne zmore; za to potrebuješ prilagojen cubic-bezier().

transition-timing-function proti animation-timing-function

Vrednost cubic-bezier(), ki jo to orodje ustvari, deluje identično v obeh lastnostih. Uporabi transition-timing-function, kadar je gibanje sproženo s spremembo stanja (kot je lebdenje ali preklop razreda), in animation-timing-function znotraj pravila animacije, gnanega z @keyframes, kadar potrebuješ enak občutek pojemanja, uporabljen samodejno ali v zanki.

Pogosti vzorci pojemanja

• Odziven vmesnik (gumbi, stikala): obdrži kontrolne točke blizu diagonale z rahlim nagibom ease-out, npr. cubic-bezier(0.4, 0, 0.2, 1).
• Standardna krivulja Material Design: cubic-bezier(0.4, 0, 0.2, 1) — hiter začetek, blag zaključek, pogosto uporabljena za prehode panelov in kartic.
• Odboj/prehitevanje: potisni y2 nad 1, npr. cubic-bezier(0.34, 1.56, 0.64, 1), za igriv učinek pojava.
• Pričakovanje pred gibanjem: potisni y1 pod 0, tako da se element rahlo umakne nazaj, preden se premakne naprej.
• Gladek ease-in-out za animacije v zanki: obdrži krivuljo blizu simetrične okoli sredine.

Kombiniranje z drugimi CSS orodji

Krivulja pojemanja redko stoji sama — običajno se uporabi na elementu, ki potrebuje tudi definirane sence, zaobljene kote ali gradiente. Ustvari vizualno oblikovanje z drugimi CSS orodji spodaj, nato pa iz tega orodja dodaj časovno funkcijo v isto pravilo ali deklaracijo transition/animation.

→ Generator box-shadow · Generator border-radius

Pogosta vprašanja