Nola sortu cubic-bezier arintze-kurba pertsonalizatu bat CSSrako?

Arrastatu grafikoaren bi kontrol-puntuak, idatzi x1, y1, x2, y2 balio zehatzak edo hautatu aurrezarpen bat. Ondoren, aukeratu CSS Irteera-formatua atalean eta egin klik Kopiatu botoian transition-timing-function propietaterako cubic-bezier() balioa lortzeko.

Nola egin errebote edo gainditze efektu bat cubic-bezier erabiliz?

Arrastatu kontrol-puntua koadroaren gainetik edo azpitik, bere Y balioa 0-1 tartetik atera dadin. Y balioak tarte hori gainditu dezake, eta X balioak 0 eta 1 artean jarraitzen du. Back-out eta anticipate aurrezarpenak abiapuntu ezin hobeak dira gainditze-efektuetarako.

Lortu al dezaket arintzea Tailwind, Framer Motion edo anime.js formatuetan?

Bai. Irteera-formatuaren fitxak CSS, Tailwind, Framer Motion eta anime.js dira. Guztiek lau zenbaki berdinak formateatzen dituzte; beraz, aukeratu fitxa bat eta egin klik Kopiatu botoian kodea arbelean gordetzeko.

Nola kargatu lehendik dagoen cubic-bezier balio bat hura editatzeko?

Itsatsi balio bat, adibidez cubic-bezier(.17, .67, .83, .67), inportatzeko koadroan eta egin klik Kargatu botoian. Lau zenbakiak ezin badira irakurri, errore-mezu bat agertuko da. Kurba orriaren URLean ere gordetzen da traola (#) ikurren atzetik, partekatu ahal izateko.

Zergatik dirudi aurrebistak nire benetako trantsizioak baino motelagoa?

Mugimenduaren aurreikuspen atalak aldatu daitekeen Iraupena ezarpen bat erabiltzen du, eta balio lehenetsiak motelagoak dira kurba ondo aztertu ahal izateko. Laburtu Iraupena eta, ondoren, erabili Berrekin mugimendua nahi duzun abiaduran ikusteko.

Bai. Tresna guztiak doakoak dira, konturik gabe eta kreditu-txartelik gabe. Lanak zure gailuan egiten dira gure zerbitzarietan egin beharrean, eta horri esker mantentzen da doakoa.

Mugikorrean funtzionatzen al du?

Bai. iOS eta Android-eko mugikorretako oraingo nabigatzaileetan funtzionatzen du, ezer instalatu gabe.

📈

CSS Cubic-Bezier Arintze Sortzailea doan

Diseinatu CSS arintze-kurbak kontrol-puntuak arrastaka, aurreikusi mugimendua bizi-bizi eta kopiatu cubic-bezier() balioa. Gainidazketa/jauzi aurre-zehaztapenak barne.

Nabigatzailean exekutatzen daEz erregistrorik, ez leihatila gainerakorikEz da saioa hasi beharBetiko doan

Linez kanpo funtzionatzen du behin kargatuta

Arrastatu teal eta arrosa heldulekuak kurba moldatzeko

Kontrol-puntuak

x1y1x2y2

Mugimenduaren aurreikuspen

Iraupena1,6 s

Zabalera-trantsizioa

CSS balioa

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

Aurrezarpenak

Arrosa eta teal heldulekuak kaxaren gainetik edo azpitik tira dezakete (Y 0-1etik harago) back-out eta anticipate bezalako 'gaindite' / errebotatze efektuak sortzeko. X 0-1 barruan geratzen da (denbora ezin da atzera joan).

Ohiko erabilerak

Ordezkagarriko Trantsizioak CSS-arenDisa naturalean sentitzen bezalako trantsizioak ardazten efektua, menua, eta erabiltzaile interfazearen trantsizioak.
Talkaren eta Overshoot AnimazioakSortu jo/talkaren mugimendu jokalagarria kutxaren ordean kontrol puntua igaro gabe.
Ardaza @keyframes AnimazioakAukeratu animazioa-denbora funtzioa zuzena CSS keyframe animazioak.
Ardaza Balioak JS Animazio LiburutegiaLortu cubic-bezier balioak GSAP, Framer Motion, anime.js, eta gehiago.
Ulertu Nola Ardaza LaneanIkusi harremana bezier kurba eta mugimendu sortzen duen.

Nola Funtzionatzen Du

Editorea erabat nabigatzailean eraikita dago React egoera eta SVG erabiliz — liburutegirik ez du kurba-matematika kudeatzen. Bi kontrol-puntu arrastagarrik SVG kubiko Bezier bide bat definitzen dute, eta nabigatzailearen berezko CSS animazio-motorrak higidura-aurrebista exekutatzen du emaitzako cubic-bezier() balioa @keyframes arau batean zuzenean txertatuz.

1
Arrastatu edo idatzi kontrol-puntuak
Bi helduleku (P1 urdin-berdean, P2 arrosan) SVG oihal batean kokatzen dira. Arrastatzeak Pointer Events APIa erabiltzen du setPointerCapture-ekin, beraz heldulekuak zure hatza edo kurtsorea jarraitzen du SVG mugetatik kanpo ere. Heldulekuak gezi-teklekin ere mugi ditzakezu edo balio zehatzak idatzi x1/y1/x2/y2 zenbaki-sarreretan.
2
SVGk kurba denbora errealean marrazten du
Kurba SVG <path> elementu bakar bat da, zeinaren C (kubiko Bezier) komandoa berriz kalkulatzen den lau kontrol-puntuen koordenatuetatik egoera-eguneraketa bakoitzean. Oihalik ez, kanpo liburutegirik ez — nabigatzailearen SVG errendatzaileak bidea zuzenean marrazten du.
3
Nabigatzailearen CSS motorrak leunketa aurreikusten du
Hiru animazio bizi (puntu labaingarri bat, zabalera-trantsizio bat, eta eskala bat) CSS @keyframes exekutatzen dute cubic-bezier() balioa lerrokatuta txertatuta. Nabigatzailearen berezko animazio-motorrak kurba interpretatzen du, beraz ikusten duzuna zure ekoizpeneko CSSk zehazki emango duena da.
4
Kopiatu zatia zure lan-esparruaren sintaxian
Fitxek zenbaki berdin horiek CSS transition-timing-function gisa, Tailwind balio arbitrario klase gisa, Framer Motion ease array gisa, edo anime.js easing kate gisa formateatzen dituzte. Zatia arbelera idazten da navigator.clipboard-ekin. Kurba ere URL hash-ean kodetzen da (#b=x1,y1,x2,y2), beraz parteka edo markatu dezakezu.