Kubiskais Bezier ģenerators

Ar roku ierakstot cubic-bezier(x1, y1, x2, y2) un atkārtoti ielādējot lapu, lai pārbaudītu darbību, ir lēns veids, kā pielāgot animāciju. Šis ģenerators aizver šo cilpu: velciet vai nu kontrolpunkta turi uz līknes, vai ierakstiet precīzus skaitļus laukos x1/y1/x2/y2, un līkne, kopējamā CSS virkne un tiešraides animācijas priekšskatījums tiek atjaunināti pēc katras izmaiņas — bez izveides posma, bez atkārtotas ielādes.

Abas asis ar nolūku darbojas atšķirīgi. x1 un x2 paliek fiksēti starp 0 un 1, jo tas ir tas, ko CSS specifikācija faktiski pieprasa laika funkcijai cubic-bezier () — vērtība ārpus šī diapazona ir vienkārši nederīga. y1 un y2 nav šāda ierobežojuma: velciet rokturi virs lodziņa augšdaļas vai zem apakšas, un līkne pārsniegs tā sākumu vai beigas, kas ir tieši tā, kā atsperes un atlēciena stila efekti tiek veidoti no vienas atvieglošanas līknes.

Skaitļa redzēšana nav tas pats, kas kustības redzēšana, tāpēc priekšskatījumā cilpā blakus tiek rādītas divas identiskas bumbiņas: viena kustas, izmantojot jūsu pielāgoto līkni, bet otra kustas vienkāršā nemainīgā lineārā tempā. Vērojot viņu sacīkstes, ir ātrākais veids, kā noteikt, vai slīdošā līkne patiešām rada vēlamo sajūtu, pirms tā sasniedz stila lapu. Iepriekš iestatītās lapas — reālie skaitļi, kas ir aiz CSS vienkāršības atslēgvārda, godīgs pārsnieguma tuvinājums, ko daži sauc par atlēcienu, un Google publicētā Materiālu dizaina standarta līkne — ir gatavi sākumpunkti, no kuriem varat vilkt, nevis tukši kontrolpunkti.

Viss darbojas lokāli jūsu pārlūkprogrammā: nav augšupielādes, nav konta, nav servera turp un atpakaļ, un ģenerators turpina strādāt bezsaistē, tiklīdz lapa ir ielādēta.