Lluniwch hwn: rydych chi'n ymuno â phrosiect newydd, yn plymio i'r gronfa godau, ac o fewn yr ychydig oriau cyntaf, rydych chi'n darganfod rhywbeth rhwystredig o gyfarwydd. Wedi'i wasgaru trwy'r taflenni arddull, fe welwch sawl diffiniad @keyframes ar gyfer yr un animeiddiadau sylfaenol. Tri effaith pylu gwahanol, dau neu dri amrywiad sleid, llond llaw o animeiddiadau chwyddo, ac o leiaf dau animeiddiad sbin gwahanol oherwydd, wel, pam lai? @keyframes pwls { o { graddfa: 1; } i { graddfa: 1.1; } }
@keyframes mwy-pwls { 0%, 20%, 100% { graddfa: 1; } 10%, 40% { graddfa: 1.2; } }
Os yw'r senario hwn yn swnio'n gyfarwydd, nid ydych chi ar eich pen eich hun. Yn fy mhrofiad ar draws amrywiol brosiectau, un o'r enillion cyflym mwyaf cyson y gallaf ei gyflawni yw cydgrynhoi a safoni fframiau bysell. Mae wedi dod yn batrwm mor ddibynadwy fel fy mod nawr yn edrych ymlaen at y glanhau hwn fel un o fy nhasgau cyntaf ar unrhyw sylfaen cod newydd. Y Rhesymeg tu ôl i'r Anrhefn Mae'r diswyddiad hwn yn gwneud synnwyr perffaith pan fyddwch chi'n meddwl amdano. Rydyn ni i gyd yn defnyddio'r un animeiddiadau sylfaenol yn ein gwaith o ddydd i ddydd: pylu, sleidiau, chwyddo, troelli ac effeithiau cyffredin eraill. Mae'r animeiddiadau hyn yn eithaf syml, ac mae'n hawdd creu diffiniad cyflym @keyframes i wneud y gwaith. Heb system animeiddio ganolog, mae datblygwyr yn naturiol yn ysgrifennu'r fframiau bysell hyn o'r dechrau, heb fod yn ymwybodol bod animeiddiadau tebyg eisoes yn bodoli mewn mannau eraill yn y cod sylfaen. Mae hyn yn arbennig o gyffredin wrth weithio mewn saernïaeth seiliedig ar gydrannau (y mae'r rhan fwyaf ohonom yn ei wneud y dyddiau hyn), gan fod timau'n aml yn gweithio ochr yn ochr â gwahanol rannau o'r rhaglen. Y canlyniad? Anrhefn animeiddio. Y Broblem Fach Y materion amlycaf o ran dyblygu fframiau bysell yw amser datblygu wedi'i wastraffu a chwyddiad cod diangen. Mae diffiniadau ffrâm bysell lluosog yn golygu lleoedd lluosog i'w diweddaru pan fydd gofynion yn newid. Angen addasu amseriad eich animeiddiad pylu? Bydd angen i chi chwilio am bob achos ar draws eich cronfa godau. Eisiau safoni swyddogaethau lleddfu? Pob lwc dod o hyd i'r holl amrywiadau. Mae'r lluosiad hwn o bwyntiau cynnal a chadw yn gwneud hyd yn oed diweddariadau animeiddio syml yn dasg sy'n cymryd llawer o amser. Y Broblem Fwy Mae'r dyblygu hwn sy'n fframio bysellau yn creu problem lawer mwy llechwraidd sy'n llechu o dan yr wyneb: y trap cwmpas byd-eang. Hyd yn oed wrth weithio gyda phensaernïaeth sy'n seiliedig ar gydrannau, mae fframiau bysell CSS bob amser yn cael eu diffinio yn y cwmpas byd-eang. Mae hyn yn golygu bod yr holl fframiau bysell yn berthnasol i'r holl gydrannau. Bob amser. Ydy, nid yw eich animeiddiad o reidrwydd yn defnyddio'r fframiau bysell a ddiffiniwyd gennych yn eich cydran. Mae'n defnyddio'r fframiau bysell olaf sy'n cyd-fynd â'r union enw hwnnw a lwythwyd i'r cwmpas byd-eang. Cyn belled â bod eich holl fframiau bysell yn union yr un fath, gallai hyn ymddangos fel mater bach. Ond yr eiliad rydych chi am addasu animeiddiad ar gyfer achos defnydd penodol, rydych chi mewn trafferth, neu'n waeth, chi fydd yr un sy'n eu hachosi. Naill ai ni fydd eich animeiddiad yn gweithio oherwydd bod cydran arall wedi'i llwytho ar ôl eich un chi, trosysgrifo'ch fframiau bysell, neu'ch llwythi cydran yn para ac yn newid ymddygiad animeiddio pob cydran arall gan ddefnyddio enw'r ffrâm bysell honno ar ddamwain, ac efallai na fyddwch hyd yn oed yn ei sylweddoli. Dyma enghraifft syml sy'n dangos y broblem: .component-un { /* arddulliau cydrannau */ animeiddiad: pwls 1s rhwyddineb-mewn-allan anfeidrol bob yn ail; }
/* ni fydd y diffiniad @keyframes hwn yn gweithio */ @keyframes pwls { o { graddfa: 1; } i { graddfa: 1.1; } }
/* yn ddiweddarach yn y cod... */
.component-dau { /* arddulliau cydrannau */ animeiddiad: pwls 1s rhwyddineb-mewn-allan anfeidrol; }
/* bydd y ffrâm allwedd hon yn berthnasol i'r ddwy gydran */ @keyframes pwls { 0%, 20%, 100% { graddfa: 1; } 10%, 40% { graddfa: 1.2; } }
Mae'r ddwy gydran yn defnyddio'r un enw animeiddio, ond mae'r ail ddiffiniad @keyframes yn trosysgrifo'r un cyntaf. Nawr bydd cydran un a chydran dau yn defnyddio'r ail fframiau bysell, ni waeth pa gydran sy'n diffinio pa fframiau bysell. Gweler Tocynnau Pen Keyframes - Demo 1 [fforchog] gan Amit Sheen. Y rhan waethaf? Mae hyn yn aml yn gweithio'n berffaith mewn datblygiad lleol ond yn torri'n ddirgel wrth gynhyrchu pan fydd prosesau adeiladu yn newid trefn llwytho eich dalennau arddull. Yn y pen draw, bydd gennych animeiddiadau sy'n ymddwyn yn wahanol yn dibynnu ar ba gydrannau sy'n cael eu llwytho ac ym mha ddilyniant. Yr Ateb: Fframiau Allwedd Unedig Mae'r ateb i'r anhrefn hwn yn rhyfeddol o syml: fframiau bysell deinamig wedi'u diffinio ymlaen llaw wedi'u storio mewn dalen arddull a rennir. Yn lle gadael i bob cydran ddiffinio ei hanimeiddiadau ei hun, rydym yn creu fframiau bysell canoledig sydd wedi'u dogfennu'n dda, sy'n hawdd eudefnydd, yn gynaliadwy, ac wedi'i deilwra i anghenion penodol eich prosiect. Meddyliwch amdano fel tocynnau keyframes. Yn union fel yr ydym yn defnyddio tocynnau ar gyfer lliwiau a bylchau, ac mae llawer ohonom eisoes yn defnyddio tocynnau ar gyfer priodweddau animeiddio, fel hyd a swyddogaethau lleddfu, beth am ddefnyddio tocynnau ar gyfer fframiau bysell hefyd? Gall y dull hwn integreiddio'n naturiol ag unrhyw lif gwaith tocyn dylunio cyfredol rydych chi'n ei ddefnyddio, wrth ddatrys y broblem fach (dyblygu cod) a'r broblem fwy (gwrthdaro cwmpas byd-eang) ar yr un pryd. Mae'r syniad yn syml: crëwch un ffynhonnell o wirionedd ar gyfer ein holl animeiddiadau cyffredin. Mae'r daflen arddull hon a rennir yn cynnwys fframiau bysell wedi'u crefftio'n ofalus sy'n cwmpasu'r patrymau animeiddio y mae ein prosiect yn eu defnyddio mewn gwirionedd. Dim mwy o ddyfalu a yw animeiddiad pylu eisoes yn bodoli rhywle yn ein sylfaen cod. Dim mwy yn ddamweiniol trosysgrifo animeiddiadau o gydrannau eraill. Ond dyma'r allwedd: nid animeiddiadau copi-past statig yn unig yw'r rhain. Maent wedi'u cynllunio i fod yn ddeinamig ac yn addasadwy trwy briodweddau arfer CSS, sy'n ein galluogi i gynnal cysondeb tra'n dal i gael yr hyblygrwydd i addasu animeiddiadau i achosion defnydd penodol, fel pe bai angen animeiddiad “pwls” ychydig yn fwy arnoch mewn un lle. Adeiladu The First Keyframes Token Un o'r ffrwythau crog isel cyntaf y dylem fynd i'r afael ag ef yw'r animeiddiad “pylu i mewn”. Yn un o fy mhrosiectau diweddar, des i o hyd i dros ddwsin o ddiffiniadau pylu ar wahân, ac ie, roedden nhw i gyd yn syml yn animeiddio'r didreiddedd o 0 i 1. Felly, gadewch i ni greu taflen arddull newydd, ei galw kf-tokens.css, ei fewnforio i'n prosiect, a gosod ein fframiau allweddi gyda sylwadau cywir y tu mewn iddo. /* keyframes-tokens.css */
/* * Pylu i Mewn - pylu animeiddiad mynediad * Defnydd: animeiddiad: kf-pylu-mewn 0.3s rhwyddineb-allan; */ @keyframes kf-fade-in { o { didreiddedd: 0; } i { didreiddedd: 1; } }
Mae'r datganiad sengl @keyframes hwn yn disodli'r holl animeiddiadau pylu gwasgaredig hynny ar draws ein cronfa godau. Yn lân, yn syml ac yn berthnasol yn fyd-eang. A nawr bod y tocyn hwn wedi'i ddiffinio, gallwn ei ddefnyddio o unrhyw gydran trwy gydol ein prosiect: .modal { animeiddiad: kf-pylu-mewn 0.3s rhwyddineb-allan; }
.tooltip { animeiddiad: kf-pylu-mewn 0.2s rhwyddineb-mewn-allan; }
.hysbysiad { animeiddiad: kf-pylu-mewn 0.5s rhwyddineb-allan; }
Gweler y Tocynnau Pen Keyframes - Demo 2 [fforchog] gan Amit Sheen. Nodyn: Rydym yn defnyddio rhagddodiad kf- yn ein holl enwau @keyframes. Mae'r rhagddodiad hwn yn gweithredu fel gofod enw sy'n atal enwi gwrthdaro ag animeiddiadau sy'n bodoli eisoes yn y prosiect ac yn ei gwneud yn glir ar unwaith bod y fframiau bysell hyn yn dod o'n ffeil tocynnau keyframes. Gwneud Sleid Ddeinamig Mae'r keyframes kf-pylu i mewn yn gweithio'n wych oherwydd ei fod yn syml ac nid oes llawer o le i wneud llanast o bethau. Mewn animeiddiadau eraill, fodd bynnag, mae angen i ni fod yn llawer mwy deinamig, ac yma gallwn drosoli pŵer enfawr eiddo arfer CSS. Dyma lle mae tocynnau keyframes wir yn disgleirio o gymharu ag animeiddiadau statig gwasgaredig. Gadewch i ni gymryd senario gyffredin: animeiddiadau “sleid i mewn”. Ond llithro i mewn o ble? 100px o'r dde? 50% o'r chwith? A ddylai fynd i mewn o frig y sgrin? Neu efallai arnofio i mewn o'r gwaelod? Cymaint o bosibiliadau, ond yn lle creu fframiau bysell ar wahân ar gyfer pob cyfeiriad a phob amrywiad, gallwn adeiladu un tocyn hyblyg sy'n addasu i bob senario: /* * Sleid Mewn - animeiddiad sleidiau cyfeiriadol * Defnyddiwch --kf-sleid-o i reoli cyfeiriad * Diofyn: llithro i mewn o'r chwith (-100%) * Defnydd: * animeiddiad: kf-sleid-mewn 0.3s rhwyddineb-allan; * --kf-sleid-o:-100px 0; // llithro o'r chwith * --kf-sleid-o: 100px 0; // llithro o'r dde * --kf-sleid-o: 0 -50px; // llithro o'r brig */
@keyframes kf-sleid-mewn { o { cyfieithu: var (-kf-sleid-o, -100% 0); } i { cyfieithu: 0 0; } }
Nawr gallwn ddefnyddio'r tocyn @keyframes sengl hwn ar gyfer unrhyw gyfeiriad sleid yn syml trwy newid y --kf-slide-o eiddo arferol: bar ochr { animeiddiad: kf-sleid-mewn 0.3s rhwyddineb-allan; /* Yn defnyddio gwerth diofyn: sleidiau o'r chwith */ }
.hysbysiad { animeiddiad: kf-sleid-mewn 0.4s rhwyddineb-allan; --kf-sleid-o: 0 -50px; /* llithro o'r top */ }
.modal { animeiddiad: kf-pylu-mewn 0.5s, kf-sleid-mewn 0.5s ciwbig-bezier(0.34, 1.56, 0.64, 1); --kf-sleid-o: 50px 50px; /* llithro o waelod-dde */ }
Mae'r dull hwn yn rhoi hyblygrwydd anhygoel i ni tra'n cynnal cysondeb. Un datganiad keyframe, posibiliadau anfeidrol. Gweler Tocynnau Pen Keyframes - Demo 3 [fforchog] gan Amit Sheen. Ac os ydym am wneud ein hanimeiddiadau hyd yn oed yn fwy hyblyg, gan ganiatáu ar gyfer effeithiau “llithro allan” hefyd, gallwnyn syml, ychwanegwch --kf-sleid-i eiddo arfer, yn debyg i'r hyn a welwn yn yr adran nesaf. Fframiau Bysell Chwyddo Deugyfeiriadol Animeiddiad cyffredin arall sy'n cael ei ddyblygu ar draws prosiectau yw effeithiau “chwyddo”. P'un a yw'n raddfa gynnil ar gyfer negeseuon tost, yn chwyddo i mewn dramatig ar gyfer moddau, neu'n effaith graddol i lawr ysgafn ar gyfer penawdau, mae animeiddiadau chwyddo ym mhobman. Yn lle creu fframiau bysell ar wahân ar gyfer pob gwerth graddfa, gadewch i ni adeiladu un set hyblyg o fframiau bysell chwyddo kf:
/* * Chwyddo - animeiddiad ar raddfa * Defnyddiwch --kf-chwyddo-o a --kf-chwyddo-i i reoli gwerthoedd graddfa * Diofyn: chwyddo o 80% i 100% (0.8 i 1) * Defnydd: * animeiddiad: kf-chwyddo 0.2s rhwyddineb-allan; * --kf-chwyddo-o: 0.5; --kf-chwyddo-i: 1; // chwyddo o 50% i 100% * --kf-chwyddo-o: 1; --kf-chwyddo-i: 0; // chwyddo o 100% i 0% * --kf-chwyddo-o: 1; --kf-chwyddo-i: 1.1; // chwyddo o 100% i 110% */
@keyframes kf-zoom { o { graddfa: var(--kf-zoom-from, 0.8); } i { graddfa: var(--kf-chwyddo-i, 1); } }
Gydag un diffiniad, gallwn gyflawni unrhyw amrywiad chwyddo sydd ei angen arnom: .toast { animeiddiad: kf-sleid-mewn 0.2s, kf-chwyddo 0.4s rhwyddineb-allan; --kf-sleid-o: 0 100%; /* llithro o'r top */ /* Yn defnyddio chwyddo rhagosodedig: graddfeydd o 80% i 100% */ }
.modal { animeiddiad: kf-zoom 0.3s ciwbig-bezier(0.34, 1.56, 0.64, 1); --kf-chwyddo-o: 0; /* chwyddo dramatig o 0% i 100% */ }
.heading { animeiddiad: kf-pylu-mewn 2s, kf-chwyddo 2s rhwyddineb-mewn; --kf-chwyddo-o: 1.2; --kf-chwyddo-i: 0.8; /* graddol ysgafn i lawr */ }
Mae'r rhagosodiad o 0.8 (80%) yn gweithio'n berffaith ar gyfer y rhan fwyaf o elfennau UI, fel negeseuon tost a chardiau, tra'n dal i fod yn hawdd eu haddasu ar gyfer achosion arbennig. Gweler Tocynnau Pen Keyframes - Demo 4 [fforchog] gan Amit Sheen. Efallai eich bod wedi sylwi ar rywbeth diddorol yn yr enghreifftiau diweddar: rydym wedi bod yn cyfuno animeiddiadau. Un o fanteision allweddol gweithio gyda @keyframes tokens yw eu bod wedi'u cynllunio i integreiddio'n ddi-dor â'i gilydd. Mae'r cyfansoddiad llyfn hwn yn fwriadol, nid yn ddamweiniol. Byddwn yn trafod cyfansoddiad animeiddio yn fanylach yn nes ymlaen, gan gynnwys lle gallant ddod yn broblemus, ond mae'r rhan fwyaf o gyfuniadau yn syml ac yn hawdd i'w gweithredu. Nodyn: Wrth ysgrifennu'r erthygl hon, ac efallai oherwydd ei hysgrifennu, cefais fy hun yn ailfeddwl am yr holl syniad o animeiddiadau mynediad. Gyda'r holl ddatblygiadau diweddar yn CSS, a oes eu hangen arnom ni o gwbl? Yn ffodus, archwiliodd Adam Argyle yr un cwestiynau a'u mynegi'n wych yn ei flog. Nid yw hyn yn gwrth-ddweud yr hyn sydd wedi'i ysgrifennu yma, ond mae'n cyflwyno dull sy'n werth ei ystyried, yn enwedig os yw'ch prosiectau'n dibynnu'n fawr ar animeiddiadau mynediad. Animeiddiadau Parhaus Tra bod animeiddiadau mynediad, fel “pylu”, “sleid”, a “chwyddo” yn digwydd unwaith ac yna'n stopio, mae animeiddiadau parhaus yn dolenu am gyfnod amhenodol i dynnu sylw neu nodi gweithgaredd parhaus. Y ddau animeiddiad parhaus mwyaf cyffredin y deuaf ar eu traws yw “sbin” (ar gyfer dangosyddion llwytho) a “pwls” (ar gyfer tynnu sylw at elfennau pwysig). Mae'r animeiddiadau hyn yn cyflwyno heriau unigryw o ran creu tocynnau fframiau bysell. Yn wahanol i animeiddiadau mynediad sydd fel arfer yn mynd o un cyflwr i'r llall, mae angen i animeiddiadau parhaus fod yn hynod addasadwy yn eu patrymau ymddygiad. Y Meddyg Sbin Mae'n ymddangos bod pob prosiect yn defnyddio animeiddiadau sbin lluosog. Mae rhai yn troelli'n glocwedd, eraill yn wrthglocwedd. Mae rhai yn gwneud un cylchdro 360 gradd, mae eraill yn gwneud troeon lluosog i gael effaith gyflymach. Yn lle creu fframiau bysell ar wahân ar gyfer pob amrywiad, gadewch i ni adeiladu un troelli hyblyg sy'n delio â phob senario:
/* * Sbin - animeiddiad cylchdro * Defnyddiwch --kf-sbin-from a --kf-spin-to i reoli ystod cylchdroi * Defnyddiwch --kf-sbin-troi i reoli swm cylchdro * Diofyn: cylchdroi o 0deg i 360deg (1 cylchdro llawn) * Defnydd: * animeiddiad: kf-sbin 1s llinol anfeidrol; * --kf-sbin-troi: 2; // 2 gylchdro llawn * --kf-sbin-o: 0deg; --kf-sbin-i: 180deg; // hanner cylchdro * --kf-sbin-o: 0deg; --kf-sbin-i: -360deg; // gwrthglocwedd */
@keyframes kf-sbin { o { cylchdroi: var (--kf-sbin-from, 0deg); } i { cylchdroi: calc(var(--kf-sbin-from, 0deg) + var(--kf-sbin-to, 360deg) * var(--kf-sbin-turns, 1)); } }
Nawr gallwn greu unrhyw amrywiad sbin yr ydym yn ei hoffi:
.loading-troellwr { animeiddiad: kf-sbin 1s llinellol anfeidrol; /* Yn defnyddio rhagosodiad: yn cylchdroi o 0deg i 360deg */ }
.fast-loader { animeiddiad: kf-sbin 1.2s rhwyddineb-mewn-allan anfeidrol bob yn ail; --kf-sbin-troi: 3; /* 3 cylchdro llawn ar gyfer pob cyfeiriad fesul cylch*/ }
.steped-cefn { animeiddiad: kf-sbin 1.5s camau(8) anfeidrol; --kf-sbin-i: -360deg; /* wrthglocwedd */ }
.subtle-wiggle { animeiddiad: kf-spin 2s rhwyddineb-mewn-allan anfeidrol bob yn ail; --kf-sbin-o: -16deg; --kf-sbin-i: 32deg; /* wiggle 36 deg: rhwng -18deg a +18deg */ }
Gweler y Tocynnau Pen Keyframes - Demo 5 [fforchog] gan Amit Sheen. Harddwch y dull hwn yw bod yr un fframiau bysell yn gweithio ar gyfer llwytho troellwyr, eiconau cylchdroi, effeithiau troellog, a hyd yn oed animeiddiadau aml-dro cymhleth. Y Paradocs Pwls Mae animeiddiadau pwls yn anoddach oherwydd gallant “guriad” gwahanol briodweddau. Mae rhai yn curiad y raddfa, eraill yn curo'r didreiddedd, ac mae rhai priodweddau lliw pwls fel disgleirdeb neu dirlawnder. Yn hytrach na chreu fframiau bysell ar wahân ar gyfer pob eiddo, gallwn greu fframiau bysell sy'n gweithio gydag unrhyw eiddo CSS. Dyma enghraifft o ffrâm bysell pwls gydag opsiynau graddfa a didreiddedd:
/* * Pulse - animeiddiad curiadol * Defnyddiwch --kf-graddfa-pwls-o a --kf-graddfa-pwls-i i reoli ystod graddfa * Defnyddiwch --kf-pwls-anhryloywder-o a --kf-anhryloywder-curiad y galon-i i reoli ystod didreiddedd * Diofyn: dim pwls (pob gwerth 1) * Defnydd: * animeiddiad: kf-pwls 2s rhwyddineb-mewn-allan anfeidrol bob yn ail; * --kf-pwls-graddfa-o: 0.95; --kf-pwls-graddfa-i: 1.05; // pwls graddfa * --kf-pwls-anhryloywder-o: 0.7; --kf-pwls-anhryloywder-i: 1; // pwls didreiddedd */
@keyframes kf-pwls { o { graddfa: var(--kf-graddfa-pwls-o, 1); didreiddedd: var(--kf-pulse-anhryloywder-o, 1); } i { graddfa: var (--kf-graddfa-pwls-i, 1); didreiddedd: var(--kf-pulse-anhryloywder-i, 1); } }
Mae hyn yn creu pwls hyblyg a all animeiddio priodweddau lluosog: .galwad-i-weithredu { animeiddiad: kf-pwls 0.6s anfeidrol bob yn ail; --kf-pwls-anhryloywder-o: 0.5; /* pwls didreiddedd */ }
.hysbysiad-dot { animeiddiad: kf-pwls 0.6s rhwyddineb-mewn-allan anfeidrol bob yn ail; --kf-pwls-graddfa-o: 0.9; --kf-graddfa-pwls-i: 1.1; /* pwls graddfa */ }
.testun-uchafbwynt { animeiddiad: kf-pwls 1.5s rhwyddineb-allan anfeidrol; --kf-pwls-graddfa-o: 0.8; --kf-pwls-anhryloywder-o: 0.2; /* graddfa a phwls didreiddedd */ }
Gweler y Tocynnau Pen Keyframes - Demo 6 [fforchog] gan Amit Sheen. Gall y ffrâm bysell un kf-pwls hwn drin popeth o fachu sylw cynnil i uchafbwyntiau dramatig, i gyd tra'n hawdd i'w haddasu. Hwyluso Uwch Un o'r pethau gwych am ddefnyddio tocynnau keyframes yw pa mor hawdd yw ehangu ein llyfrgell animeiddio a darparu effeithiau na fyddai'r rhan fwyaf o ddatblygwyr yn trafferthu eu hysgrifennu o'r dechrau, fel elastig neu bownsio. Dyma enghraifft o docyn fframiau bysell “bownsio” syml sy'n defnyddio --kf-bowns-o briodwedd arferol i reoli uchder y naid. /* * Bownsio - animeiddiad mynediad sboncio * Defnyddiwch --kf-bowns-o i reoli uchder naid * Diofyn: neidio o 100vh (oddi ar y sgrin) * Defnydd: * animeiddiad: kf-bownsio 3s rhwyddineb-mewn; * --kf-bowns-o: 200px; // neidio o uchder 200px */
@keyframes kf- bownsio { 0% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -1); }
34% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.4); }
55% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.2); }
72% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.1); }
85% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.05); }
94% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.025); }
99% { cyfieithu: 0 calc(var(--kf-bowns-o, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { cyfieithu: 0 0; animeiddiad-amseru-swyddogaeth: rhwyddineb-allan; } }
Mae animeiddiadau fel “elastig” ychydig yn anoddach oherwydd y cyfrifiadau y tu mewn i'r fframiau bysell. Mae angen i ni ddiffinio --kf-elastig-o-X a --kf-elastig-o-Y ar wahân (mae'r ddau yn ddewisol), a gyda'i gilydd maen nhw'n gadael i ni greu mynedfa elastig o unrhyw bwynt ar y sgrin.
/* * Elastig Mewn - animeiddiad mynediad elastig * Defnyddiwch --kf-elastig-o-X a --kf-elastig-o-Y i reoli safle cychwyn * Diofyn: mynd i mewn o'r canol uchaf (0, -100vh) * Defnydd: * animeiddiad: kf-elastig-mewn 2s rhwyddineb-mewn-allan y ddau; * --kf-elastig-o-X: -50px; * --kf-elastig-o-Y:-200px; // nodwch o (-50px, -200px) */
@keyframes kf-elastig-yn { 0% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * 1) calc(var(--kf-elastig-o-Y, 0px) * 1); }
16% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * -0.3227) calc(var(--kf-elastig-o-Y, 0px) * -0.3227); }
28% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * 0.1312)calc(var(--kf-elastig-o-Y, 0px) * 0.1312); }
44% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * -0.0463) calc(var(--kf-elastig-o-Y, 0px) * -0.0463); }
59% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * 0.0164) calc(var(--kf-elastig-o-Y, 0px) * 0.0164); }
73% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * -0.0058) calc(var(--kf-elastig-o-Y, 0px) * -0.0058); }
88% { cyfieithu: calc(var(--kf-elastig-o-X, -50vw) * 0.0020) calc(var(--kf-elastig-o-Y, 0px) * 0.0020); }
100% { cyfieithu: 0 0; } }
Mae'r dull hwn yn ei gwneud hi'n hawdd ailddefnyddio ac addasu fframiau bysell uwch ar draws ein prosiect, dim ond trwy newid un eiddo personol.
.bownsio-a-chwyddo { animeiddiad: kf-bownsio 3s rhwyddineb-mewn, kf-chwyddo 3s llinellol; --kf-chwyddo-o: 0; }
.bowns-a-sleid { animeiddiad-cyfansoddi: ychwanegu; /* Mae'r ddau animeiddiad yn defnyddio cyfieithu */ animeiddiad: kf-bownsio 3s rhwyddineb-mewn, kf-sleid-yn 3s rhwyddineb-allan; --kf-sleid-o: -200px; }
.elastig-yn { animeiddiad: kf-elastig-mewn 2s rhwyddineb-mewn-allan y ddau; }
Gweler y Tocynnau Pen Keyframes - Demo 7 [fforchog] gan Amit Sheen. Hyd at y pwynt hwn, rydym wedi gweld sut y gallwn gyfuno fframiau allweddi mewn ffordd glyfar ac effeithlon. Wrth gwrs, efallai y byddwch am addasu pethau i gyd-fynd yn well ag anghenion eich prosiect, ond rydym wedi ymdrin ag enghreifftiau o sawl animeiddiad cyffredin ac achosion defnydd bob dydd. A chyda'r tocynnau keyframes hyn yn eu lle, mae gennym nawr flociau adeiladu pwerus ar gyfer creu animeiddiadau cyson, cynaliadwy ar draws y prosiect cyfan. Dim mwy o fframiau bysell dyblyg, dim mwy o wrthdaro cwmpas byd-eang. Dim ond ffordd lân, gyfleus i drin ein holl anghenion animeiddio. Ond y cwestiwn go iawn yw: Sut ydyn ni'n cyfansoddi'r blociau adeiladu hyn gyda'n gilydd? Rhoi'r Cyfan Gyda'n Gilydd Rydyn ni wedi gweld bod cyfuno tocynnau fframiau bysell sylfaenol yn syml. Nid oes angen unrhyw beth arbennig arnom ond i ddiffinio'r animeiddiad cyntaf, diffinio'r ail un, gosod y newidynnau yn ôl yr angen, a dyna ni. /* Pylu i mewn + llithro i mewn */ .toast { animeiddiad: kf-pylu-mewn 0.4s, kf-sleid-mewn 0.4s ciwbig-bezier(0.34, 1.56, 0.64, 1); --kf-sleid-o: 0 40px; }
/* Chwyddo i mewn + pylu i mewn */ .modal { animeiddiad: kf-pylu-mewn 0.3s, kf-chwyddo 0.3s ciwbig-bezier(0.34, 1.56, 0.64, 1); --kf-chwyddo-o: 0.7; --kf-chwyddo-i: 1; }
/* Llithro i mewn + curiad y galon */ .hysbysiad { animeiddiad: kf-sleid-mewn 0.5s, kf-pwls 1.2s rhwyddineb-mewn-allan anfeidrol bob yn ail; --kf-sleid-o:-100px 0; --kf-pwls-graddfa-o: 0.95; --kf-pwls-graddfa-i: 1.05; }
Mae'r cyfuniadau hyn yn gweithio'n hyfryd oherwydd bod pob animeiddiad yn targedu priodwedd gwahanol: didreiddedd, trawsnewid (cyfieithu/graddfa), ac ati. Ond weithiau mae gwrthdaro, ac mae angen i ni wybod pam a sut i ddelio â nhw. Pan fydd dau animeiddiad yn ceisio animeiddio'r un priodwedd - er enghraifft, graddfa animeiddio neu'r ddau anhryloywder animeiddio - nid y canlyniad fydd yr hyn a ddisgwyliwch. Yn ddiofyn, dim ond un o'r animeiddiadau sy'n cael ei gymhwyso i'r eiddo hwnnw, sef yr un olaf yn y rhestr animeiddio. Mae hyn yn gyfyngiad ar sut mae CSS yn trin animeiddiadau lluosog ar yr un eiddo. Er enghraifft, ni fydd hyn yn gweithio fel y bwriadwyd oherwydd dim ond yr animeiddiad kf-pulse fydd yn berthnasol. .bad-combo { animeiddiad: kf-chwyddo 0.5s ymlaen, kf-pwls 1.2s anfeidrol bob yn ail; --kf-chwyddo-o: 0.5; --kf-chwyddo-i: 1.2; --kf-pwls-graddfa-o: 0.8; --kf-graddfa-pwls-i: 1.1; }
Ychwanegiad Animeiddiad Y ffordd symlaf a mwyaf uniongyrchol o drin animeiddiadau lluosog sy'n effeithio ar yr un eiddo yw defnyddio'r eiddo cyfansoddiad animeiddio. Yn yr enghraifft olaf uchod, mae'r animeiddiad kf-pulse yn disodli'r animeiddiad kf-zoom, felly ni fyddwn yn gweld y chwyddo cychwynnol ac ni fyddwn yn cyrraedd y raddfa ddisgwyliedig i 1.2. Trwy osod y cyfansoddiad animeiddio i'w ychwanegu, rydyn ni'n dweud wrth y porwr i gyfuno'r ddau animeiddiad. Mae hyn yn rhoi'r canlyniad yr ydym ei eisiau. .component-dau { animeiddiad-cyfansoddi: ychwanegu; }
Gweler y Tocynnau Pen Keyframes - Demo 8 [fforchog] gan Amit Sheen. Mae'r dull hwn yn gweithio'n dda ar gyfer y rhan fwyaf o achosion lle rydym am gyfuno effeithiau ar yr un eiddo. Mae hefyd yn ddefnyddiol pan fydd angen i ni gyfuno animeiddiadau â gwerthoedd eiddo statig. Er enghraifft, os oes gennym ni elfen sy'n defnyddio'r priodwedd cyfieithu i'w gosod yn union lle rydyn ni eisiau, ac yna rydyn ni am ei hanimeiddio gyda'r fframiau bysell kf-slide-in, rydyn ni'n cael naid weladwy gas heb animeiddiad-gyfansoddiad. Gweler y Tocynnau Pen Keyframes - Demo 9 [fforchog] gan Amit Sheen. Gyda chyfansoddiad animeiddio wedi'i osod i'w ychwanegu, mae'r animeiddiad wedi'i gyfuno'n llyfn â'r presennoltrawsnewid, fel bod yr elfen yn aros yn ei lle ac yn animeiddio yn ôl y disgwyl. Animeiddiad Stagger Ffordd arall o drin animeiddiadau lluosog yw eu “darwahanu” - hynny yw, cychwyn yr ail animeiddiad ychydig ar ôl i'r un cyntaf ddod i ben. Nid yw'n ateb sy'n gweithio ym mhob achos, ond mae'n ddefnyddiol pan fydd gennym animeiddiad mynediad ac yna animeiddiad parhaus. /* pylu i mewn + didreiddedd pwls */ .hysbysiad { animeiddiad: kf-pylu-mewn 2s rhwyddineb-allan, kf-pwls 0.5s 2s rhwyddineb-mewn-allan anfeidrol bob yn ail; --kf-pwls-anhryloywder-i: 0.5; }
Gweler y Tocynnau Pen Keyframes - Demo 10 [fforchog] gan Amit Sheen. Materion Trefn Mae rhan fawr o'r animeiddiadau rydyn ni'n gweithio gyda nhw yn defnyddio'r eiddo trawsnewid. Yn y rhan fwyaf o achosion, mae hyn yn syml yn fwy cyfleus. Mae ganddo hefyd fantais perfformiad oherwydd gall animeiddiadau trawsnewid gael eu cyflymu gan GPU. Ond os ydym yn defnyddio trawsnewidiadau, mae angen inni dderbyn bod y drefn yr ydym yn cyflawni ein trawsnewidiadau yn bwysig. Mae llawer. Yn ein fframiau allwedd hyd yn hyn, rydym wedi defnyddio trawsnewidiadau unigol. Yn ôl y manylebau, mae'r rhain bob amser yn cael eu cymhwyso mewn trefn sefydlog: yn gyntaf, mae'r elfen yn cael ei chyfieithu, yna cylchdroi, yna graddfa. Mae hyn yn gwneud synnwyr a dyma'r hyn y mae'r rhan fwyaf ohonom yn ei ddisgwyl. Fodd bynnag, os ydym yn defnyddio'r eiddo trawsnewid, y drefn y mae'r swyddogaethau wedi'u hysgrifennu yw'r drefn y cânt eu cymhwyso. Yn yr achos hwn, os byddwn yn symud rhywbeth 100 picsel ar yr echelin X ac yna'n ei gylchdroi 45 gradd, nid yw yr un peth â'i gylchdroi yn gyntaf gan 45 gradd ac yna ei symud 100 picsel. /* Sgwâr pinc: Cyfieithwch yn gyntaf, yna cylchdroi */ .example-un { trawsnewid: translateX(100px) cylchdroi(45deg); }
/* Sgwâr gwyrdd: cylchdroi yn gyntaf, yna cyfieithu */ .example-dau { trawsnewid: cylchdroi (45deg) translateX(100px); }
Gweler y Tocynnau Pen Keyframes - Demo 11 [fforchog] gan Amit Sheen. Ond yn ôl y drefn drawsnewid, mae pob trawsnewidiad unigol - popeth rydyn ni wedi'i ddefnyddio ar gyfer y tocynnau fframiau bysell - yn digwydd cyn i'r trawsnewid swyddogaethau. Mae hynny'n golygu y bydd unrhyw beth rydych chi'n ei osod yn yr eiddo trawsnewid yn digwydd ar ôl yr animeiddiadau. Ond os ydych chi'n gosod, er enghraifft, cyfieithu ynghyd â'r fframiau bysell kf-spin, bydd y cyfieithiad yn digwydd cyn yr animeiddiad. Wedi drysu eto?! Mae hyn yn arwain at sefyllfaoedd lle gall gwerthoedd statig achosi canlyniadau gwahanol ar gyfer yr un animeiddiad, fel yn yr achos canlynol:
/* Animeiddiad cyffredin ar gyfer y ddau droellwr */ .sbinwr { animeiddiad: kf-sbin 1s llinellol anfeidrol; }
/* Troellwr pinc: cyfieithu cyn cylchdroi (trawsnewid unigol) */ .spiner-pinc { cyfieithu: 100% 50%; }
/* Troellwr gwyrdd: cylchdroi yna cyfieithu (trefn swyddogaeth) */ .spiner-green { trawsnewid: cyfieithu(100%, 50%); }
Gweler y Tocynnau Pen Keyframes - Demo 12 [fforchog] gan Amit Sheen. Gallwch weld bod y troellwr cyntaf (pinc) yn cael cyfieithiad sy'n digwydd cyn cylchdroi kf-spin, felly mae'n symud i'w le yn gyntaf ac yna'n troelli. Mae'r ail droellwr (gwyrdd) yn cael swyddogaeth gyfieithu () sy'n digwydd ar ôl i'r trawsnewidiad unigol, felly mae'r elfen yn troelli gyntaf, yna'n symud yn gymharol â'i ongl gyfredol, a chawn yr effaith orbit eang honno. Na, nid byg yw hwn. Mae'n un o'r pethau hynny y mae angen i ni ei wybod am CSS a'i gadw mewn cof wrth weithio gydag animeiddiadau lluosog neu drawsnewidiadau lluosog. Os oes angen, gallwch hefyd greu set ychwanegol o fframiau bysell kf-spin-alt sy'n cylchdroi elfennau gan ddefnyddio'r swyddogaeth cylchdroi (). Cynnig Llai Ac er ein bod yn siarad am fframiau bysell amgen, ni allwn anwybyddu'r opsiwn “dim animeiddiad”. Un o fanteision mwyaf defnyddio tocynnau keyframes yw y gellir pobi hygyrchedd, ac mewn gwirionedd mae'n eithaf hawdd i'w wneud. Trwy ddylunio ein fframiau bysell gyda hygyrchedd mewn golwg, gallwn sicrhau bod defnyddwyr y mae'n well ganddynt symud llai yn cael profiad llyfnach, llai tynnu sylw, heb waith ychwanegol na dyblygu cod. Gall union ystyr “Llai o Gynnig” newid ychydig o un animeiddiad i'r llall, ac o brosiect i brosiect, ond dyma rai pwyntiau pwysig i'w cadw mewn cof: Tewi Fframiau Bysellau Er y gellir meddalu neu arafu rhai animeiddiadau, mae yna rai eraill a ddylai ddiflannu'n llwyr pan ofynnir am symudiad llai. Mae animeiddiadau pwls yn enghraifft dda. Er mwyn sicrhau nad yw'r animeiddiadau hyn yn rhedeg yn y modd mudiant gostyngol, gallwn ni eu lapio yn yr ymholiad cyfryngau priodol.
@media (yn ffafrio-lleihau-cynnig: dim-dewis) { @keyfrmaes kf-pwls { o { graddfa: var(--kf-graddfa-pwls-o, 1); didreiddedd: var(--kf-pulse-anhryloywder-o, 1); } i { graddfa: var (--kf-graddfa-pwls-i, 1); didreiddedd:var(--kf-pulse-anhryloywder-i, 1); } } }
Mae hyn yn sicrhau na fydd defnyddwyr sydd wedi gosod prefers-reduced-motion i leihau yn gweld yr animeiddiad ac yn cael profiad sy'n cyfateb i'w dewis. Instant Mewn Mae yna rai fframiau bysell na allwn eu tynnu, fel animeiddiadau mynediad. Rhaid i'r gwerth newid, rhaid iddo animeiddio; fel arall, ni fydd gan yr elfen y gwerthoedd cywir. Ond mewn symudiad llai, dylai'r newid hwn o'r gwerth cychwynnol fod ar unwaith. I gyflawni hyn, byddwn yn diffinio set ychwanegol o fframiau bysell lle mae'r gwerth yn neidio ar unwaith i'r cyflwr terfynol. Daw'r rhain yn fframiau bysell diofyn. Yna, byddwn yn ychwanegu'r fframiau bysellau rheolaidd y tu mewn i ymholiad cyfryngau ar gyfer cynnig wedi'i leihau'n well wedi'i osod i ddim dewis, yn union fel yn yr enghraifft flaenorol. /* galwch i mewn ar unwaith i gael llai o symudiad */ @keyframes kf-zoom { o, i { graddfa: var(--kf-chwyddo-i, 1); } }
@media (yn ffafrio-lleihau-cynnig: dim-dewis) { /* Fframiau bysell chwyddo gwreiddiol */ @keyframes kf-zoom { o { graddfa: var(--kf-zoom-from, 0.8); } i { graddfa: var(--kf-chwyddo-i, 1); } } }
Fel hyn, bydd defnyddwyr sy'n well ganddynt symudiad llai yn gweld yr elfen yn ymddangos yn syth yn ei chyflwr terfynol, tra bod pawb arall yn cael y trawsnewidiad animeiddiedig. Y Dull Meddal Mae yna achosion lle rydyn ni eisiau cadw rhywfaint o symudiad, ond yn llawer meddalach a thawelach na'r animeiddiad gwreiddiol. Er enghraifft, gallwn ddisodli mynedfa bownsio gyda pylu ysgafn.
@keyframes kf- bownsio { /* Pylu meddal ar gyfer symudiad llai */ }
@media (yn ffafrio-lleihau-cynnig: dim-dewis) { @keyframes kf- bownsio { /* Fframiau bysell bownsio gwreiddiol */ } }
Nawr, mae defnyddwyr â symudiad llai wedi'u galluogi yn dal i gael ymdeimlad o ymddangosiad, ond heb symudiad dwys bownsio neu animeiddiad elastig. Gyda'r blociau adeiladu yn eu lle, y cwestiwn nesaf yw sut i'w gwneud yn rhan o'r llif gwaith gwirioneddol. Mae ysgrifennu fframiau bysell hyblyg yn un peth, ond mae eu gwneud yn ddibynadwy ar draws prosiect mawr yn gofyn am ychydig o strategaethau y bu'n rhaid i mi ddysgu'r ffordd galed. Strategaethau Gweithredu ac Arferion Gorau Unwaith y bydd gennym lyfrgell gadarn o docynnau fframiau bysell, yr her wirioneddol yw sut i ddod â nhw i mewn i waith bob dydd.
Y demtasiwn yw gollwng pob ffrâm allweddol ar unwaith a datgan bod y broblem wedi'i datrys, ond yn ymarferol rwyf wedi canfod bod y canlyniadau gorau yn dod o fabwysiadu graddol. Dechreuwch gyda'r animeiddiadau mwyaf cyffredin, fel pylu neu sleid. Mae'r rhain yn enillion hawdd sy'n dangos gwerth ar unwaith heb fod angen ailysgrifennu mawr. Mae enwi yn bwynt arall sy’n haeddu sylw. Mae rhagddodiad cyson neu ofod enwau yn ei gwneud yn amlwg pa animeiddiadau sy'n docynnau a pha rai sy'n rhai lleol unwaith ac am byth. Mae hefyd yn atal gwrthdrawiadau damweiniol ac yn helpu aelodau tîm newydd i adnabod y system a rennir ar yr olwg gyntaf. Mae dogfennaeth yr un mor bwysig â'r cod ei hun. Gall hyd yn oed sylw byr uwchben pob tocyn fframiau bysell arbed oriau o ddyfalu yn ddiweddarach. Dylai datblygwr allu agor y ffeil tocynnau, sganio am yr effaith sydd ei hangen arnynt, a chopïo'r patrwm defnydd yn syth i'w gydran. Hyblygrwydd yw'r hyn sy'n gwneud y dull hwn yn werth yr ymdrech. Trwy ddatgelu priodweddau arfer synhwyrol, rydyn ni'n rhoi lle i dimau addasu'r animeiddiad heb dorri'r system. Ar yr un pryd, ceisiwch beidio â gor-gymhlethu. Rhowch y nobiau sy'n bwysig a chadwch y gweddill yn ymwybodol. Yn olaf, cofiwch hygyrchedd. Nid oes angen dewis llai o symudiadau ar bob animeiddiad, ond mae llawer yn gwneud hynny. Mae pobi’r addasiadau hyn yn gynnar yn golygu na fydd yn rhaid inni byth eu hôl-osod yn hwyrach, ac mae’n dangos lefel o ofal y bydd ein defnyddwyr yn sylwi arno hyd yn oed os nad ydynt byth yn sôn amdano.
Yn fy mhrofiad i, trin tocynnau fframiau bysell fel rhan o'n llif gwaith tocynnau dylunio yw'r hyn sy'n eu gwneud yn glynu. Unwaith y byddant yn eu lle, maent yn rhoi'r gorau i deimlo fel effeithiau arbennig ac yn dod yn rhan o'r iaith ddylunio, estyniad naturiol o sut mae'r cynnyrch yn symud ac yn ymateb. Lapio Gall animeiddiadau fod yn un o'r rhannau mwyaf llawen o adeiladu rhyngwynebau, ond heb strwythur, gallant hefyd ddod yn un o'r ffynonellau mwyaf o rwystredigaeth. Trwy drin fframiau bysell fel tocynnau, rydych chi'n cymryd rhywbeth sydd fel arfer yn flêr ac yn anodd ei reoli ac yn ei droi'n system glir, rhagweladwy. Nid arbed ychydig linellau o god yn unig yw'r gwir werth. Pan fyddwch chi'n defnyddio pylu, llithro, chwyddo, neu droelliad, rydych chi'n gwybod yn union sut y bydd yn ymddwyn ar draws y prosiect. Mae yn yr hyblygrwydd sy'n dod o eiddo arfer heb yr anhrefn o amrywiadau diddiwedd. Ac mae yn y hygyrchedd sydd wedi'i ymgorffori yn y sylfaen yn hytrach na'i ychwanegu felôl-ystyriaeth. Rwyf wedi gweld y syniadau hyn yn gweithio mewn gwahanol dimau a gwahanol gronfeydd cod, ac mae'r patrwm bob amser yr un peth. Unwaith y bydd y tocynnau yn eu lle, mae fframiau bysell yn peidio â bod yn gasgliad gwasgaredig o driciau ac yn dod yn rhan o'r iaith ddylunio. Maent yn gwneud i'r cynnyrch deimlo'n fwy bwriadol, yn fwy cyson, ac yn fwy byw. Os cymerwch un peth o'r erthygl hon, gadewch iddo fod yn hyn: mae animeiddiadau yn haeddu'r un gofal a strwythur ag yr ydym eisoes yn ei roi i liwiau, teipograffeg a bylchau. Mae buddsoddiad bach mewn tocynnau keyframes yn talu ar ei ganfed bob tro y bydd eich rhyngwyneb yn symud.
