CSS Cubic-Bezier Generaator

See tööriist võimaldab kujundada kohandatud CSS cubic-bezier() sujuvuskõvera nelja liuguriga ja vaadata seda enne koodi kopeerimist elavalt. Kohanda x1, y1, x2 ja y2 juhtpunkti väärtusi, jälgi, kuidas kõver ja liikuv eelvaate element kohe uuenevad, ning kopeeri seejärel transition-timing-function: cubic-bezier(...) otse oma stiililehele.

Mis see tööriist on?

cubic-bezier() on CSS ajastusfunktsioon, mis juhib, kuidas animeeritud või üleminekuga muudetav väärtus aja jooksul kiireneb ja aeglustub, mitte ei liigu konstantse kiirusega. Selle defineerivad kaks juhtpunkti — (x1, y1) ja (x2, y2) —, mis painutavad kõverat fikseeritud algpunkti (0,0) ja lõpp-punkti (1,1) vahel. x väärtused peavad jääma 0 ja 1 vahele, kuid y väärtused võivad sellest vahemikust välja minna, et luua ületulistamise või põrke efekte.

Käsitsi kirjutades võtab nelja kümnendarvu häälestamine tunde, mis pole liiga järsk ega liiga pehme, palju katsetamist. See tööriist asendab selle arvamise otsese manipuleerimisega: lohista liugurit, jälgi, kuidas kõver painutub ja eelvaate pall vastavalt liigub, ning kopeeri CSS, kui liikumine tundub õige.

Allikas: CSS Easing Functions Level 1, W3C — spetsifikatsioon, mis defineerib cubic-bezier'i ja viis nimega märksõna, millel selle tööriista eelseadistused põhinevad.

Miks seda kasutada?

Elav SVG graafik näitab täpselt, kuidas su kõver fikseeritud algus- ja lõpp-punkti vahel painutub, koos mõlema juhtpunkti ja nende käepidemetega selguse mõttes.
Esita-nupp animeerib eelvaate elemendi üle raja täpselt sinu kõveraga, nii et tunnetad liikumist, mitte ei näe ainult staatilist graafikut.
Ühe klõpsuga eelseadistused viie standardse nimega sujuvusfunktsiooni jaoks — ease, ease-in, ease-out, ease-in-out ja linear —, nagu dokumenteeritud CSS Easing Functions spetsifikatsioonis.
Y-väärtused võivad minna alla 0 või üle 1, võimaldades luua ületulistamise/põrke-stiilis sujuvusi, mida nimega märksõnad ei suuda toota.
Väljastab kopeerimiseks valmis transition-timing-function CSS-i — sama väärtus töötab ka animation-timing-function jaoks.
Töötab täielikult su brauseris — midagi, mida seadistad, ei laadita kuhugi üles. Tasuta, registreerimist pole vaja.

Kuidas kasutada

Lohista x1/y1 liugureid, et seada esimene juhtpunkt, mis kujundab, kuidas animatsioon algab.
Lohista x2/y2 liugureid, et seada teine juhtpunkt, mis kujundab, kuidas animatsioon lõpeb.
Jälgi musta kõverat graafikul — kõver, mis paisub diagonaalist alguses üle, tähendab, et liikumine algab kiiresti, kõver, mis jääb sellest allapoole, tähendab, et liikumine algab aeglaselt.
Klõpsa Esita, et näha eelvaate elementi liikumas üle raja, kasutades su kõverat kui transition-timing-function.
Proovi eelseadistust (ease, ease-in, ease-out, ease-in-out, linear) lähtepunktina ja nihuta seejärel liuguritest sealt edasi.
Kopeeri genereeritud CSS ja kleebi see transition- või animation-reeglisse.

Näide

Sisend

x1: 0,25, y1: 0,1, x2: 0,25, y2: 1

Tulemus

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

See on standardne CSS ease märksõna välja kirjutatud selgete juhtpunktidena — kiire algus, terav kiirenemine, seejärel järkjärguline aeglustumine lõpu poole.

Miks võivad y-väärtused ületada 0–1

Erinevalt x-teljest, mis esindab aega ja peab jooksma 0-st 1-ni, esindab y-telg animeeritud väärtuse edenemist ega oma sellist piirangut. y1 alla 0 või y2 üle 1 seadmine paneb kõvera algväärtuse alla kukkuma või lõppväärtusest üle laskuma enne stabiliseerumist — ületulistamise ja ootuse efektide alus, mida kasutatakse nupuvajutuses, modaalakna ilmumises ja mänguliste kasutajaliidese mikro-interaktsioonide juures. Ükski viiest nimega märksõnast (ease, ease-in, ease-out, ease-in-out, linear) ei suuda seda toota; selleks on vaja kohandatud cubic-bezier()-i.

