Gineadóir CSS Cubic Bezier

Bunúsacha na bhFeidhmeanna Uainíochta i CSS

Úsáidtear feidhmeanna uainíochta i CSS chun luas aistrithe nó beochana a rialú thar am. Nuair a shainítear aistriú simplí, téann an ghluaiseacht chun cinn ó thús go deireadh. Trí úsáid a bhaint as an bhfeidhm cubic-bezier(), is féidir luas an dul chun cinn sin a athrú ag pointí difriúla den bheochan. Rialonnn na luachanna seo an chaoi a n-athraíonn airíonna CSS thar thréimhse shonraithe, rud a ligeann do dhearthóirí gluaiseachtaí saincheaptha a chruthú seachas a bheith teoranta do luas líneach seasta.

Is féidir an fheidhm cubic-bezier() a chur i bhfeidhm go díreach laistigh de na hairíonna transition-timing-function agus animation-timing-function, nó mar chuid de na nodaireachtaí gearra comhfhreagracha i do chuid cóid CSS.

Conas a Oibríonn an Cuar Cubic Bezier

Sainmhínítear cuar cubic Bezier le ceithre phointe. Ritheann an cuar féin ó bhun ar chlé (an tús, a sheasann don phointe 0,0) go dtí an barr ar dheis (an deireadh, a sheasann don phointe 1,1). Is ionann an ais chothrománach (X) agus dul chun cinn an ama, agus is ionann an ais cheartingearach (Y) agus dul chun cinn na beochana.

Cé go bhfuil an tús agus an deireadh seasta, déantar cruth an chuair a lúbadh ag baint úsáide as dhá phointe rialaithe idirmheánacha:

• An chéad phointe rialaithe (x1, y1)
• An dara pointe rialaithe (x2, y2)

Rialaíonn na pointí seo tarraingt an chuair. Nuair a bhíonn an cuar níos géire, bogann an bheochan níos gasta; nuair a bhíonn sé níos cothroime, bogann sí níos moille.

Rialacha agus Teorainneacha Ionchuir

Chun cuar bailí a chruthú, caithfidh na pointí rialaithe cloí le rialacha dochta matamaiticiúla a chuirtear i bhfeidhm sa ghléas:

• Teorainneacha X: Caithfidh luachanna X don chéad phointe rialaithe agus don dara pointe rialaithe fanacht go docht idir 0 agus 1. Léiríonn sé seo nach féidir leis an am rith ar gcúl nó dul thar an tréimhse iomlán.
• Teorainneacha Y: Is féidir le luachanna Y dul thar theorainneacha an bhosca. Tá siad teoranta do luachanna idir -0.70 agus 1.70 sa ghléas seo. Ligeann sé seo don bheochan dul faoi bhun an phointe tosaigh nó os cionn an phointe deiridh chun éifeachtaí speisialta a chruthú.

Má dhéantar iarracht luach neamhbhailí a chur isteach, cuirtear rialacha uathoibríocha i bhfeidhm:

• Má chuirtear luach cosúil le 9 isteach le haghaidh "An chéad phointe rialaithe" agus má chailltear fócas an réimse, athrófar an luach go huathoibríoch go dtí an teorainn uasta, is é sin 1.
• Má ghlanann tú réimse ionchuir uimhriúil agus má chailleann tú an fócas ina dhiaidh sin, athbhunófar an luach bailí deireanach a bhí sa réimse sin.
• Má fhágtar réimse folamh nó má chuirtear carachtair neamhuimhriúla isteach, fanfaidh an córas go dtí go gcuirfear luach iomlán bailí isteach.
• Is féidir luachanna a choigeartú go mion freisin tríd an méarchlár; mar shampla, má bhrúitear an eochair saighead Chlé nuair atá fócas ar láimhseáil pointe rialaithe, athrófar a luach go dtí luach mar 0.99.

Éifeachtaí Róléime agus Tarraingt Siar

Trí luachanna Y a shocrú lasmuigh den raon 0 go 1, is féidir éifeachtaí gluaiseachta casta a chruthú:

• Tarraingt Siar (Anticipation): Má shocraítear luach Y faoi bhun 0 (síos go -0.70), tarraingeoidh an beochan siar ar dtús, ag dul sa treo contrártha sula rithfidh sí ar aghaidh go dtí an sprioc.
• Róléim (Overshoot): Má shocraítear luach Y os cionn 1 (suas go 1.70), rachaidh an bheochan thar an spriocphointe deiridh ar dtús, sula n-asclóidh sí ar ais chun socrú ag an deireadh.

Is sampla maith é an réamhshocrú "Ar Ais Amach" den éifeacht seo, áit a bhfuil an luach cubic-bezier socraithe ag cubic-bezier(0.34, 1.56, 0.64, 1). Anseo, téann an luach 1.56 go mór os cionn 1, rud a chruthaíonn róléim shoiléir ag deireadh na gluaiseachta.

In ainneoin na n-éifeachtaí seo, tá teorainn bhunúsach ag baint le feidhm cubic-bezier() amháin. Is féidir léi réamh-mheas agus róléim a dhéanamh, ach ní féidir léi ach bogadh bealach amháin agus ansin socrú. Ní féidir léi éifeachtaí a athraíonn treo roinnt uaireanta a chur in iúl, mar shampla preabadh (bounce) nó éifeacht leaisteach.

Príobháideachas agus Próiseáil Sonraí

Nuair a úsáideann tú an uirlis seo, déantar an cuar a tharraingt go díreach i do bhrabhsálaí. Ní uaslódáiltear aon rud a shocraíonn tú anseo chuig BroBroGo. Tarlaíonn gach ríomh, rindreáil cuair, agus ríomh pointe go háitiúil ar do ghléas féin.

---

Ceisteanna Coitianta

Cad a chiallaíonn an dá láimhseáil agus an ceithre uimhir?

Ritheann an cuar ón mbun ar chlé (an tús) go dtí an barr ar dheis (an deireadh), le ham ag dul ó chlé go deas agus dul chun cinn ag dul suas. Is iad an dá láimhseáil na pointí rialaithe a lúbann é — tá X agus Y ag gach ceann acu, mar sin le chéile is iad cubic-bezier(x1, y1, x2, y2). Fanann X idir 0 agus 1, agus is féidir le Y dul os cionn an bhairr nó faoi bhun an bhun chun go ndéanfadh an ghluaiseacht róléim nó tarraingt siar sula socraíonn sí.

Conas a úsáidim an luach i mo CSS?

Cóipeáil an cubic-bezier() agus cuir isteach é áit ar bith a dtéann feidhm uainíochta — transition-timing-function, animation-timing-function, nó an nodaireacht ghearr, m.sh. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Níl sna heochairfhocail ease, ease-in, ease-out agus ease-in-out ach cuair cubic-bezier seasta, mar sin taispeánann roghnú ceann de na réamhsocruithe sin an luach cruinn taobh thiar den eochairfhocal.

An féidir leis éifeacht phreabach nó leaisteach a dhéanamh?

Ní féidir leis féin. Is féidir le cubic-bezier amháin réamh-mheas agus róléim a dhéanamh — tarraingíonn na réamhsocruithe "back" láimhseáil amháin thar an mbosca chun é sin a dhéanamh go díreach — ach ní féidir leis ach bogadh bealach amháin agus ansin socrú. Athraíonn preabadh agus leaisteachas treo roinnt uaireanta, rud nach féidir le cubic-bezier amháin a chur in iúl; teastaíonn eochairfhrámaí CSS nó an fheidhm linear() le go leor stadanna chuige sin.