Kubični Bezierjev generator
Oblikujte časovno funkcijo CSS cubic-bezier() po meri tako, da povlečete dve kontrolni točki, jo predogledate v živo glede na linearno referenco in nato kopirate pripravljeno vrednost.
Rezultat
Ročno vnašanje cubic-bezier(x1, y1, x2, y2) in ponovno nalaganje strani, da preverite občutek, je počasen način prilagajanja animacije. Ta generator sklene to zanko: povlecite ročaj kontrolne točke na krivuljo ali vnesite natančne številke v polja x1/y1/x2/y2 in krivulja, niz CSS, ki ga je mogoče kopirati, in predogled animacije v živo se posodobijo ob vsaki spremembi – brez gradbenega koraka, brez ponovnega nalaganja.
Obe osi namenoma delujeta različno. x1 in x2 ostaneta vpeta med 0 in 1, ker to dejansko zahteva specifikacija CSS za časovno funkcijo cubic-bezier() – vrednost zunaj tega obsega je preprosto neveljavna. y1 in y2 nimata te omejitve: povlecite ročico nad vrh polja ali pod dno in krivulja preseže svoj začetek ali konec, kar je natanko način, kako so učinki vzmeti in odboja zgrajeni iz ene same krivulje popuščanja.
Videti številko ni isto kot videti gibanje, zato predogled požene dve enaki žogi eno poleg druge v zanki: ena se premika po vaši prilagojeni krivulji, druga pa se premika z navadnim konstantnim linearnim tempom. Gledanje njihove dirke je najhitrejši način, da ugotovite, ali krivulja popuščanja dejansko ustvarja občutek, ki ga želite, preden sploh doseže slogovno tabelo. Prednastavljene strani – resnične številke za CSS-jevo lastno ključno besedo za lažji vstop, pošten približek prekoračitve, ki ga nekateri imenujejo odboj, in Googlova objavljena standardna krivulja Material Design – so pripravljene izhodiščne točke, iz katerih lahko povlečete, namesto praznih kontrolnih točk.
Vse se izvaja lokalno v vašem brskalniku: brez nalaganja, brez računa, brez povratnega obiska strežnika in generator še naprej deluje brez povezave, ko se stran naloži.