transition-timing-function vs. animation-timing-function

See tööriista genereeritud cubic-bezier() väärtus töötab identselt mõlemas omaduses. Kasuta transition-timing-function'it, kui liikumise käivitab olekumuutus (näiteks hõljumine või klassivahetus), ja animation-timing-function'it @keyframes-põhises animatsioonireeglis, kui vajad sama sujuvustunnet automaatselt või tsükliliselt rakendatuna.

Levinud sujuvusmustrid

Kiire kasutajaliidese tagasiside (nupud, lülitid): hoia juhtpunktid diagonaali lähedal kerge ease-out kaldega, nt cubic-bezier(0.4, 0, 0.2, 1).
Material Design'i standardne kõver: cubic-bezier(0.4, 0, 0.2, 1) — kiire algus, õrn lõpp, laialt kasutusel paneelide ja kaartide üleminekutes.
Põrge/ületulistamine: tõsta y2 üle 1, nt cubic-bezier(0.34, 1.56, 0.64, 1), mänguliku ilmumistunde jaoks.
Ootus enne liikumist: tõsta y1 alla 0, et element tõmbuks veidi tagasi enne edasi liikumist.
Sujuv ease-in-out korduvate animatsioonide jaoks: hoia kõver keskme suhtes ligilähedaselt sümmeetriline.

Paaris teiste CSS tööriistadega

Sujuvuskõver esineb harva üksinda — seda rakendatakse tavaliselt elemendile, mis vajab ka varje, ümardatud nurki või gradiente. Genereeri visuaalne kujundus teiste CSS-tööriistadega allpool ja lisa seejärel selle tööriista ajastusfunktsioon samale reeglile või transition-/animation-deklaratsioonile.

→ Box Shadow Generaator · Border Radius Generaator

Korduma kippuvad küsimused

Mida cubic-bezier()'i neli numbrit tegelikult tähendavad?

Need on kahe juhtpunkti, (x1, y1) ja (x2, y2), koordinaadid, mis painutavad Bézier' kõverat, mis jookseb fikseeritud algpunktist (0,0) fikseeritud lõpp-punktini (1,1). x-telg esindab möödunud aega (0 kuni 1) ja y-telg esindab, kui kaugele animeeritud omadus on edenenud, mistõttu peavad x1 ja x2 jääma vahemikku 0–1, samal ajal kui y1 ja y2 võivad sellest välja minna.

Mis vahe on ease'il, ease-in'il, ease-out'il ja ease-in-out'il?

ease (CSS vaikeväärtus) algab kiiresti, seejärel aeglustub õrnalt. ease-in algab aeglaselt ja kiireneb lõpu poole, kasulik ekraanilt lahkuvate elementide jaoks. ease-out algab kiiresti ja aeglustub, kasulik ekraanile sisenevate elementide jaoks. ease-in-out on aeglane mõlemas otsas ja kiirem keskel, andes sujuva, sümmeetrilise tunde.

Kas saan sama cubic-bezier() väärtust kasutada nii üleminekute kui animatsioonide jaoks?

Jah. transition-timing-function ja animation-timing-function aktsepteerivad täpselt sama cubic-bezier() süntaksit ja toodavad sama sujuvuskõvera — ainus erinevus on see, millisele CSS funktsioonile (transition vs keyframes-animatsioon) see ajastusfunktsioon on kinnitatud.

Miks näeb mu kõver katkine välja, kui y1 või y2 on väga suur või negatiivne?

See on ootuspärane — y-väärtuste nihutamine kaugele üle 0–1 vahemiku loob tugeva ületulistamise, kus animeeritud väärtus paiskub enne stabiliseerumist kaugele üle oma sihtväärtuse. See on kehtiv ja sageli tahtlik efekt, kuid kui see tundub soovimatu, too y1 ja y2 tagasi 0–1 vahemiku lähedale.

Kas kohandatud kõver on parem kui pelgalt nimega märksõnade kasutamine?

Mitte tingimata — viis märksõna (ease, ease-in, ease-out, ease-in-out, linear) katavad enamiku igapäevaseid vajadusi ja on koodis lihtsamini loetavad. Kasuta kohandatud cubic-bezier()-i, kui vajad konkreetset tunnet, mida märksõnad ei paku, näiteks põrget, teravamat naksatust või kindla disainisüsteemi liikumisspetsifikatsiooniga sobitamist.