Reālie skaitļi aiz CSS atvieglošanas
Izveidojiet pielāgotu CSS cubic-bezier() laika funkciju, velkot divus kontrolpunktus, priekšskatiet to tiešraidē pret lineāro atsauci, pēc tam kopējiet gatavu vērtību.
Rezultāts
Šajā lapā tiek atvērts kubiskā bezizera ģenerators ar jau ielādētu x1=0,42, y1=0, x2=0,58, y2=1 — precīziem kontroles punktiem, līdz kuriem izvēršas CSS atvieglošanas ievadīšanas atslēgvārds. Velciet vai nu rokturi, vai rediģējiet skaitļus tieši, un līkne, animācijas priekšskatījums un kopējamā virkne nekavējoties tiek atjaunināti.
Ease-in-out ir viens no pieciem iebūvētajiem CSS laika noteikšanas atslēgvārdiem, un tas ir populārs tieši tāpēc, ka šī līkne viegli paātrina no sākuma, saglabā diezgan vienmērīgu tempu līdz vidum un atkāpjas pirms beigām — šī forma ir dabiska vairumam lietotāja interfeisa kustību. Redzot to kā skaidrus kontroles punktus, nevis atslēgvārda nosaukumu, kļūst skaidrs, kāpēc: y1 atrodas tuvu 0 un y2 atrodas tuvu 1, abi ir tuvu atbilstošajam x, tāpēc nav pārsniegšanas nevienā virzienā.
Izmantojiet šos četrus skaitļus kā sākumpunktu, nevis pašu atslēgvārdu ikreiz, kad nepieciešams nedaudz pamudināt sajūtu — pavelciet x1 uz leju, lai sāktu raitāk, vai nospiediet y2 virs 1, lai pārvērstu šo pašu formu maigā pārsniegumā. Katras izmaiņas nekavējoties atjaunina priekšskatījumu un kopējamo cubic-bezier() rindiņu.