Cubic-bezier redaktor

Kuidas cubic-bezier redaktorit kasutada

1. Lohista graafikul kahte käepidet. P1 (esimene kontrollpunkt) kujundab liikumise algust, P2 lõppu. Aeg kulgeb vasakult paremale ja edenemine alt üles.
2. Või sisesta väärtus väljale cubic-bezier() väärtus: täielik cubic-bezier(0.4, 0, 0.2, 1), neli arvu või märksõna, näiteks ease-in-out. Väljad x1, y1, x2 ja y2 muudavad ühte koordinaati korraga.
3. Alusta menüüst Eelseaded (CSS-i märksõnad, sine kuni back perekonnad ja Material Designi kõverad) või märksõnanuppudest. Kui sinu kõver vastab eelseadele, kuvatakse selle nimi nuppude kõrval.
4. Vaata Animatsiooni eelvaadet: punkt kõveral Sinu kõver ja punkt kõveral linear läbivad sama vahemaa sama Kestuse jooksul. Kasuta nuppe Peata/Esita ja Alusta uuesti, et neid võrrelda.
5. Kopeeri tulemus väljalt CSS-i ajafunktsioon või kopeeri linear() lähendus ja vali selle Lõikude arv.

Klaviatuur: fookusta käepide ja kasuta nooleklahve, et liigutada seda 0,01 või Shiftiga 0,1 võrra.

Kui sinu süsteem on seatud liikumist vähendama, algab animatsioon peatatuna. Vajuta Esita, kui soovid selle ikkagi käivitada.

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Mida cubic-bezier() tähendab

CSS-i easing-funktsioon seab üleminekul möödunud aja (0 kuni 1) vastavusse selle edenemisega (0 kuni 1). cubic-bezier(x1, y1, x2, y2) kirjeldab seda vastavust kuupse Bézier’ kõveraga, mis algab punktist (0, 0), lõpeb punktis (1, 1) ja mida tõmbavad kaks kontrollpunkti, P1 = (x1, y1) ja P2 = (x2, y2).

• x väärtused on ajad ja peavad jääma vahemikku 0 kuni 1, vastasel juhul ei oleks funktsioon kehtiv ajakõver. Redaktor hoiab need vahemikus.
• y väärtused on edenemine ja võivad minna alla 0 või üle 1. Y üle 1 paneb animatsiooni eesmärgist üle ulatuma ja tagasi tulema, nagu Back kõverate puhul; alla 0 liigub see kõigepealt tagurpidi.
• Järsk tõus tähendab kiiret liikumist, lame tõus aeglast. ease-out algab kiiresti ja lõpeb aeglaselt, mis tundub loomulik ekraanile saabuvate elementide puhul. ease-in teeb vastupidist ja sobib lahkuvatele elementidele.

CSS-i märksõnad on otseteed: 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) ja linear = (0, 0, 1, 1).

linear() lähendus

Uuem funktsioon linear() loetleb edenemisväärtused ühtlaselt paigutatud ajahetkedel, näiteks linear(0, 0.25, 0.5, 0.75, 1), ja ühendab need sirgjoontega. Tööriist diskreteerib sinu kõvera (lahendab Bézier’ iga ajasammu jaoks) ja kirjutab need väärtused kolme kümnendkohaga. 20 kuni 40 lõiguga on tulemus visuaalselt kõveraga identne. linear() tegelik kasu on kõverate puhul, mida Bézier joonistada ei suuda, nagu põrked ja vedrud, kuid see võimaldab ka ühe süntaksi jagamist. See töötab Chrome’is ja Edge’is 113+, Firefoxis 112+ ning Safaris 17.2+, seega jäta cubic-bezier() väärtus varuvariandiks.