Cubic Bezier ģenerators
Izveidojiet pielāgotu CSS cubic-bezier() laika funkciju, velkot divus kontrolpunktus, priekšskatiet to tiešraidē pret lineāru atsauci un pēc tam nokopējiet gatavo vērtību.
🔒 Pilnībā apstrādāts jūsu pārlūkprogrammā — nekas, ko jūs šeit ievadāt, nekad netiek augšupielādēts.
Rezultāts
Rakstīt cubic-bezier(x1, y1, x2, y2) ar roku un pārlādēt lapu, lai pārbaudītu sajūtu, ir lēns veids, kā pielāgot animāciju. Šis ģenerators noslēdz šo cilpu: velciet jebkuru kontrolpunkta turi uz līknes vai ievadiet precīzus skaitļus x1/y1/x2/y2 laukos, un līkne, kopējamā CSS virkne un tiešraides animācijas priekšskatījums atjaunojas ar katru izmaiņu — nav nepieciešams būvēšanas solis, nav pārlādēšanas.
Abas asis darbojas atšķirīgi ar nolūku. x1 un x2 paliek iespiesti starp 0 un 1, jo tieši to CSS specifikācija faktiski pieprasa no cubic-bezier() laika funkcijas — vērtība ārpus šī diapazona vienkārši nav derīga. y1 un y2 nav šāda ierobežojuma: velciet turi virs lodziņa augšas vai zem apakšas, un līkne pārsniedz savu sākumu vai beigas, kas ir tieši tas, kā no vienas plūdenuma līknes tiek veidoti atsperes un atsitiena stila efekti.
Redzēt skaitli nav tas pats, kas redzēt kustību, tāpēc priekšskatījums ciklā rāda divas identiskas bumbas blakus: viena kustas, izmantojot jūsu pielāgoto līkni, otra — vienkāršā konstantā lineārā tempā. Vērot to sacensību ir ātrākais veids, kā noteikt, vai plūdenuma līkne patiešām rada vēlamo sajūtu, pirms tā nonāk stila lapā. Sagatavju lapas — īstie skaitļi aiz CSS paša ease-in-out atslēgvārda, godīga pārsnieguma aproksimācija, ko daži dēvē par atsitienu, un Google publicētā Material Design standarta līkne — ir gatavi sākumpunkti, no kuriem varat vilkt tālāk, nevis sākt no tukšiem kontrolpunktiem.
Viss darbojas lokāli jūsu pārlūkprogrammā: nav augšupielādes, nav konta, nav servera pieprasījumu, un ģenerators turpina darboties bezsaistē, kad lapa ir ielādēta.