Teknobench
Catagóirí ▾
Teanga: ga ▾

Eagarthóir Cubic-Bezier

Dear cuair easing CSS le heagarthóir cubic-bezier inarraingthe, cuir i gcomparáid le linear iad i mbeochan bheo agus cóipeáil cubic-bezier() nó linear().

Tarraing an dá hanla (P1 agus P2). Imíonn an t-am ón taobh clé go dtí an taobh deas, an dul chun cinn ón mbun aníos; féadann hanla dul os cionn 1 nó faoi bhun 0 le haghaidh preabadh. Le hanla fócasaithe, úsáid na heochracha saighead (Shift le haghaidh 0.1).

Pointí rialúcháin

Réamhamharc beochana

Do chuar
linear

An cuar céanna samplaithe mar easing linear() CSS (Chrome 113+, Firefox 112+, Safari 17.2+). Leanann níos mó pointí an cuar níos cruinne.

Conas an t-eagarthóir cubic-bezier a úsáid

  1. Tarraing an dá hanla ar an ngraf. Cumann P1 (an chéad phointe rialúcháin) tús na gluaiseachta, P2 an deireadh. Imíonn an t-am ón taobh clé go dtí an taobh deas agus an dul chun cinn ón mbun aníos.
  2. Nó clóscríobh luach sa réimse Luach cubic-bezier(): cubic-bezier(0.4, 0, 0.2, 1) iomlán, ceithre uimhir, nó eochairfhocal mar ease-in-out. Cuireann na réimsí x1, y1, x2 agus y2 comhordanáid amháin in eagar ag an am.
  3. Tosaigh ón roghchlár Réamhshocruithe (eochairfhocail CSS, na teaghlaigh ó sine go back, agus cuair Material Design) nó ó na cnaipí eochairfhocal. Nuair a mheaitseálann do chuar réamhshocrú, taispeántar a ainm in aice leis na cnaipí.
  4. Breathnaigh ar an Réamhamharc beochana: taistealaíonn an ponc ar Do chuar agus an ponc ar linear an fad céanna sa Fad céanna. Úsáid Cuir ar sos/Seinn agus Atosaigh chun iad a chur i gcomparáid.
  5. Cóipeáil an toradh ó Feidhm ama CSS, nó cóipeáil an Garbhmheastachán linear() agus roghnaigh líon na Deighleoga.

Méarchlár: fócasaigh hanla agus úsáid na heochracha saighead chun é a bhogadh 0.01, nó 0.1 le Shift.

Má tá do chóras socraithe chun gluaiseacht a laghdú, tosaíonn an bheochan ar sos. Brúigh Seinn más mian leat í a rith ar aon nós.

Céard is brí le cubic-bezier()

Mapálann feidhm easing CSS an t-am atá imithe de trasdul (0 go 1) ar a dhul chun cinn (0 go 1). Déanann cubic-bezier(x1, y1, x2, y2) an mapáil seo a thuairisciú le cuar Bézier ciúbach a thosaíonn ag (0, 0), a chríochnaíonn ag (1, 1) agus a tharraingíonn dhá phointe rialúcháin, P1 = (x1, y1) agus P2 = (x2, y2).

  • Luachanna x is amanna iad, agus caithfidh siad fanacht idir 0 agus 1, nó ní cuar ama bailí an fheidhm. Coinníonn an t-eagarthóir laistigh den raon iad.
  • Luachanna y is dul chun cinn iad, agus féadann siad dul faoi bhun 0 nó os cionn 1. Má tá y os cionn 1, sáraíonn an bheochan a sprioc agus filleann sí, cosúil leis na cuair Back; faoi bhun 0, bogann sí siar ar dtús.
  • Ciallaíonn fána géar gluaiseacht thapa, ciallaíonn fána cothrom gluaiseacht mhall. Tosaíonn ease-out go tapa agus críochnaíonn go mall, rud a mhothaíonn nádúrtha d’eilimintí a thagann isteach ar an scáileán. Déanann ease-in a mhalairt agus oireann sé d’eilimintí a imíonn.

Is aicearraí iad na heochairfhocail CSS: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) agus linear = (0, 0, 1, 1).

An garbhmheastachán linear()

Liostálann an fheidhm linear() níos nuaí luachanna dul chun cinn ag amanna atá spásáilte go cothrom, mar shampla linear(0, 0.25, 0.5, 0.75, 1), agus ceanglaíonn sí le línte díreacha iad. Déanann an uirlis do chuar a shamplú (réitíonn sí an Bézier do gach céim ama) agus scríobhann sí na luachanna sin le trí ionad deachúlacha. Le 20 go 40 deighleog, is cuma leis an gcuar an toradh a fheictear. Is é fíorbhuntáiste linear() do chuair nach féidir le Bézier a tharraingt, mar preabadh agus spriongaí, ach ligeann sé duit comhréir amháin a roinnt freisin. Oibríonn sé i Chrome agus Edge 113+, Firefox 112+ agus Safari 17.2+, mar sin coinnigh an luach cubic-bezier() mar chúltaca.

Oibríonn an uirlis seo go hiomlán i do bhrabhsálaí. Ní chuirtear aon rud a chuireann tú isteach chuig freastalaí.

Ceisteanna coitianta

Cén áit a n-úsáidim an luach?

In transition-timing-function, animation-timing-function, nó sa ghearrscríbhinn: transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);. Glacann an Web Animations API leis mar easing.

Cad iad fadanna maithe?

Mairfidh athruithe beaga comhéadain 150 go 300 ms de ghnáth; gluaiseachtaí móra thar an scáileán 300 go 500 ms. Mothaíonn beochaintí níos faide mall go tapa.

Cén fáth nach féidir liom hanla a tharraingt thar an imeall clé nó deas?

Toisc gur am é x, agus ní féidir le ham dul siar: diúltaíonn CSS do luachanna x lasmuigh de 0–1.

Cé na cuair a úsáideann Material Design?

Is é cubic-bezier(0.4, 0, 0.2, 1) an cuar caighdeánach clasaiceach, le leaganacha mallaithe, luathaithe agus géara. Cuireann Material 3 na cuair aibhsithe leis; tá siad ar fad sa roghchlár Réamhshocruithe.

Conas a láimhseálaim gluaiseacht laghdaithe?

Tabhair aird ar @media (prefers-reduced-motion: reduce) i do CSS: giorraigh nó bain gluaiseachtaí móra agus coinnigh céimnithe simplí.

Uirlisí gaolmhara