Conas a chruthaím cuar maolaithe saincheaptha cubic-bezier do CSS?

Tarraing an dá láimhseáil rialaithe ar an ngraf, clóscríobh luachanna beachta x1, y1, x2, y2, nó roghnaigh réamhshocrú. Ansin roghnaigh CSS faoi Formáid aschuir agus cliceáil ar Cóipeáil chun an luach cubic-bezier() a fháil do transition-timing-function.

Conas a dhéanaim éifeacht phreabaigh nó fhorluí le cubic-bezier?

Tarraing láimhseáil os cionn an bhosca nó faoi ionas go dtéann a luach Y thar 0-1. Is féidir le Y an raon sin a shárú, fad a fhanann X idir 0 agus 1. Is pointí tosaigh réamhdhéanta forluí iad na réamhshocruithe back-out agus anticipate.

An féidir liom an maolú a fháil do Tailwind, Framer Motion nó anime.js?

Is féidir. Is iad na cluaisíní formáide aschuir ná CSS, Tailwind, Framer Motion agus anime.js. Déanann siad formáidiú ar na ceithre uimhir chéanna go léir, mar sin roghnaigh cluaisín agus cliceáil ar Cóipeáil chun an blúire a chur ar do ghearrthaisce.

Conas a lódálaim luach cubic-bezier atá ann cheana le cur in eagar?

Greamaigh luach ar nós cubic-bezier(.17, .67, .83, .67) isteach sa bhosca iompórtála agus cliceáil ar Lódáil. Mura féidir ceithre uimhir a léamh, gheobhaidh tú teachtaireacht earráide. Déantar an cuar a stóráil in URL an leathanaigh tar éis an haischlib freisin, ionas gur féidir é a roinnt.

Cén fáth a mbraitheann an réamhamharc níos moille ná mo chuid aistrithe féin?

Úsáideann an Réamhamharc gluaisne socrú Fad ama ar féidir leat a athrú, agus tá na réamhshocruithe níos moille ionas gur féidir leat an cuar a iniúchadh. Giorraigh an Fad ama, ansin úsáid Athsheinm chun an ghluaiseacht a fheiceáil ag an luas atá beartaithe agat a úsáid.

An bhfuil sé saor in aisce i ndáiríre?

Is ea. Tá gach uirlis saor in aisce le húsáid, gan cuntas agus gan cárta creidmheasa. Déantar an obair ar do ghléas féin seachas ar ár bhfreastalaithe, rud a ligeann dúinn é a choinneáil saor in aisce.

An oibríonn sé ar shoghluaiste?

Tá. Ritheann sé i mbrabhsálaithe soghluaiste reatha ar iOS agus ar Android, gan aon rud le suiteáil.

📈

Gineadóir Maolaithe CSS Cubic-Bezier saor in aisce

Dearaigh cuair mhaolaíochta CSS trí phointí rialaithe a tharraingt, réamhamharc na gluaisne beo, agus cóipeáil an luach cubic-bezier(). Cuimsíonn réamhshocruithe ró-leanúna/preabtha.

Ritheann i do bhrabhsálaíGan clárú, gan preabfhuinneogaNíl gá le logáil isteachSaor in aisce go deo

Oibríonn as líne nuair a lódáiltear é

Tarraing na hanlaí teal agus rós chun an cuar a mhúnlú

Pointí rialaithe

x1y1x2y2

Réamhamharc gluaisne

Fad ama1.6 soic

Aistriú leithead

Luach CSS

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

Réamhshocruithe

Is féidir leis na hanlaí rós agus teal tarraingt os cionn nó faoi bhun an bhosca (Y thar 0-1) chun éifeachtaí ró-scaoilte / preabadh a chruthú cosúil le back-out agus anticipate. Fanann X laistigh de 0-1 (ní féidir le ham dul ar ais).

Úsáidí coitianta

Geal Geal Chusmhéineadh CSSDearadh mothúchánach-mothúchánach a dhéanamh le haghaidh éifeachtaí foluain, roghchláir, agus athruithe UI.
Bounce u Overshoot AnimatedDéan gluaiseacht foluain/stoic spraoi-dhéanach trí phointí rialúcháin a bhaint lasmuigh den bhosca.
Geal do @keyframes AnimatedRoghnaigh an fheidhm animation-timing-ceart i gcomhair CSS keyframe animated.
Geal Values le haghaidh JS Animated LeabharlannaFaigh cubic-bezier luachanna do GSAP, Framer Motion, anime.js, agus níos mó.
Tuig Conas a oibríonn GealFéach ar an ngaol idir an chuar bezier agus an gluaiseacht a dhéanann sé.

Conas a Oibríonn sé

Tá an t-eagarthóir tógtha go hiomlán sa bhrabhsálaí ag baint úsáide as staid React agus SVG — ní láimhseálann aon leabharlann an uimhríocht chuair. Sainíonn dhá phointe rialaithe in-tarraingthe cosán Bezier cubach SVG, agus ritheann inneall beochana CSS an bhrabhsálaí féin an réamhamharc gluaisne trí luach cubic-bezier() an torthaí a instealladh go díreach i riail @keyframes.

1
Tarraing nó clóscríobh pointí rialaithe
Suíonn dhá lámh (P1 i teal, P2 i rós) ar chanbhás SVG. Úsáideann tarraingt an API Pointer Events le setPointerCapture ionas go rianaíonn an lámh do mhéar nó cúrsóir fiú lasmuigh de theorainn an SVG. Is féidir leat lámha a bhogadh le heochracha saighde freisin nó luachanna beachta a chlóscríobh isteach san ionchuir uimhreacha x1/y1/x2/y2.
2
Tarraingíonn SVG an cuar i bhfíor-am
Is eilimint SVG <path> amháin an cuar a ríomhtar a ordú C (Bezier cubach) as na ceithre chomhordanáid pointe rialaithe ar gach nuashonrú staide. Gan canbhás, gan leabharlann sheachtrach — tarraingíonn rindreálaí SVG an bhrabhsálaí an cosán go díreach.
3
Réamhamharcann inneall CSS an bhrabhsálaí an réidhiú
Ritheann trí bheochan bheo (ponc ag sleamhnú, aistriú leithid, agus scála) @keyframes CSS leis an luach cubic-bezier() instealladh inlíne. Léirmhíníonn inneall beochana an bhrabhsálaí féin an cuar, mar sin is é a fheiceann tú go beacht an rud a tháirgeoidh do CSS táirgthe.
4
Cóipeáil an blúire i gcomhréir do chreatlach
Formáidíonn cluaisíní na ceithre uimhir chéanna mar fheidhm-am-timeála aistrithe CSS, aicme luacha treallach Tailwind, eagar réidhithe Framer Motion, nó teaghrán réidhithe anime.js. Scríobhtar an blúire chuig an ngearrthaisce le navigator.clipboard. Ionchódaítear an cuar freisin i hais an URL (#b=x1,y1,x2,y2) ionas gur féidir leat é a roinnt nó a chur i leabharmharcanna.