Kubni Bezierov generator
Dizajnirajte prilagođenu CSS cubic-bezier() funkciju mjerenja vremena povlačenjem dviju kontrolnih točaka, pregledajte je uživo u odnosu na linearnu referencu, zatim kopirajte gotovu vrijednost.
Rezultat
Ručno upisivanje cubic-bezier(x1, y1, x2, y2) i ponovno učitavanje stranice radi provjere dojma spor je način podešavanja animacije. Ovaj generator zatvara tu petlju: povucite ili ručku kontrolne točke na krivulji ili upišite točne brojeve u polja x1/y1/x2/y2, a krivulja, CSS niz koji se može kopirati i pregled animacije uživo ažuriraju se pri svakoj promjeni — nema koraka izgradnje, nema ponovnog učitavanja.
Dvije osi namjerno rade drugačije. x1 i x2 ostaju ograničeni između 0 i 1, jer je to ono što CSS specifikacija zapravo zahtijeva od cubic-bezier() vremenske funkcije — vrijednost izvan tog raspona jednostavno je nevažeća. y1 i y2 nemaju takvo ograničenje: povucite ručku iznad vrha kutije ili ispod dna, a krivulja prelazi svoj početak ili kraj, što je upravo način na koji se efekti opruge i odbijanja grade od jedne krivulje popuštanja.
Vidjeti broj nije isto što i vidjeti kretanje, tako da pregled pokreće dvije identične lopte jednu pored druge u petlji: jedna se kreće koristeći vašu prilagođenu krivulju, druga se kreće običnom konstantnom linearnom brzinom. Gledanje njihove utrke najbrži je način da saznate proizvodi li krivulja popuštanja doista osjećaj koji želite, prije nego što ikada dosegne tablicu stilova. Unaprijed postavljene stranice — stvarni brojevi koji stoje iza CSS-ove vlastite ključne riječi za jednostavno ulazak, iskrena aproksimacija prekoračenja koju neki nazivaju odskakanjem i Googleova objavljena standardna krivulja Material Designa — spremne su početne točke s kojih možete povlačiti, a ne prazne kontrolne točke.
Sve radi lokalno u vašem pregledniku: nema prijenosa, nema računa, nema povratnog putovanja poslužitelja, a generator nastavlja raditi izvan mreže nakon što se stranica učita.