Hvernig bý ég til sérsniðinn cubic-bezier-hægðarferil fyrir CSS?

Dragðu stýripunktana tvo á línuritinu, sláðu inn nákvæm x1, y1, x2, y2 gildi, eða veldu forstillingu. Veldu síðan CSS undir Framleiðslusnið og smelltu á Afrita til að fá cubic-bezier() gildið fyrir transition-timing-function.

Hvernig bý ég til skopp- eða yfirskotsáhrif með cubic-bezier?

Dragðu stýripunkt upp fyrir eða niður fyrir rammann svo Y-gildið fari út fyrir 0–1. Y má fara út fyrir það bil, á meðan X helst á milli 0 og 1. Forstillingarnar back-out og anticipate eru tilvaldir upphafspunktar fyrir yfirskot.

Get ég fengið ferilinn fyrir Tailwind, Framer Motion eða anime.js?

Já. Fliparnir fyrir framleiðslusnið eru CSS, Tailwind, Framer Motion og anime.js. Þeir nota allir sömu fjórar tölurnar, svo veldu bara flipa og smelltu á Afrita til að setja kóðann á klippiborðið.

Hvernig hleð ég inn fyrirliggjandi cubic-bezier-gildi til að breyta því?

Límdu gildi eins og cubic-bezier(.17, .67, .83, .67) í innflutningsreitinn og smelltu á Hlaða. Ef ekki er hægt að lesa fjórar tölur færðu villuboð. Ferillinn er einnig geymdur í vefslóð síðunnar á eftir tætigildinu, svo hægt er að deila honum.

Af hverju virðist forskoðunin hægari en raunverulegu hreyfingarnar mínar?

Hreyfiforskoðun notar stillingu fyrir Lengd sem þú getur breytt, en sjálfgefna stillingin er hægari svo hægt sé að skoða ferilinn vel. Styttu Lengd og smelltu á Spila aftur til að sjá hreyfinguna á þeim hraða sem þú ætlar að nota.

Er þetta í alvöru ókeypis?

Já. Öll verkfæri eru ókeypis í notkun, án aðgangs og án kreditkorts. Vinnan fer fram í tækinu þínu frekar en á netþjónum okkar, sem gerir það að verkum að hægt er að halda þjónustunni ókeypis.

Virkar það í farsíma?

Já. Það keyrir í nýlegum farsímavöfrum á iOS og Android án þess að setja neitt upp.

📈

CSS Cubic-Bezier-hægðarsmiður — ókeypis

Hannaðu CSS-hægðarferil með því að draga stýripunkta, forskoðaðu hreyfinguna beint og afritaðu cubic-bezier() gildið. Inniheldur yfirskot/réttitilbakastökk forstillingar.

Keyrir í vafranum þínumEngin skráning, engir sprettigluggarEngin innskráning krafistFrjáls að eilífu

Virkar án nettengingar eftir hleðslu

Dragðu teal og rósalitur handfönginn til að móta kúrfuna

Stjórnunarpunktar

x1y1x2y2

Hreyfiforskoðun

Lengd1,6 sek.

Breiddbreyting

CSS-gildi

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

Forstillingar

Rósalitur og teal handföngin geta togað upp eða niður úr kassanum (Y fyrir utan 0–1) til að búa til yfirskotsvirkni / goppáhrif eins og back-out og anticipate. X helst innan 0–1 (tíminn getur ekki snúið við).

Algeng notkun

Sérstilltar CSS breytinga slysHannaðu náttúruleg tilfinningarleg tilfærslur fyrir flýta áhrif, valmyndir og notendaviðmót breytingar.
Stökkva og yfirskot hreyfingarBúðu til leikgjörn vor/stokkva hreyfingu með því að draga stýripunkta fyrir utan kassann.
Slys fyrir @keyframes hreyfingarVeldu rétta hreyfingu-tímasetningu-fall fyrir CSS keyframe hreyfingar.
Slysgildi fyrir JS hreyfingu bækurFáðu kubíska bezia gildi fyrir GSAP, Framer Motion, anime.js og fleira.
Skilaðu hvernig slys virkaSjáðu sambandið milli bezier ferils og hreyfingarinnar sem hún framleiðir.

Hvernig það virkar

Ritilinn er byggður algjörlega í vafranum með React state og SVG — ekkert bókasafn meðhöndlar kúrfustærðfræðina. Tveir draganlegir stjórnpunktar skilgreina SVG kúbíska Bezier-slóð, og eigin CSS-hreyfimyndavél vafrans keyrir hreyfingarforskoðunina með því að sprauta cubic-bezier() gildinu beint inn í @keyframes reglu.

1
Dragðu eða skrifaðu stjórnpunkta
Tvö handföng (P1 í teal, P2 í rose) sitja á SVG-kanvasi. Að draga notar Pointer Events API með setPointerCapture svo handfangið fylgi fingri þínum eða bendlinum jafnvel utan SVG-marksins. Þú getur einnig ýtt handföngum með örvatökkum eða skrifað nákvæm gildi í x1/y1/x2/y2 talnainntökin.
2
SVG teiknar kúrfuna í rauntíma
Kúrfan er stakt SVG <path> element þar sem C (kúbíska Bezier) skipunin er endurreiknuð úr fjórum stjórnpunktahnitunum við hverja ástandsuppfærslu. Enginn kanvas, ekkert ytra bókasafn — SVG-myndgerðarvél vafrans teiknar slóðina beint.
3
CSS-vél vafrans forskoðar mýkinguna
Þrjár lifandi hreyfimyndir (sleðandi punktur, breiddaryfirfærsla, og skölun) keyra CSS @keyframes með cubic-bezier() gildinu sprautuðu inn. Eigin hreyfimyndavél vafrans túlkar kúrfuna, svo það sem þú sérð er nákvæmlega það sem framleiðslu-CSS þitt mun framleiða.
4
Afritaðu brotið í setningafræði rammans þíns
Flipar forma sömu fjóru tölurnar sem CSS transition-timing-function, Tailwind handahófs-gildisflokk, Framer Motion ease-fylki, eða anime.js mýkingarstreng. Brotið er skrifað á klippiborðið með navigator.clipboard. Kúrfan er einnig kóðuð í URL-hashinu (#b=x1,y1,x2,y2) svo þú getir deilt eða bókamerkt hana.