Kuidas luua kohandatud cubic-bezier leevenemiskõverat CSS-i jaoks?

Lohista graafikul kahte kontrollpunkti käepidet, sisesta täpsed x1, y1, x2, y2 väärtused või vali eelseadistus. Seejärel vali Väljundi vorming alt CSS ja klõpsa Kopeeri, et saada cubic-bezier() väärtus transition-timing-function jaoks.

Kuidas teha cubic-bezier'ga põrke- või ülelöögi efekti?

Lohista käepide kasti kohale või alla, nii et selle Y väärtus ületab vahemikku 0-1. Y võib seda vahemikku ületada, samas kui X jääb 0 ja 1 vahele. Eelseadistused back-out ja anticipate on valmis ülelöögi lähtepunktid.

Kas ma saan leevenemise Tailwindi, Framer Motioni või anime.js jaoks?

Jah. Väljundi vormingu sakid on CSS, Tailwind, Framer Motion ja anime.js. Kõik vormindavad samu nelja numbrit, seega vali sakk ja klõpsa Kopeeri, et lõik lõikelauale panna.

Kuidas laadida olemasolevat cubic-bezier väärtust selle muutmiseks?

Kleebi väärtus nagu cubic-bezier(.17, .67, .83, .67) impordikasti ja klõpsa Laadi. Kui nelja numbrit ei õnnestu lugeda, kuvatakse veateade. Kõver salvestatakse ka lehe URL-i pärast räsimärki, nii et seda saab jagada.

Miks tundub eelvaade aeglasem kui minu tegelikud üleminekud?

Liikumise eelvaade kasutab Kestus seadistust, mida saad muuta, ja vaikeseaded on aeglasemad, et saaksid kõverat uurida. Lühenda Kestust, seejärel kasuta uuesti esitamist, et näha liikumist kiirusel, millega plaanid avaldada.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

📈

CSS kuup-Bézier'i leevenemise generaator tasuta

Kujunda CSS-i leevenemiskõveraid, lohistades juhtpunkte, vaata liikumist reaalajas ja kopeeri cubic-bezier() väärtus. Sisaldab üle/põrge eelseadistusi.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

Lohista teal- ja roosa käepidet kõvera kujundamiseks

Juhtpunktid

x1y1x2y2

Liikumise eelvaade

Kestus1,6 s

Laiuse üleminek

CSS-väärtus

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Eseaded

Roosa ja teal käepide võivad tõusta kasti kohale või alla (Y väljaspool vahemikku 0–1), luues ülekülastamise / põrkumise efekte nagu back-out ja anticipate. X jääb vahemikku 0–1 (aeg ei saa tagasi liikuda).

Levinud kasutusviisid

Kohandatud CSS ülemineku leevitusKujundage loomulikku tunnetust leevitust hõljumiste, menüüde ja kasutajaliidese üleminekute jaoks.
Jahu ja ülekornimise animatsioonidLooge lõbus kevad/põrkimis liikumine juhtmete kontrollpunktide väljapoole kasti.
Leevitus @keyframes animatsioonideleValige õige animatsiooni ajalise funktsioon CSS võtmkaadri animatsioonide jaoks.
Leevitus väärtused JS animatsiooniteekideleSaage kuuplikes Bézier väärtused GSAP, Framer Motion, anime.js ja palju muud.
Mõistetavus, kuidas leevitus töötabVaadake seost Bézier kõvera ja liikumise vahel, mille see tekitab.

Kuidas see töötab

Redaktor on ehitatud täielikult brauseris, kasutades React'i olekut ja SVG-d — kõveramatemaatikat ei halda ükski teek. Kaks lohistatavat juhtpunkti defineerivad SVG kuubilise Bezier tee ja brauseri enda CSS-animatsioonimootor käivitab liikumise eelvaate, süstides saadud cubic-bezier() väärtuse otse @keyframes reeglisse.

1
Lohista või kirjuta juhtpunktid
Kaks käepidet (P1 meretursiiniline, P2 roosa) asuvad SVG lõuendil. Lohistamine kasutab Pointer Events API-t koos setPointerCapture'iga, nii et käepide jälgib sinu sõrme või kursorit isegi väljaspool SVG piiri. Samuti saad käepidemeid nooleklahvidega nihutada või kirjutada täpseid väärtusi x1/y1/x2/y2 numbrisisenditesse.
2
SVG joonistab kõvera reaalajas
Kõver on üksik SVG <path> element, mille C (kuubilise Bezieri) käsklust arvutatakse uuesti nelja juhtpunkti koordinaadist igal olekuuuendusel. Lõuendit, välist teeki pole — brauseri enda SVG-renderdaja joonistab tee otse.
3
Brauseri CSS-mootor eelvaatab kergendust
Kolm reaalajas animatsiooni (liikuv täpp, laiuse üleminek ja skaala) käivitavad CSS @keyframes'i, kus cubic-bezier() väärtus on reasisese süstitud. Brauseri enda animatsioonimootor tõlgendab kõverat, nii et see, mida näed, on täpselt see, mida su tootmise CSS toodab.
4
Kopeeri fragment oma raamistiku süntaksis
Vahekaardid vormindavad samad neli numbrit CSS transition-timing-function'ina, Tailwindi suvaväärtuse klassina, Framer Motioni ease-massiivina või anime.js kergendusstringina. Fragment kirjutatakse lõikelauale navigator.clipboard'iga. Kõver kodeeritakse ka URL-hašis (#b=x1,y1,x2,y2), et saaksid seda jagada või järjehoidjatesse lisada.