Pictiúr é seo: téann tú isteach i dtionscadal nua, tumfaidh tú isteach sa bhunachar cód, agus laistigh de na chéad chúpla uair an chloig, aimsíonn tú rud éigin a bhfuil an-chraic air. Scaipthe ar fud na stílbhileoga, aimsíonn tú sainmhínithe iolracha @keyframes do na beochan bhunúsacha céanna. Trí éifeachtaí céimnithe éagsúla, dhá nó trí athrú sleamhnáin, dornán de beochan súmáil, agus ar a laghad dhá beochan casadh éagsúla mar, mar gheall ar, mar sin, cén fáth nach? @keyframes cuisle { ó { scála: 1; } chuig { scála: 1.1; } }
@keyframes cuisle níos mó { 0%, 20%, 100% { scála: 1; } 10%, 40% { scála: 1.2; } }
Má tá an scéal seo ar an eolas, níl tú i d’aonar. I mo thaithí ar fud na dtionscadal éagsúla, ar cheann de na buaite tapa is comhsheasmhaí is féidir liom a sheachadadh ná eochairfhrámaí a chomhdhlúthú agus a chaighdeánú. Tá sé éirithe ina phatrún chomh hiontaofa sin go bhfuilim ag tnúth leis an nglanachán seo anois mar cheann de na chéad thascanna atá agam ar aon bhunachar cód nua. An loighic taobh thiar den chaos Déanann an iomarcaíocht seo ciall foirfe nuair a smaoiníonn tú air. Bainimid go léir úsáid as na beochan bunúsacha céanna inár gcuid oibre ó lá go lá: fades, sleamhnáin, súmáil isteach, casadh, agus éifeachtaí coitianta eile. Tá na beochana seo simplí go leor, agus tá sé éasca sainmhíniú tapa a fháil ar @keyframes chun an jab a dhéanamh. Gan córas láraithe beochana, scríobhann forbróirí na heochrachfhrámaí seo ón tús go nádúrtha, aineolach go bhfuil beochan den chineál céanna ann cheana féin in áiteanna eile sa bhunachar cód. Tá sé seo coitianta go háirithe agus muid ag obair in ailtireachtaí comhpháirteanna-bhunaithe (a dhéanann an chuid is mó againn na laethanta seo), mar is minic a oibríonn foirne go comhthreomhar ar fud codanna éagsúla den fheidhmchlár. An toradh? Chaos beochana. An Fhadhb Bheag Is iad na saincheisteanna is soiléire maidir le dúbailt eochairfhrámaí ná am forbartha amú agus bloat cód neamhriachtanach. Ciallaíonn sainmhínithe iolracha eochairfhráma go leor áiteanna le nuashonrú nuair a athraíonn riachtanais. An gá duit uainiú do bheochan céimnithe a choigeartú? Beidh ort gach cás a chuardach ar fud do bhunachar cód. Ar mhaith leat feidhmeanna éascaithe a chaighdeánú? Ádh mór ar na héagsúlachtaí go léir a aimsiú. Mar gheall ar an iolrú seo ar phointí cothabhála, is tasc am-íditheach é nuashonruithe beochana simplí. An Fhadhb Níos Mó Cruthaíonn an dúbailt eochairfhráma seo fadhb i bhfad níos doiléire a luraíonn faoin dromchla: an gaiste scóip dhomhanda. Fiú agus tú ag obair le hailtireachtaí bunaithe ar chomhpháirt, sainítear eochairfhrámaí CSS sa raon feidhme domhanda i gcónaí. Ciallaíonn sé seo go mbaineann gach eochairfhráma leis na comhpháirteanna go léir. I gcónaí. Sea, ní gá go n-úsáideann do bheochan na heochairfhrámaí a shainigh tú i do chomhpháirt. Úsáideann sé na heochrachfhrámaí deireanacha a mheaitseálann an t-ainm cruinn céanna a lódaíodh isteach sa raon feidhme domhanda. Chomh fada agus a bhíonn d’eochairfhrámaí go léir mar an gcéanna, seans gur mioncheist í seo. Ach an nóiméad is mian leat beochan a shaincheapadh le haghaidh cás úsáide ar leith, tá tú i dtrioblóid, nó níos measa, is tusa an té is cúis leo. Ní oibreoidh do bheochan toisc go ndéantar comhpháirt eile a lódáiltear tar éis do chuid féin, má dhéantar do eochairfhrámaí a fhorscríobh, nó go n-athraíonn do chuid comhpháirte ualach agus de thaisme athraíonn iompar beochana gach comhpháirte eile ag baint úsáide as ainm an eochairfhráma sin, agus b'fhéidir nach dtuigeann tú é fiú. Seo sampla simplí a léiríonn an fhadhb: .component-one { /* stíleanna comhpháirte */ beochan: cuisle 1s éascaíocht isteach gan teorainn malartach; }
/* ní oibreoidh an sainmhíniú @keyframes seo */ @keyframes cuisle { ó { scála: 1; } go { scála: 1.1; } }
/* níos déanaí sa chód... */
.component-dhá { /* stíleanna comhpháirte */ beochan: Pulse 1s éascaíocht isteach gan teorainn; }
/* bainfidh an eochairfhráma seo leis an dá chomhpháirt */ @keyframes cuisle { 0%, 20%, 100% { scála: 1; } 10%, 40% { scála: 1.2; } }
Úsáideann an dá chomhpháirt an t-ainm beochana céanna, ach déanann an dara sainmhíniú @keyframes forscríobh ar an gcéad cheann. Anois úsáidfidh comhpháirt a haon agus comhpháirt a dó an dara eochairfhrámaí, is cuma cén comhpháirt a shainíonn cé na heochairfhrámaí. Féach ar na Comharthaí Peann Keyframes - Demo 1 [forked] le Amit Sheen. An chuid is measa? Is minic a oibríonn sé seo go foirfe i bhforbairt áitiúil ach briseann sé go mistéireach i dtáirgeadh nuair a athraíonn próisis tógála ord luchtaithe do stílbhileoga. Ar deireadh beidh beochan agat a iompraíonn go héagsúil ag brath ar na comhpháirteanna a luchtaítear agus cén t-ord. An Réiteach: Keyframes Aontaithe Is ionadh simplí an freagra don chaos seo: eochairfhrámaí dinimiciúla réamhshainithe arna stóráil i stílbhileog roinnte. In ionad ligean do gach comhpháirt a beochan féin a shainiú, cruthaímid eochairfhrámaí láraithe atá dea-dhoiciméadaithe, éasca leinúsáidte, inchothaithe, agus in oiriúint do riachtanais shonracha do thionscadal. Smaoinigh air mar eochairfhrámaí comharthaí. Díreach mar a úsáidimid comharthaí le haghaidh dathanna agus spásáil, agus go n-úsáideann go leor againn comharthaí cheana féin le haghaidh airíonna beochana, cosúil le fad agus feidhmeanna éascaithe, cén fáth nach n-úsáideann tú comharthaí le haghaidh eochairfhrámaí freisin? Is féidir leis an gcur chuige seo comhtháthú go nádúrtha le haon sreabhadh oibre comharthaí dearaidh reatha atá á úsáid agat, agus an fhadhb bheag (dúbailt cód) agus an fhadhb níos mó (coimhlintí raon feidhme domhanda) a réiteach in aon turas amháin. Tá an smaoineamh simplí: cruthaigh foinse amháin fírinne dár mbeochan coitianta go léir. Tá eochairfhrámaí deartha go cúramach sa stílbhileog roinnte seo a chlúdaíonn na patrúin beochana a úsáideann ár dtionscadal i ndáiríre. Ní mó buille faoi thuairim an bhfuil beochan céimnithe ann cheana féin áit éigin inár mbunchód. Gan beochan ó chomhpháirteanna eile a fhorscríobh de thaisme. Ach seo an eochair: ní beochan statacha cóip-ghreamú amháin iad seo. Tá siad deartha le bheith dinimiciúil agus inoiriúnaithe trí airíonna saincheaptha CSS, rud a ligeann dúinn comhsheasmhacht a choinneáil agus fós an tsolúbthacht chun beochan a oiriúnú do chásanna úsáide ar leith, mar shampla má tá beochan beagán níos mó "pulse" uait in aon áit amháin. Ag Tógáil The First Keyframes Token Ar cheann de na chéad torthaí ísealchrochta ar cheart dúinn dul i ngleic leo tá an bheochan “céimnithe isteach”. I gceann de na tionscadail a rinne mé le déanaí, fuair mé os cionn dosaen sainmhínithe céimnithe ar leith, agus tá, níor thug siad go léir ach an teimhneacht ó 0 go 1 a bheochan. Mar sin, cruthaimis stílbhileog nua, cuir glaoch air kf-tokens.css, iompórtáil isteach inár dtionscadal é, agus cuir ár bhfrámaí eochair le tuairimí cearta taobh istigh de. /* keyframes-tokens.css */
/* * Fade In - beochan bealach isteach céimnithe * Úsáid: beochan: kf-céimnithe-i 0.3s éascaíocht amach; */ @keyframes kf-céimnithe isteach { ó { teimhneacht: 0; } go { teimhneacht: 1; } }
Tagann an dearbhú singil @keyframes seo in ionad na mbeochan céimnithe scaipthe sin go léir ar fud ár mbunachar cód. Glan, simplí, agus infheidhme ar fud an domhain. Agus anois go bhfuil an comhartha seo sainmhínithe againn, is féidir linn é a úsáid ó aon chomhpháirt le linn ár dtionscadal: .modal { beochan: kf-céimnithe-i 0.3s éasca-amach; }
.tooltip { beochan: kf-céimnithe-i 0.2s éascaíocht isteach; }
.fhógra { beochan: kf-céimnithe-i 0.5s éasca-amach; }
Féach ar na Comharthaí Peann Keyframes - Demo 2 [forked] le Amit Sheen. Nóta: Tá réimír kf á úsáid againn inár n-ainmneacha @keyframes go léir. Feidhmíonn an réimír seo mar ainmspás a chuireann cosc ar choinbhleachtaí a ainmniú le beochan atá ann cheana féin sa tionscadal agus a dhéanann soiléir láithreach go dtagann na heochairfhrámaí seo ónár gcomhad comharthaí eochairfhrámaí. Sleamhnán Dinimiciúla a Dhéanamh Oibríonn na heochrachfhrámaí kf-céimnithe go hiontach mar tá sé simplí agus is beag spás atá ann chun rudaí a chur amú. I mbeochan eile, áfach, ní mór dúinn a bheith i bhfad níos dinimiciúla, agus anseo is féidir linn cumhacht ollmhór airíonna saincheaptha CSS a ghiaráil. Seo an áit a bhfuil comharthaí eochairfhrámaí ag taitneamh i ndáiríre i gcomparáid le beochan statach scaipthe. Glacaimis cás coitianta: beochan “sleamhnán isteach”. Ach sleamhnaigh isteach ó áit? 100px ón taobh deas? 50% ón taobh clé? Ar cheart dó dul isteach ó bharr an scáileáin? Nó b'fhéidir snámh isteach ón mbun? An oiread sin féidearthachtaí, ach in ionad eochairfhrámaí ar leith a chruthú do gach treo agus gach athrú, is féidir linn comhartha solúbtha amháin a thógáil a oiriúnú do gach cás: /* * Sleamhnán I - beochan sleamhnán treo * Úsáid --kf-sleamhnán-ó chun treo a rialú * Réamhshocrú: sleamhnaíonn isteach ón taobh clé (-100%) *Úsáid: * beochan: kf-sleamhnán isteach 0.3s éasca-amach; * --kf-sleamhnán-ó: -100px 0; // sleamhnán ó chlé * --kf-sleamhnán-ó: 100px 0; // sleamhnú ó dheis * --kf-sleamhnán-ó: 0 -50px; // sleamhnán ón mbarr */
@keyframes kf-sleamhnán isteach { ó { aistrigh: var (-kf-sleamhnán-ó, -100% 0); } go { aistrigh: 0 0; } }
Anois is féidir linn an comhartha @keyframes singil seo a úsáid le haghaidh aon treo sleamhnáin go simplí ach an --kf-slide-ón maoin saincheaptha a athrú: barra taobh { beochan: kf-sleamhnán isteach 0.3s éasca-amach; /* Úsáideann sé an luach réamhshocraithe: sleamhnáin ón taobh clé */ }
.fhógra { beochan: kf-sleamhnán isteach 0.4s éasca-amach; --kf-sleamhnán-ó: 0 -50px; /* sleamhnaigh ón mbarr */ }
.modal { beochan: kf-céimnithe-i 0.5s, kf-sleamhnán isteach 0.5s ciúbach-bezier(0.34, 1.56, 0.64, 1); --kf-sleamhnán-ó: 50px 50px; /* sleamhnaigh ón mbun ar dheis */ }
Tugann an cur chuige seo solúbthacht dochreidte dúinn agus comhsheasmhacht á chothabháil. Dearbhú eochairfhráma amháin, féidearthachtaí gan teorainn. Féach ar na Comharthaí Peann Keyframes - Demo 3 [forked] le Amit Sheen. Agus más mian linn ár gcuid beochana a dhéanamh níos solúbtha fós, ag ligean d'éifeachtaí “sleamhnáin amach” freisin, is féidir linnní gá ach --kf-slide-a chur le maoin shaincheaptha, cosúil leis an méid a fheicfimid sa chéad chuid eile. Eochairfhrámaí Súmála Déthreo Beochan coitianta eile a dhéantar a mhacasamhlú thar thionscadail ná éifeachtaí “zoom”. Is cuma más mionscála é do theachtaireachtaí tósta, súmáil isteach drámatúil do mhódúil, nó éifeacht mhín ó thaobh scála síos do cheannteidil, tá beochan súmáil i ngach áit. In ionad eochairfhrámaí ar leith a chruthú do gach luach scála, déanaimis sraith sholúbtha amháin d’eochairfhrámaí kf-zoom a thógáil:
/* * Súmáil - beochan scála * Úsáid --kf-zoom-from agus --kf-zoom-to chun luachanna scála a rialú * Réamhshocrú: súmáil isteach ó 80% go 100% (0.8 go 1) *Úsáid: * beochan: kf-zoom 0.2s éasca-amach; * --kf-zoom-ó: 0.5; --kf-zoom-go: 1; // súmáil isteach ó 50% go 100% * --kf-zoom-ó: 1; --kf-zoom-go: 0; // súmáil isteach ó 100% go 0% * --kf-zoom-ó: 1; --kf-zoom-go: 1.1; // súmáil isteach ó 100% go 110% */
@keyframes kf-zoom { ó { scála: var (--kf-zoom-ó, 0.8); } go { scála: var(--kf-zoom-to, 1); } }
Le sainmhíniú amháin, is féidir linn aon athrú súmála a theastaíonn uainn a bhaint amach: .tósta { beochan: kf-sleamhnán isteach 0.2s, kf-zoom 0.4s éascaíocht amach; --kf-sleamhnán-ó: 0 100%; /* sleamhnaigh ón mbarr */ /* Úsáideann súmáil réamhshocraithe: scálaí ó 80% go 100% */ }
.modal { beochan: kf-zoom 0.3s ciúbach-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-ó: 0; /* súmáil drámatúil ó 0% go 100% */ }
.ceannteideal { beochan: kf-céimnithe-i 2s, kf-zoom 2s éascaíocht isteach; --kf-zoom-ó: 1.2; --kf-zoom-go: 0.8; /* scála réidh síos */ }
Oibríonn an réamhshocrú de 0.8 (80%) go foirfe don chuid is mó d’eilimintí Chomhéadain, cosúil le teachtaireachtaí tósta agus cártaí, agus iad fós éasca a shaincheapadh do chásanna speisialta. Féach ar na Comharthaí Peann Keyframes - Demo 4 [forked] le Amit Sheen. Seans gur thug tú faoi deara rud éigin suimiúil sna samplaí le déanaí: bhíomar ag cur beochan le chéile. Ceann de na príomhbhuntáistí a bhaineann le bheith ag obair le @keyframes tokens ná go bhfuil siad deartha chun comhtháthú gan uaim lena chéile. Tá an comhdhéanamh réidh seo d'aon ghnó, ní de thaisme. Déanfaimid plé níos mine ar chomhdhéanamh beochana níos déanaí, lena n-áirítear na háiteanna ina bhféadfadh fadhbanna a bheith ann, ach tá an chuid is mó de na teaglamaí simplí agus éasca le cur i bhfeidhm. Nóta: Agus an t-alt seo á scríobh agam, agus b'fhéidir mar gheall ar é a scríobh, fuair mé mé féin ag athmhachnamh ar an smaoineamh iomlán a bhaineann le beochan iontrála. Leis an dul chun cinn go léir le déanaí i CSS, an bhfuil siad fós ag teastáil uainn ar chor ar bith? Ar ámharaí an tsaoil, rinne Adam Argyle iniúchadh ar na ceisteanna céanna agus chuir sé in iúl go hiontach iad ina bhlag. Ní thagann sé seo salach ar a bhfuil scríofa anseo, ach cuireann sé cur chuige ar fiú smaoineamh air, go háirithe má bhíonn do thionscadail ag brath go mór ar bheochan iontrála. Beochan Leanúnach Cé go dtarlaíonn beochan iontrála, cosúil le “céimnithe”, “sleamhnán”, agus “súmáil” uair amháin agus ansin stopann siad, lúbann beochan leanúnacha ar feadh tréimhse éiginnte chun aird a tharraingt nó chun gníomhaíocht leanúnach a léiriú. Is iad an dá bheochan leanúnacha is coitianta a bhíonn agam ná “spin” (le haghaidh táscairí lódála) agus “pulse” (chun béim a chur ar ghnéithe tábhachtacha). Cruthaíonn na beochana seo dúshláin uathúla maidir le heochairfhrámaí comharthaí a chruthú. Murab ionann agus beochan iontrála a théann go hiondúil ó stát amháin go stát eile, ní mór beochan leanúnacha a bheith an-inoiriúnaithe ina bpatrúin iompair. An Dochtúir Casadh Dealraíonn sé go n-úsáideann gach tionscadal beochan casadh iolrach. Casadh cuid acu deiseal, cuid eile tuathalach. Déanann cuid acu rothlú 360 céim amháin, déanann cuid eile ilchasadh le haghaidh éifeacht níos tapúla. In ionad eochairfhrámaí ar leith a chruthú do gach athrú, déanaimis casadh solúbtha amháin a láimhseálann gach cás:
/* * Spin - beochan uainíochta * Úsáid --kf-spin-from agus --kf-spin-to chun raon rothlaithe a rialú * Úsáid --kf-casadh-casadh chun méid an rothlaithe a rialú * Réamhshocrú: rothlaíonn sé ó 0deg go 360deg (1 rothlú iomlán) *Úsáid: * beochan: kf-spin 1s líneach gan teorainn; * --kf-casadh-casadh: 2; // 2 rothlú iomlán * --kf-spin-ó: 0deg; --kf-casadh-go: 180deg; // rothlú leath * --kf-spin-ó: 0deg; --kf-casadh-go: -360deg; // tuathalach */
@keyframes kf-spin { ó { rothlú: var (--kf-spin-from, 0deg); } go { rothlú: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var (-- kf-casadh-cas, 1)); } }
Anois is féidir linn aon athrú casadh is maith linn a chruthú:
.loading-spinner { beochan: kf-spin 1s líneach gan teorainn; /* Úsáideann sé réamhshocrú: rothlaíonn sé ó 0deg go 360deg */ }
.fast-loader { beochan: kf-spin 1.2s éascaíocht isteach gan teorainn malartach; --kf-casadh-casadh: 3; /* 3 rothlú iomlán do gach treo in aghaidh an timthrialla*/ }
.steped-back { beochan: kf-casadh 1.5s céimeanna(8) gan teorainn; --kf-casadh-go: -360deg; /* tuathalach */ }
.subtle-wiggle { beochan: kf-spin 2s éascaíocht isteach gan teorainn malartach; --kf-casadh-ó: -16deg; --kf-casadh-go: 32deg; /* wiggle 36 deg: idir -18deg agus +18deg */ }
Féach ar na Comharthaí Peann Keyframes - Demo 5 [forked] le Amit Sheen. Is í áilleacht an chur chuige seo ná go n-oibríonn na heochairfhrámaí céanna chun rothlóirí a luchtú, deilbhíní rothlacha, éifeachtaí wiggle, agus fiú beochan casta il-cas. An Paradacsa Pulse Tá beochan Pulse níos deacra mar is féidir leo airíonna éagsúla a “bhogáil”. Roinnt cuisle an scála, cuid eile bíog an teimhneacht, agus roinnt airíonna dath bíog cosúil le gile nó saturation. Seachas eochairfhrámaí ar leith a chruthú do gach maoin, is féidir linn eochairfhrámaí a chruthú a oibríonn le haon mhaoin CSS. Seo sampla d’eochairfhráma bíog le roghanna scála agus teimhneachta:
/* * Pulse - beochan pulsing * Úsáid --kf-pulse-scale-ó agus --kf-pulse-scale-go dtí an raon scála a rialú * Úsáid --kf-pulse-teimhneacht-ó agus --kf-pulse-teimhneacht-chun raon teimhneachta a rialú * Réamhshocrú: gan aon chuisle (gach luach 1) *Úsáid: * beochan: kf-pulse 2s éascaíocht isteach gan teorainn malartach; * --kf-pulse-scála-ó: 0.95; --kf-pulse-scála-go: 1.05; // cuisle scála * --kf-pulse-teimhneacht-ó: 0.7; --kf-pulse-teimhneacht-go: 1; // cuisle teimhneacht */
@keyframes kf-pulse { ó { scála: var(--kf-pulse-scála-ó, 1); teimhneacht: var(--kf-pulse-teimhneacht-ó, 1); } go { scála: var(--kf-pulse-scála-go, 1); teimhneacht: var(--kf-pulse-teimhneacht-go, 1); } }
Cruthaíonn sé seo cuisle solúbtha ar féidir leis ilairíonna a bheochan: .glaoch chun gnímh { beochan: kf-pulse 0.6s gan teorainn malartach; --kf-pulse-teimhneacht-ó: 0.5; /* cuisle teimhneachta */ }
.fhógra-ponc { beochan: kf-pulse 0.6s éascaíocht isteach gan teorainn malartach; --kf-pulse-scála-ó: 0.9; --kf-pulse-scála-go: 1.1; /* cuisle scála */ }
.téacs-aibhsiú { beochan: kf-pulse 1.5s éasca-amach gan teorainn; --kf-pulse-scála-ó: 0.8; --kf-pulse-teimhneacht-ó: 0.2; /* scála agus cuisle teimhneachta */ }
Féach ar na Comharthaí Peann Keyframes - Demo 6 [forked] le Amit Sheen. Is féidir leis an bhfráma aonair kf-pulse seo gach rud a láimhseáil, ó airdí caolchúiseacha go buaicphointí drámatúla, fad is atá sé éasca a shaincheapadh. Éascú Casta Ceann de na rudaí is fearr faoi úsáid a bhaint as eochairfhrámaí comharthaí ná cé chomh héasca is atá sé ár leabharlann beochana a leathnú agus éifeachtaí a sholáthar nach mbeadh aon bhac ar fhormhór na bhforbróirí a scríobh ón tús, cosúil le leaisteacha nó preab. Seo sampla de chomhartha eochairfhrámaí simplí “preab” a úsáideann --kf-preab-ó airí saincheaptha chun airde an léim a rialú. /* * Preab - beochan bealach isteach preabadh * Úsáid --kf-preab-ó chun airde léim a rialú * Réamhshocrú: léim ó 100vh (as an scáileán) *Úsáid: * beochan: kf-preab 3s éascaíocht isteach; * --kf-preab-ó: 200px; // léim ó airde 200px */
@keyframes kf-preab { 0% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -1); }
34% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.4); }
55% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.2); }
72% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.1); }
85% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.05); }
94% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.025); }
99% { aistrigh: 0 calc(var(--kf-preab-ó, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { aistrigh: 0 0; beochan-uainiú-fheidhm: éascaíocht amach; } }
Tá beochan cosúil le “leaisteacha” beagán níos deacra mar gheall ar na ríomhanna laistigh de na frámaí eochrach. Ní mór dúinn --kf-leaisteacha-ó-X agus --kf-leaisteacha-ó-Y a shainiú ar leithligh (tá an dá cheann roghnach), agus le chéile ligeann siad dúinn bealach isteach leaisteacha a chruthú ó aon phointe ar an scáileán.
/* * Leaisteacha Isteach - beochan iontrála leaisteacha * Úsáid --kf-leaisteacha-ó-X agus --kf-leaisteacha-ó-Y chun an suíomh tosaithe a rialú * Réamhshocrú: isteach ón lárionad barr (0, -100vh) *Úsáid: * beochan: kf-leaisteacha-i 2s éasca-i-amach araon; * --kf-leaisteacha-ó-X: -50px; * --kf-leaisteacha-ó-Y: -200px; // isteach ó (-50px, -200px) */
@keyframes kf-leaisteacha-i { 0% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * 1) calc(var(--kf-leaisteacha-ó-Y, 0px) * 1); }
16% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * -0.3227) calc(var(--kf-leaisteacha-ó-Y, 0px) * -0.3227); }
28% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * 0.1312)calc(var(--kf-leaisteacha-ó-Y, 0px) * 0.1312); }
44% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * -0.0463) calc(var(--kf-leaisteacha-ó-Y, 0px) * -0.0463); }
59% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * 0.0164) calc(var(--kf-leaisteacha-ó-Y, 0px) * 0.0164); }
73% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * -0.0058) calc(var(--kf-leaisteacha-ó-Y, 0px) * -0.0058); }
88% { aistrigh: calc(var(--kf-leaisteacha-ó-X, -50vw) * 0.0020) calc(var(--kf-leaisteacha-ó-Y, 0px) * 0.0020); }
100% { aistrigh: 0 0; } }
Fágann an cur chuige seo go bhfuil sé éasca eochairfhrámaí ardchéime a athúsáid agus a shaincheapadh ar fud ár dtionscadal, gan ach maoin shaincheaptha amháin a athrú.
.preab-agus-zoom { beochan: kf-preab 3s éasca-i, kf-zúmáil 3s líneach; --kf-zoom-ó: 0; }
.preab-agus-sleamhnán { beochan-comhdhéanamh: cuir; /* Úsáideann an dá bheochan aistriú */ beochan: kf-preab 3s éasca-i, kf-sleamhnán i 3s éasca-amach; --kf-sleamhnán-ó: -200px; }
.leaisteacha-i { beochan: kf-leaisteacha-i 2s éasca-i-amach an dá; }
Féach ar na Comharthaí Peann Keyframes - Demo 7 [forked] le Amit Sheen. Go dtí seo, chonaiceamar conas is féidir linn eochairfhrámaí a chomhdhlúthú ar bhealach cliste agus éifeachtach. Ar ndóigh, b'fhéidir gur mhaith leat rudaí a athrú chun freastal níos fearr ar riachtanais do thionscadail, ach tá samplaí de roinnt beochan coitianta agus cásanna úsáide laethúla clúdaithe againn. Agus na comharthaí eochairfhrámaí seo i bhfeidhm, tá bloic thógála chumhachtacha againn anois chun beochan comhsheasmhacha inchothaithe a chruthú ar fud an tionscadail ar fad. Uimh níos mó eochairfhrámaí dúbailt, ná coinbhleachtaí raon feidhme domhanda níos mó. Bealach glan áisiúil chun ár riachtanais bheochana uile a láimhseáil. Ach is í an cheist dáiríre: Conas a dhéanfaimid na bloic thógála seo a chumadh le chéile? É a Chur Le Chéile Tá sé feicthe againn go bhfuil sé simplí comharthaí eochairfhrámaí bunúsacha a chomhcheangal. Níl aon rud speisialta ag teastáil uainn ach an chéad bheochan a shainiú, an dara ceann a shainiú, na hathróga a shocrú de réir mar is gá, agus sin é. /* Céimnigh isteach + sleamhnaigh isteach */ .tósta { beochan: kf-céimnithe-i 0.4s, kf-sleamhnán isteach 0.4s ciúbach-bezier(0.34, 1.56, 0.64, 1); --kf-sleamhnán-ó: 0 40px; }
/* Súmáil isteach + céimnithe isteach */ .modal { beochan: kf-céimnithe-i 0.3s, kf-zoom 0.3s ciúbach-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-ó: 0.7; --kf-zoom-go: 1; }
/* Sleamhnaigh isteach + cuisle */ .fhógra { beochan: kf-sleamhnán-i 0.5s, kf-pulse 1.2s éascaíocht isteach gan teorainn malartach; --kf-sleamhnán-ó: -100px 0; --kf-pulse-scála-ó: 0.95; --kf-pulse-scála-go: 1.05; }
Oibríonn na teaglamaí seo go hálainn mar díríonn gach beochan ar airí eile: teimhneacht, claochlú (aistrithe/scála), etc. Ach uaireanta bíonn coinbhleachtaí ann, agus ní mór dúinn fios a bheith againn cén fáth agus conas déileáil leo. Nuair a dhéanann dhá bheochan iarracht an t-airí céanna a bheochan - mar shampla, scála beochana nó teimhneacht bheochan araon - ní bheidh an toradh mar a mbeifeá ag súil leis. De réir réamhshocraithe, ní chuirtear ach ceann amháin de na beochana i bhfeidhm ar an maoin sin, agus is é sin an ceann deireanach ar an liosta beochana. Is teorannú é seo ar an gcaoi a láimhseálann CSS beochan iolracha ar an maoin chéanna. Mar shampla, ní oibreoidh sé seo mar a bhí beartaithe mar ní bheidh feidhm ach leis an mbeochan kf-pulse. .bad-comó { beochan: kf-zoom 0.5s ar aghaidh, kf-pulse 1.2s malartach gan teorainn; --kf-zoom-ó: 0.5; --kf-zoom-go: 1.2; --kf-pulse-scála-ó: 0.8; --kf-pulse-scála-go: 1.1; }
Suimiú Beochana Is é an bealach is simplí agus is dírí chun il-bheochan a théann i bhfeidhm ar an maoin chéanna a láimhseáil ná an mhaoin beochana-chumadóireachta a úsáid. Sa sampla deireanach thuas, cuirtear an beochan kf-pulse in ionad na beochana kf-zoom, mar sin ní fheicfimid an súmáil tosaigh agus ní bhfaighidh muid an scála ionchais go dtí 1.2. Trí chomhdhéanamh beochana a shocrú le cur leis, deirimid don bhrabhsálaí an dá bheochan a chur le chéile. Tugann sé seo dúinn an toradh atá uainn. .component-dhá { beochan-comhdhéanamh: cuir; }
Féach ar na Comharthaí Peann Keyframes - Demo 8 [forked] le Amit Sheen. Oibríonn an cur chuige seo go maith i bhformhór na gcásanna inar mian linn éifeachtaí ar an maoin chéanna a chomhcheangal. Tá sé úsáideach freisin nuair is gá dúinn beochan a chomhcheangal le luachanna maoine statacha. Mar shampla, má tá gné againn a úsáideann an t-airí aistrithe chun é a shuíomh go díreach nuair is mian linn, agus ansin ba mhaith linn é a bheochan leis na heochairfhrámaí kf-sleamhnán-i, faighimid léim infheicthe olc gan comhdhéanamh beochana. Féach ar na Comharthaí Peann Keyframes - Demo 9 [forked] le Amit Sheen. Agus comhdhéanamh beochana socraithe le cur leis, déantar an bheochan a chomhcheangal go réidh leis an mbeochan atá ann cheana féinchlaochlú, ionas go bhfanann an eilimint i bhfeidhm agus beocht mar a bhíothas ag súil. Stagger Beochana Bealach eile chun iliomad beochan a láimhseáil is ea iad a “thuaslú” – is é sin, tús a chur leis an dara beochan beagán tar éis don chéad cheann críochnú. Ní réiteach é a oibríonn do gach cás, ach tá sé úsáideach nuair a bhíonn beochan iontrála againn agus beochan leanúnach ina dhiaidh sin. /* céimnithe i + cuisle teimhneachta */ .fhógra { beochan: kf-céimnithe-i 2s éasca-amach, kf-pulse 0.5s 2s éascaíocht isteach gan teorainn malartach; --kf-pulse-teimhneacht-go: 0.5; }
Féach ar na Comharthaí Peann Keyframes - Demo 10 [forked] le Amit Sheen. Nithe Orduithe Úsáideann cuid mhór de na beochana a n-oibrímid leo an t-airí claochlaithe. I bhformhór na gcásanna, tá sé seo ach níos áisiúla. Tá buntáiste feidhmíochta aige freisin mar is féidir beochan claochlaithe a luasghéarú le GPU. Ach má úsáidimid claochluithe, ní mór dúinn glacadh leis go bhfuil tábhacht leis an ord ina ndéanaimid ár gclaochluithe. go leor. Inár bhfrámaí eochair go dtí seo, d’úsáideamar claochluithe aonair. De réir na sonraíochtaí, cuirtear iad seo i bhfeidhm i gcónaí in ord seasta: ar dtús, faigheann an eilimint aistrithe, ansin rothlú, ansin scála. Déanann sé seo ciall agus is é an rud a mbíonn an chuid is mó againn ag súil leis. Mar sin féin, má úsáidimid an t-airí claochlaithe, is é an t-ord ina scríobhtar na feidhmeanna an t-ord ina gcuirtear i bhfeidhm iad. Sa chás seo, má bhogaimid rud éigin 100 picteilín ar an X-ais agus ansin é a rothlú ag 45 céim, níl sé mar an gcéanna le rothlú 45 céim ar dtús agus ansin é a bhogadh 100 picteilín. /* Cearnóg bándearg: Aistrigh ar dtús, ansin rothlaigh */ .sampla-amháin { claochlú: translateX(100px) rothlú(45deg); }
/* Cearnóg ghlas: Rothlaigh ar dtús, ansin aistrigh */ .shampla-dhá { claochlú: rothlú(45deg) translateX(100px); }
Féach ar na Comharthaí Peann Keyframes - Demo 11 [forked] le Amit Sheen. Ach de réir an t-ordú claochlaithe, tarlaíonn gach claochlú aonair - gach rud a d'úsáideamar do na heochairfhrámaí comharthaí - roimh na feidhmeanna claochlaithe. Ciallaíonn sé sin go dtarlóidh aon rud a shocraigh tú sa mhaoin chlaochlaithe tar éis na beochana. Ach má shocraíonn tú, mar shampla, aistrigh in éineacht leis na heochairfhrámaí kf-spin, tarlóidh an t-aistriú roimh an mbeochan. Mearbhall fós?! Tarlaíonn sé seo cásanna inar féidir le luachanna statacha torthaí difriúla a chruthú don bheochan céanna, mar a tharlaíonn sa chás seo a leanas:
/* Beochan coitianta don dá rothlóir */ .spinneálaí { beochan: kf-spin 1s líneach gan teorainn; }
/* Rothlóir bándearg: aistrigh roimh rothlú (claochlú aonair) */ .spinner-bándearg { aistrigh: 100% 50%; }
/* Rothlóir glas: rothlaigh ansin aistrigh (ord feidhme) */ .spinner-glas { claochlú: aistrigh(100%, 50%); }
Féach ar na Comharthaí Peann Keyframes - Demo 12 [forked] le Amit Sheen. Is féidir leat a fheiceáil go bhfaigheann an chéad rothlóir (bándearg) aistriú a tharlaíonn roimh rothlú kf-spin, mar sin bogann sé go dtí a áit ar dtús agus ansin casadh. Faigheann an dara rothlóir (glas) feidhm aistrithe() a tharlaíonn tar éis an chlaochlaithe aonair, agus mar sin casann an eilimint ar dtús, ansin bogann sí i gcoibhneas lena uillinn reatha, agus faigheann muid an éifeacht fhithis leathan sin. Ní hea, ní fabht é seo. Níl ann ach ceann de na rudaí sin nach mór dúinn a bheith ar an eolas faoi CSS agus a choinneáil i gcuimhne agus muid ag obair le beochan iolracha nó le hiliomad trasfhoirmithe. Más gá, is féidir leat sraith bhreise d'eochairfhrámaí kf-spin-alt a chruthú freisin a rothlaíonn eilimintí ag baint úsáide as an bhfeidhm rothlú(). Tairiscint Laghdaithe Agus cé go bhfuil muid ag caint faoi eochairfhrámaí eile, ní féidir linn neamhaird a dhéanamh den rogha “gan beochan”. Ceann de na buntáistí is mó a bhaineann le heochairfhrámaí comharthaí a úsáid ná gur féidir inrochtaineacht a bhácáil isteach, agus tá sé éasca go leor a dhéanamh i ndáiríre. Trí ár n-eochairfhrámaí a dhearadh le hinrochtaineacht san áireamh, is féidir linn a chinntiú go bhfaigheann úsáideoirí ar fearr leo gluaisne laghdaithe eispéireas níos míne, nach bhfuil chomh seachránach, gan obair bhreise nó dúbailt cóid. Is féidir le brí bheacht “Tairiscint Laghdaithe” beagán a athrú ó bheochan amháin go ceann eile, agus ó thionscadal go tionscadal, ach seo roinnt pointí tábhachtacha le cuimhneamh orthu: Eochracha a bhalbhú Cé gur féidir roinnt beochan a mhaolú nó a mhaolú, tá cinn eile ann ar chóir dóibh imithe go hiomlán nuair a iarrtar tairiscint laghdaithe. Is sampla maith iad beochan Pulse. Chun a chinntiú nach ritheann na beochana seo i mód na gluaiseachta laghdaithe, is féidir linn iad a fhilleadh sa cheist chuí ó na meáin.
@media (is fearr-laghdaithe-tairiscint: gan rogha) { @keyfrmaes kf-pulse { ó { scála: var(--kf-pulse-scála-ó, 1); teimhneacht: var(--kf-pulse-teimhneacht-ó, 1); } go { scála: var(--kf-pulse-scála-go, 1); teimhneacht:var(--kf-pulse-teimhneacht-go, 1); } } }
Cinntíonn sé seo nach bhfeicfidh úsáideoirí a bhfuil tairiscint roghnaithe-laghdaithe acu le laghdú an beochan agus gheobhaidh siad eispéireas a oireann dá rogha féin. Instant In Tá roinnt eochairfhrámaí nach féidir linn a bhaint go simplí, mar shampla beochan iontrála. Ní mór an luach a athrú, ní mór a bheochan; murach sin, ní bheidh na luachanna cearta ag an eilimint. Ach i tairiscint laghdaithe, ba cheart go mbeadh an t-aistriú seo ón luach tosaigh láithreach. Chun é seo a bhaint amach, saineoimid sraith bhreise eochairfhrámaí ina léimeann an luach láithreach go dtí an staid deiridh. Is iad seo ár n-eochairfhrámaí réamhshocraithe. Ansin, cuirfimid na heochairfhrámaí rialta taobh istigh d’fhiosrúchán meán le haghaidh rogha-laghdaithe-tairiscint a leagtar ar neamhrogha, díreach mar a bhí sa sampla roimhe seo. /* buail isteach láithreach le haghaidh tairiscint laghdaithe */ @keyframes kf-zoom { ó, go { scála: var(--kf-zoom-to, 1); } }
@media (is fearr-laghdaithe-tairiscint: gan rogha) { /* Bunfhrámaí súmáil isteach */ @keyframes kf-zoom { ó { scála: var (--kf-zoom-ó, 0.8); } go { scála: var(--kf-zoom-to, 1); } } }
Ar an mbealach seo, feicfidh úsáideoirí ar fearr leo tairiscint laghdaithe an eilimint le feiceáil láithreach ina staid deiridh, agus gheobhaidh gach duine eile an t-aistriú beoite. An Cur Chuige Bog Tá cásanna ann inar mian linn roinnt gluaiseachta a choinneáil, ach i bhfad níos boige agus níos ciúine ná an beochan bunaidh. Mar shampla, is féidir linn preabadh isteach a chur in ionad bealach isteach preab.
@keyframes kf-preab { /* Céimnithe isteach bog do ghluaisne laghdaithe */ }
@media (is fearr-laghdaithe-tairiscint: gan rogha) { @keyframes kf-preab { /* Bunfhrámaí preabtha */ } }
Anois, faigheann úsáideoirí le tairiscint laghdaithe braistint cuma fós, ach gan dianghluaiseacht preab nó beochan leaisteacha. Agus na bloic thógála i bhfeidhm, is í an chéad cheist eile conas iad a dhéanamh mar chuid den sreabhadh oibre iarbhír. Is rud amháin é eochairfhrámaí solúbtha a scríobh, ach chun iad a bheith iontaofa ar fud tionscadail mhóra tá gá le cúpla straitéis a bhí orm an bealach crua a fhoghlaim. Straitéisí Forfheidhmithe & Cleachtais is Fearr Nuair a bheidh leabharlann dhaingean de eochairfhrámaí comharthaí againn, is é an fíordhúshlán ná conas iad a thabhairt isteach san obair laethúil.
Is é an temptation atá ann ná gach eochairfhráma a scaoileadh isteach láithreach agus an fhadhb a réiteach a dhearbhú, ach go praiticiúil fuair mé amach go dtagann na torthaí is fearr ó ghlacadh de réir a chéile. Tosaigh leis na beochana is coitianta, mar shampla céimnithe nó sleamhnán. Is buanna éasca iad seo a léiríonn luach láithreach gan gá le hathscríobh mór. Pointe eile ar fiú aird a thabhairt air is ea an t-ainmniú. Mar gheall ar réimír nó ainmspás comhsheasmhach is léir cé na beochana is comharthaí agus cé na beochana áitiúla aonuaire. Cuireann sé cosc freisin ar imbhuailtí de thaisme agus cabhraíonn sé le baill foirne nua an córas comhroinnte a aithint go sracfhéachaint. Tá an doiciméadú díreach chomh tábhachtach leis an gcód féin. Is féidir fiú trácht gairid os cionn gach eochairfhráma chomhartha a shábháil uaireanta de buille faoi thuairim níos déanaí. Ba cheart go mbeadh forbróir in ann an comhad comharthaí a oscailt, an éifeacht a theastaíonn uathu a scanadh, agus an patrún úsáide a chóipeáil díreach isteach ina gcomhpháirt. Is í solúbthacht is fiú an cur chuige seo a dhéanamh. Trí airíonna saincheaptha ciallmhara a nochtadh, tugaimid spás d'fhoirne chun an beochan a oiriúnú gan an córas a bhriseadh. Ag an am céanna, déan iarracht gan ró-chasta. Cuir na snaidhmeanna ar fáil agus coinnigh an chuid eile tuairim. Ar deireadh, cuimhnigh ar inrochtaineacht. Níl rogha tairiscint laghdaithe ag teastáil ó gach beochan, ach tá go leor ag teastáil. Má dhéantar na coigeartuithe seo a bhácáil go luath ní gá dúinn iad a iarfheistiú níos déanaí, agus léiríonn sé leibhéal cúraim a thabharfaidh ár n-úsáideoirí faoi deara fiú mura luann siad riamh é.
I mo thaithí féin, is é cóireáil comharthaí eochairfhrámaí mar chuid dár sreabhadh oibre comharthaí dearaidh a fhágann go gcloífidh siad. Nuair a bhíonn siad i bhfeidhm, stopann siad ag mothú cosúil le héifeachtaí speisialta agus bíonn siad mar chuid den teanga dearaidh, síneadh nádúrtha ar an mbealach a ghluaiseann an táirge agus a bhfreagraíonn sé. Timfhilleadh Suas Is féidir le beochan a bheith ar cheann de na codanna is lú de chomhéadain tógála, ach gan struchtúr, is féidir leo a bheith ar cheann de na foinsí frustrachais is mó freisin. Trí eochairfhrámaí a chóireáil mar chomharthaí, glacann tú rud éigin atá go hiondúil salach agus deacair a bhainistiú agus déanann tú córas soiléir intuartha duit. Níl an fíorluach i gceist ach cúpla líne de chód a shábháil. Is é an muinín atá agat nuair a úsáideann tú céimnithe, sleamhnán, súmáil nó casadh, go bhfuil a fhios agat go beacht conas a iompróidh sé ar fud an tionscadail. Tá sé sa tsolúbthacht a thagann ó airíonna saincheaptha gan chaos na n-athruithe gan teorainn. Agus is san inrochtaineacht atá ionsuite sa bhunsraith seachas é a chur leis mariarsmaoineamh. Chonaic mé go n-oibríonn na smaointe seo i bhfoirne éagsúla agus i gcódbaseanna éagsúla, agus bíonn an patrún mar a chéile i gcónaí. Nuair a bhíonn na comharthaí curtha i bhfeidhm, ní bhíonn na heochrachfhrámaí ina mbailiúchán scaipthe cleasanna agus is cuid den teanga dearaidh iad. Déanann siad an táirge a bhraitheann níos rún, níos comhsheasmhaí, agus níos beo. Má thógann tú rud amháin as an alt seo, bíodh sé mar seo: tá an cúram agus an struchtúr céanna tuillte ag beochan atá tugtha againn cheana féin do dhathanna, do chlóghrafaíocht agus do spásáil. Íocann infheistíocht bheag in eochairfhrámaí comharthaí as gach uair a bhogann do chomhéadan.
