Cubic-bezier redaktors

Kā lietot cubic-bezier redaktoru

1. Velciet abus turus grafikā. P1 (pirmais kontrolpunkts) veido kustības sākumu, P2 – beigas. Laiks iet no kreisās uz labo, bet progress no apakšas uz augšu.
2. Vai ierakstiet vērtību laukā cubic-bezier() vērtība: pilnu cubic-bezier(0.4, 0, 0.2, 1), četrus skaitļus vai atslēgvārdu, piemēram, ease-in-out. Lauki x1, y1, x2 un y2 rediģē vienu koordinātu vienlaikus.
3. Sāciet ar izvēlni Sagataves (CSS atslēgvārdi, ģimenes no sine līdz back un Material Design līknes) vai atslēgvārdu pogām. Kad jūsu līkne sakrīt ar sagatavi, tās nosaukums parādās blakus pogām.
4. Vērojiet Animācijas priekšskatījums: punkts uz Jūsu līkne un punkts uz linear veic vienādu attālumu vienā Ilgums. Izmantojiet Pauze/Atskaņot un Sākt no jauna, lai tos salīdzinātu.
5. Nokopējiet rezultātu no CSS laika funkcija vai nokopējiet linear() tuvinājums un izvēlieties Segmenti skaitu.

Tastatūra: fokusējiet turi un ar bulttaustiņiem pārvietojiet to par 0,01 vai ar Shift par 0,1.

Ja jūsu sistēma ir iestatīta uz samazinātu kustību, animācija sākas apturēta. Nospiediet Atskaņot, ja vēlaties to tomēr palaist.

Ko nozīmē cubic-bezier()

CSS easing funkcija pārveido pārejas pagājušo laiku (no 0 līdz 1) tās progresā (no 0 līdz 1). cubic-bezier(x1, y1, x2, y2) apraksta šo atbilstību ar kubisko Bezjē (Bézier) līkni, kas sākas punktā (0, 0), beidzas punktā (1, 1) un tiek vilkta ar diviem kontrolpunktiem – P1 = (x1, y1) un P2 = (x2, y2).

• x vērtības ir laiks un tām jāpaliek starp 0 un 1, citādi funkcija nebūtu derīga laika līkne. Redaktors tās notur diapazonā.
• y vērtības ir progress, un tās var būt zem 0 vai virs 1. y virs 1 liek animācijai pārsniegt mērķi un atgriezties, kā Back līknēm; zem 0 tā vispirms kustas atpakaļ.
• Stāvs slīpums nozīmē ātru kustību, plakans – lēnu. ease-out sākas ātri un beidzas lēni, kas šķiet dabiski elementiem, kas ienāk ekrānā. ease-in dara pretējo un der elementiem, kas to atstāj.

CSS atslēgvārdi ir saīsnes: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) un linear = (0, 0, 1, 1).

linear() tuvinājums

Jaunākā funkcija linear() uzskaita progresa vērtības vienādos laika intervālos, piemēram, linear(0, 0.25, 0.5, 0.75, 1), un savieno tās ar taisnām līnijām. Rīks paraugo jūsu līkni (katram laika solim atrisina Bezjē vienādojumu) un raksta šīs vērtības ar trim cipariem aiz komata. Ar 20 līdz 40 segmentiem rezultāts vizuāli ir identisks līknei. Īstais linear() ieguvums ir līknēm, ko Bezjē nevar uzzīmēt, piemēram, atlēcieniem un atsperēm, taču tā ļauj arī koplietot vienu sintaksi. Tā darbojas Chrome un Edge 113+, Firefox 112+ un Safari 17.2+, tāpēc kā rezerves variantu saglabājiet cubic-bezier() vērtību.