Sut mae creu cromlin liniaru cubic-bezier bwrpasol ar gyfer CSS?

Llusgwch ddwy ddolen y pwyntiau rheoli ar y graff, teipiwch union werthoedd x1, y1, x2, y2, neu ddewiswch ragosodiad. Yna dewiswch CSS o dan Fformat allbwn a chliciwch ar Copïo i gael y gwerth cubic-bezier() ar gyfer transition-timing-function.

Sut mae gwneud effaith bownsio neu orsaethu gyda cubic-bezier?

Llusgwch ddolen uwchben neu o dan y blwch fel bod ei werth Y yn mynd heibio 0-1. Gall Y fynd y tu hwnt i'r ystod honno, tra bo X yn aros rhwng 0 ac 1. Mae'r rhagosodiadau back-out ac anticipate yn fannau cychwyn parod ar gyfer gorsaethu.

A allaf gael y lliniaru ar gyfer Tailwind, Framer Motion neu anime.js?

Gallwch. Y tabiau fformat allbwn yw CSS, Tailwind, Framer Motion ac anime.js. Maent i gyd yn fformatio'r un pedwar rhif, felly dewiswch dab a chliciwch ar Copïo i roi'r pyt ar eich clipfwrdd.

Sut mae llwytho gwerth cubic-bezier presennol i'w olygu?

Gludwch werth fel cubic-bezier(.17, .67, .83, .67) i mewn i'r blwch mewnforio a chliciwch ar Llwytho. Os na ellir darllen pedwar rhif, cewch neges gwall. Mae'r gromlin hefyd yn cael ei chadw yn URL y dudalen ar ôl yr hashnod, felly gellir ei rhannu.

Pam mae'r rhagolwg yn teimlo'n arafach na fy nhrawsnewidiadau go iawn?

Mae'r Rhagolwg symudiad yn defnyddio gosodiad Parhaad y gallwch ei newid, ac mae'r rhagosodiadau'n arafach fel y gallwch astudio'r gromlin. Byrhawch y Parhaad, ac yna defnyddiwch Ailchwarae i weld y symudiad ar y cyflymder rydych yn bwriadu ei ddefnyddio.

A yw'n rhad ac am ddim go iawn?

Ydy. Mae pob offeryn yn rhad ac am ddim i'w ddefnyddio, heb gyfrif a heb gerdyn credyd. Mae'r gwaith yn rhedeg ar eich dyfais yn hytrach nag ar ein gweinyddion ni, a dyna sy'n caniatáu iddo fod yn rhad ac am ddim i'w redeg.

A yw'n gweithio ar ffôn symudol?

Gall. Mae'n rhedeg ym mhorwyr symudol cyfredol iOS ac Android, heb ddim i'w osod.

📈

Generadur Lliniaru CSS Cubic-Bezier am ddim

Dyluniwch gromliniau lliniaru CSS trwy lusgo pwyntiau rheoli, rhagweld y symudiad yn fyw, a chopïo'r gwerth cubic-bezier(). Yn cynnwys rhagosodiadau gorflwng/bowns.

Yn rhedeg yn eich porwrDim cofrestru, dim ffenestri naidNid oes angen mewngofnodiAm ddim am byth

Yn gweithio all-lein ar ôl llwytho

Llusgwch yr handlenni teal a rhosyn i lunio'r gromlin

Pwyntiau rheoli

x1y1x2y2

Rhagolwg symudiad

Parhaad1.6 eil

Trosiant lled

Gwerth CSS

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

Rhagosodiadau

Gall yr handlenni rhosyn a teal dynnu uwchben neu islaw'r blwch (Y y tu hwnt i 0-1) i greu effeithiau 'gormodedd' / bownsio fel back-out ac anticipate. Mae X yn aros o fewn 0-1 (ni all amser fynd yn ôl).

Defnyddiau cyffredin

Trosiad CSS Aralleirio AralleirioCynllunio rhyddid teimlad-naturiol ar gyfer effeithiau nythu, dewislenni, a throsiadau UI.
Tynnu ac Overshoot AnimeiddioCreu symudiad gwanwyn chwareus/bownd trwy dynnu pwyntiau rheoli tu hwnt i'r blwch.
Rhyddid ar gyfer Animeiddio @keyframesDewiswch y swyddogaeth amseriad animeiddio gywir ar gyfer animeiddio allweddlin CSS.
Gwerthoedd Rhyddid ar gyfer Llyfrgell Animeiddio JSSicrhewch werthoedd cubic-bezier ar gyfer GSAP, Framer Motion, anime.js, a mwy.
Deall Sut Mae Rhyddid yn GweithioGweld y berthynas rhwng cromlin bezier a'r symudiad y mae'n ei gynhyrchu.

Sut Mae'n Gweithio

Mae'r golygydd wedi'i adeiladu'n gyfan gwbl yn y porwr gan ddefnyddio cyflwr React ac SVG — nid oes llyfrgell yn trin y fathemateg gromlin. Mae dau bwynt rheoli llusgadwy'n diffinio llwybr Bézier ciwbig SVG, ac mae injan animeiddio CSS y porwr ei hun yn rhedeg y rhagolwg cyffro drwy fewnosod y gwerth cubic-bezier() sy'n deillio yn uniongyrchol i mewn i reol @keyframes.

1
Llusgwch neu deipiwch bwyntiau rheoli
Mae dau ddolen (P1 mewn gwyrddlas, P2 mewn rhosliw) yn eistedd ar gynfas SVG. Mae llusgo'n defnyddio'r Pointer Events API gyda setPointerCapture fel bod y ddolen yn olrhain eich bys neu gyrchwr hyd yn oed y tu allan i ffin yr SVG. Gallwch hefyd bwnio dolenni â bysellau saeth neu deipio gwerthoedd union i mewn i'r mewnbynnau rhif x1/y1/x2/y2.
2
Mae SVG yn tynnu'r gromlin mewn amser real
Mae'r gromlin yn elfen <path> SVG sengl y mae ei orchymyn C (Bézier ciwbig) yn cael ei ailgyfrifo o gyfesurynnau'r pedwar pwynt rheoli ar bob diweddariad cyflwr. Dim cynfas, dim llyfrgell allanol — mae rendrwr SVG y porwr yn tynnu'r llwybr yn uniongyrchol.
3
Mae injan CSS y porwr yn rhagweld yr esmwythiad
Mae tair animeiddiad fyw (dot sy'n llithro, trosiad lled, a graddfa) yn rhedeg CSS @keyframes â'r gwerth cubic-bezier() wedi'i fewnosod ymhlyg. Mae injan animeiddio'r porwr ei hun yn dehongli'r gromlin, felly mae'r hyn a welwch yn union yr hyn y bydd eich CSS cynhyrchu'n ei gynhyrchu.
4
Copïwch y darn yng nghystrawen eich fframwaith
Mae tabiau'n fformatio'r un pedwar rhif fel transition-timing-function CSS, dosbarth gwerth-mympwyol Tailwind, arae esmwythiad Framer Motion, neu linyn esmwythiad anime.js. Ysgrifennir y darn i'r clipfwrdd gyda navigator.clipboard. Mae'r gromlin hefyd yn cael ei amgodio yn hash yr URL (#b=x1,y1,x2,y2) fel y gallwch ei rannu neu ei farcio.