Cubic-bezier redaktorius

Kaip naudotis cubic-bezier redaktoriumi

1. Tempk dvi grafiko rankenėles. P1 (pirmas valdymo taškas) formuoja judesio pradžią, P2 – pabaigą. Laikas eina iš kairės į dešinę, o pažanga iš apačios į viršų.
2. Arba įrašyk reikšmę į cubic-bezier() reikšmė: pilną cubic-bezier(0.4, 0, 0.2, 1), keturis skaičius arba raktažodį, pvz., ease-in-out. Laukeliai x1, y1, x2 ir y2 redaguoja po vieną koordinatę.
3. Pradėk nuo meniu Šablonai (CSS raktažodžiai, šeimos nuo sine iki back ir „Material Design“ kreivės) arba raktažodžių mygtukų. Kai tavo kreivė sutampa su šablonu, jo pavadinimas rodomas šalia mygtukų.
4. Stebėk Animacijos peržiūra: taškas ties Tavo kreivė ir taškas ties linear nukeliauja tą patį atstumą per tą pačią Trukmė. Naudok Pristabdyti / Paleisti ir Pradėti iš naujo, kad palygintum.
5. Nukopijuok rezultatą iš CSS laiko funkcija arba nukopijuok linear() aproksimacija ir pasirink jos Segmentai skaičių.

Klaviatūra: pasirink rankenėlę ir rodyklių klavišais perkelk ją po 0,01 arba po 0,1 su Shift.

Jei tavo sistema nustatyta sumažinti judesį, animacija prasideda pristabdyta. Paspausk Paleisti, jei vis tiek nori ją paleisti.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Ką reiškia cubic-bezier()

CSS easing funkcija susieja praėjusį perėjimo laiką (nuo 0 iki 1) su jo pažanga (nuo 0 iki 1). cubic-bezier(x1, y1, x2, y2) šį susiejimą aprašo kubine Bézier kreive, kuri prasideda (0, 0), baigiasi (1, 1) ir yra patraukiama dviejų valdymo taškų, P1 = (x1, y1) ir P2 = (x2, y2).

• x reikšmės yra laikas ir turi likti tarp 0 ir 1, kitaip funkcija nebūtų galiojanti laiko kreivė. Redaktorius jas laiko ribose.
• y reikšmės yra pažanga ir gali būti žemiau 0 arba virš 1. y virš 1 priverčia animaciją perlenkti tikslą ir grįžti, kaip Back kreivės; žemiau 0 ji pirmiausia juda atgal.
• Status nuolydis reiškia greitą judesį, plokščias – lėtą. ease-out prasideda greitai ir baigiasi lėtai, o tai atrodo natūralu elementams, įeinantiems į ekraną. ease-in daro priešingai ir tinka išeinantiems elementams.

CSS raktažodžiai yra trumpiniai: 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) ir linear = (0, 0, 1, 1).

linear() aproksimacija

Naujesnė linear() funkcija išvardija pažangos reikšmes tolygiai išdėstytais laiko momentais, pavyzdžiui, linear(0, 0.25, 0.5, 0.75, 1), ir sujungia jas tiesiomis atkarpomis. Įrankis paima tavo kreivės mėginius (kiekvienam laiko žingsniui išsprendžia Bézier lygtį) ir užrašo tas reikšmes trimis ženklais po kablelio. Su 20–40 segmentų rezultatas vizualiai nesiskiria nuo kreivės. Tikroji linear() nauda yra kreivėms, kurių Bézier nepiešia, pvz., atšokimams ir spyruoklėms, bet ji taip pat leidžia dalytis viena sintakse. Veikia „Chrome“ ir „Edge“ 113+, „Firefox“ 112+ ir „Safari“ 17.2+, todėl cubic-bezier() reikšmę pasilik kaip atsarginę.