Imagu ĉi tion: vi aliĝas al nova projekto, plonĝas en la kodbazon, kaj en la unuaj horoj, vi malkovras ion frustre konatan. Disigitaj tra la stilfolioj, vi trovas plurajn @keyframes-difinojn por la samaj bazaj animacioj. Tri malsamaj fade-en-efektoj, du aŭ tri glit-varioj, manpleno da zom-animacioj, kaj almenaŭ du malsamaj spin-animacioj ĉar, nu, kial ne? @keyframes pulso { de { skalo: 1; } al { skalo: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { skalo: 1; } 10%, 40% { skalo: 1,2; } }
Se ĉi tiu scenaro sonas konata, vi ne estas sola. Laŭ mia sperto tra diversaj projektoj, unu el la plej konsekvencaj rapidaj venkoj, kiujn mi povas liveri, estas solidigi kaj normigi ŝlosilkadrojn. Ĝi fariĝis tiel fidinda ŝablono, ke mi nun antaŭĝojas pri ĉi tiu purigado kiel unu el miaj unuaj taskoj en iu ajn nova kodbazo. La Logiko Malantaŭ La Kaoso Ĉi tiu redundo havas perfektan sencon kiam vi pensas pri ĝi. Ni ĉiuj uzas la samajn fundamentajn kuraĝigojn en nia ĉiutaga laboro: velkado, glitado, zomoj, spinoj kaj aliaj komunaj efikoj. Ĉi tiuj kuraĝigoj estas sufiĉe simplaj, kaj estas facile vipi rapidan @keyframes-difinon por fari la laboron. Sen centralizita animacia sistemo, programistoj nature skribas ĉi tiujn ŝlosilkadrojn de nulo, nekonsciante, ke similaj animacioj jam ekzistas aliloke en la kodbazo. Ĉi tio estas precipe ofta kiam oni laboras en komponent-bazitaj arkitekturoj (kion la plej multaj el ni faras hodiaŭ), ĉar teamoj ofte laboras paralele tra malsamaj partoj de la aplikaĵo. La rezulto? Animacia kaoso. La Malgranda Problemo La plej evidentaj problemoj kun ŝlosilkadroj duobligo estas malŝparita disvolva tempo kaj nenecesa kodo ŝvelaĵo. Multoblaj ŝlosilkadraj difinoj signifas plurajn lokojn por ĝisdatigi kiam postuloj ŝanĝiĝas. Ĉu vi bezonas ĝustigi la tempigon de via fade-animacio? Vi devos ĉasi ĉiun okazon tra via kodbazo. Ĉu vi volas normigi faciligajn funkciojn? Bonŝancon trovi ĉiujn variaĵojn. Ĉi tiu multobligo de prizorgaj punktoj faras eĉ simplajn animaciajn ĝisdatigojn temporaba tasko. La Pli Granda Problemo Ĉi tiu ŝlosilframa duobligo kreas multe pli insida problemon kaŝatendantan sub la surfaco: la tutmonda ampleksokaptilo. Eĉ kiam oni laboras kun komponent-bazitaj arkitekturoj, CSS-ŝlosilkadroj ĉiam estas difinitaj en la tutmonda amplekso. Ĉi tio signifas, ke ĉiuj ŝlosilkadroj validas por ĉiuj komponantoj. Ĉiam. Jes, via animacio ne nepre uzas la ŝlosilkadrojn, kiujn vi difinis en via komponanto. Ĝi uzas la lastajn ŝlosilkadrojn, kiuj kongruas kun tiu sama nomo, kiuj estis ŝarĝitaj en la tutmondan amplekson. Dum ĉiuj viaj ŝlosilkadroj estas identaj, ĉi tio povus ŝajni negrava problemo. Sed en la momento, kiam vi volas agordi animacion por specifa uzokazo, vi havas problemojn, aŭ pli malbone, vi estos la kaŭzanta ilin. Aŭ via animacio ne funkcios ĉar alia komponanto ŝarĝis post la via, anstataŭigante viajn ŝlosilkadrojn, aŭ via komponanto ŝarĝas laste kaj hazarde ŝanĝas la animacian konduton por ĉiu alia komponento uzante la nomon de tiu ŝlosilkadro, kaj vi eble eĉ ne rimarkas ĝin. Jen simpla ekzemplo, kiu montras la problemon: .komponento-unu { /* komponaj stiloj */ animacio: pulso 1s ease-in-out senfina alterna; }
/* ĉi tiu @keyframes-difino ne funkcios */ @keyframes pulso { de { skalo: 1; } al { skalo: 1,1; } }
/* poste en la kodo... */
.komponanto-du { /* komponaj stiloj */ animacio: pulso 1s ease-in-out senfina; }
/* ĉi tiuj ŝlosilkadroj aplikiĝos al ambaŭ komponantoj */ @keyframes pulso { 0%, 20%, 100% { skalo: 1; } 10%, 40% { skalo: 1,2; } }
Ambaŭ komponantoj uzas la saman animacian nomon, sed la dua @keyframes-difino anstataŭigas la unuan. Nun kaj komponento-unu kaj komponento-du uzos la duajn ŝlosilkadrojn, sendepende de kiu komponento difinis kiuj ŝlosilkadroj. Vidu la Pen Keyframes Tokens - Demo 1 [forkigita] de Amit Sheen. La plej malbona parto? Ĉi tio ofte funkcias perfekte en loka evoluo sed rompiĝas mistere en produktado kiam konstruprocezoj ŝanĝas la ŝarĝan ordon de viaj stilfolioj. Vi finas kun kuraĝigoj, kiuj kondutas malsame depende de kiuj komponantoj estas ŝarĝitaj kaj en kiu sinsekvo. La Solvo: Unuigitaj Ŝlosilkadroj La respondo al ĉi tiu kaoso estas surprize simpla: antaŭdifinitaj dinamikaj ŝlosilkadroj stokitaj en komuna stilfolio. Anstataŭ lasi ĉiun komponanton difini siajn proprajn animaciojn, ni kreas centralizitajn ŝlosilkadrojn, kiuj estas bone dokumentitaj, facile poruzebla, konservebla kaj adaptita al la specifaj bezonoj de via projekto. Pensu pri ĝi kiel ŝlosilkadrajn ĵetonojn. Same kiel ni uzas ĵetonojn por koloroj kaj interspacigo, kaj multaj el ni jam uzas ĵetonojn por animaciaj propraĵoj, kiel daŭro kaj mildigaj funkcioj, kial ne uzi ĵetonojn ankaŭ por ŝlosilkadroj? Ĉi tiu aliro povas integriĝi nature kun iu ajn nuna dezajna ĵeton-laborfluo, kiun vi uzas, dum vi solvas ambaŭ la malgrandan problemon (kodduobligo) kaj la pli grandan problemon (tutmondaj ampleksaj konfliktoj) unufoje. La ideo estas simpla: kreu ununuran fonton de vero por ĉiuj niaj komunaj animacioj. Ĉi tiu komuna stilfolio enhavas zorge kreitajn ŝlosilkadrojn, kiuj kovras la animaciajn ŝablonojn, kiujn nia projekto efektive uzas. Ne plu divenu ĉu fada animacio jam ekzistas ie en nia kodbazo. Ne plu hazarde anstataŭi kuraĝigojn de aliaj komponantoj. Sed jen la ŝlosilo: ĉi tiuj ne estas nur senmovaj kopii-gluaj animacioj. Ili estas dezajnitaj por esti dinamikaj kaj agordeblaj per CSS kutimaj propraĵoj, permesante al ni konservi konsistencon dum daŭre havante la flekseblecon por adapti kuraĝigojn al specifaj uzkazoj, kvazaŭ vi bezonas iomete pli grandan "pulson" animacion en unu loko. Konstruante La Unuajn Ŝlosilkadrojn Token Unu el la unuaj malaltaj fruktoj, kiujn ni devus pritrakti, estas la "fade-en" animacio. En unu el miaj lastatempaj projektoj, mi trovis pli ol dekduon da apartaj faden-en-difinoj, kaj jes, ili ĉiuj simple vigligis la opakecon de 0 ĝis 1. Do, ni kreu novan stilfolion, nomu ĝin kf-tokens.css, importu ĝin en nian projekton kaj metu niajn ŝlosilkadrojn kun taŭgaj komentoj interne de ĝi. /* keyframes-tokens.css */
/* * Fade In - fade enireja animacio * Uzado: kuraĝigo: kf-fade-en 0.3s faciliĝo; */ @keyframes kf-fade-en { de { opakeco: 0; } al { opakeco: 1; } }
Ĉi tiu ununura @keyframes-deklaro anstataŭigas ĉiujn tiujn disajn faden-en-animaciojn tra nia kodbazo. Pura, simpla kaj tutmonde aplikebla. Kaj nun kiam ni havas ĉi tiun ĵetonon difinita, ni povas uzi ĝin de iu ajn komponanto tra nia projekto: .modala { animacio: kf-fade-en 0.3s facile-eliro; }
.ilotip { kuraĝigo: kf-fade-en 0.2s facile-en-el; }
.sciigo { kuraĝigo: kf-fade-en 0.5s facileco-el; }
Vidu la Pen Keyframes Tokens - Demo 2 [forkigita] de Amit Sheen. Noto: Ni uzas kf- prefikson en ĉiuj niaj @keyframes-nomoj. Ĉi tiu prefikso servas kiel nomspaco, kiu malhelpas nomkonfliktojn kun ekzistantaj kuraĝigoj en la projekto kaj tuj evidentigas, ke ĉi tiuj ŝlosilkadroj venas el nia dosiero de ŝlosilframoj-ĵetonoj. Farante Dinamika Glito La kf-fade-en-ŝlosilkadroj funkcias bonege ĉar ĝi estas simpla kaj estas malmulte da loko por fuŝi aferojn. En aliaj kuraĝigoj, tamen, ni devas esti multe pli dinamikaj, kaj ĉi tie ni povas utiligi la grandegan potencon de CSS kutimaj propraĵoj. Jen kie ŝlosilkadroj-ĵetonoj vere brilas kompare kun disaj senmovaj kuraĝigoj. Ni prenu oftan scenaron: "glit-en" animacioj. Sed gliti enen de kie? 100px de dekstre? 50% de maldekstro? Ĉu ĝi devus eniri de la supro de la ekrano? Aŭ eble flosi enen de la fundo? Tiom da eblecoj, sed anstataŭ krei apartajn ŝlosilkadrojn por ĉiu direkto kaj ĉiu vario, ni povas konstrui unu flekseblan signon kiu adaptiĝas al ĉiuj scenaroj: /* * Slide In - direkta glita kuraĝigo * Uzu --kf-gliti-de por kontroli direkton * Defaŭlte: glitas enen de maldekstre (-100%) * Uzado: * kuraĝigo: kf-gliti-en 0.3s facile-eliro; * --kf-gliti-de: -100px 0; // gliti de maldekstre * --kf-gliti-de: 100px 0; // gliti de dekstre * --kf-gliti-de: 0 -50px; // gliti de supre */
@keyframes kf-glita enen { de { traduki: var(--kf-gliti-de, -100% 0); } al { traduki: 0 0; } }
Nun ni povas uzi ĉi tiun ununuran @keyframes-ĵetonon por iu ajn glita direkto simple ŝanĝante la kutiman posedaĵon --kf-slide-from: .flanka kolumno { kuraĝigo: kf-gliti-en 0.3s ease-out; /* Uzas defaŭltan valoron: diapozitivoj de maldekstre */ }
.sciigo { kuraĝigo: kf-gliti-en 0.4s ease-out; --kf-gliti-de: 0 -50px; /* gliti de supre */ }
.modala { animacio: kf-fade-en 0.5s, kf-gliti-en 0.5s kuba-bezier (0.34, 1.56, 0.64, 1); --kf-gliti-de: 50px 50px; /* gliti de malsupre dekstre */ }
Ĉi tiu aliro donas al ni nekredeblan flekseblecon konservante konsistencon. Unu ŝlosilframa deklaro, senfinaj eblecoj. Vidu la Pen Keyframes Tokens - Demo 3 [forkigita] de Amit Sheen. Kaj se ni volas igi niajn kuraĝigojn eĉ pli flekseblaj, ebligante ankaŭ "elglitajn" efikojn, ni povassimple aldonu --kf-slide-to kutiman posedaĵon, similan al tio, kion ni vidos en la sekva sekcio. Dudirektaj Zoom Keyframes Alia ofta animacio, kiu estas duobligita tra projektoj, estas "zoom" efikoj. Ĉu ĝi estas subtila pligrandigo por tostaj mesaĝoj, drameca zomo por modaloj, aŭ milda malgrandigo por titoloj, zomaj animacioj estas ĉie. Anstataŭ krei apartajn ŝlosilkadrojn por ĉiu skalvaloro, ni konstruu unu flekseblan aron de kf-zoom ŝlosilkadroj:
/* * Zoom - skala kuraĝigo * Uzu --kf-zoom-from kaj --kf-zoom-to por kontroli skalvalorojn * Defaŭlte: zomas de 80% ĝis 100% (0,8 ĝis 1) * Uzado: * kuraĝigo: kf-zoom 0.2s facileco; * --kf-zoom-de: 0,5; --kf-zoom-to: 1; // zomi de 50% ĝis 100% * --kf-zoom-de: 1; --kf-zoom-to: 0; // zomi de 100% ĝis 0% * --kf-zoom-de: 1; --kf-zoom-to: 1.1; // zomi de 100% ĝis 110% */
@keyframes kf-zoom { de { skalo: var(--kf-zoom-de, 0,8); } al { skalo: var(--kf-zoom-to, 1); } }
Kun unu difino, ni povas atingi ajnan zom-varion, kiun ni bezonas: .toast { animacio: kf-glita enen 0.2s, kf-zoom 0.4s ease-out; --kf-gliti-de: 0 100%; /* gliti de supre */ /* Uzas defaŭltan zomon: skalas de 80% ĝis 100% */ }
.modala { animacio: kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-zoom-de: 0; /* drama zomo de 0% ĝis 100% */ }
.titolo { animacio: kf-fade-en 2s, kf-zoom 2s facileco-en; --kf-zoom-de: 1.2; --kf-zoom-to: 0,8; /* milda skalo malsupren */ }
La defaŭlto de 0.8 (80%) funkcias perfekte por la plej multaj UI-elementoj, kiel tostaj mesaĝoj kaj kartoj, kvankam tamen facile agordebla por specialaj kazoj. Vidu la Pen Keyframes Tokens - Demo 4 [forkigita] de Amit Sheen. Vi eble rimarkis ion interesan en la lastatempaj ekzemploj: ni kombinis animaciojn. Unu el la ĉefaj avantaĝoj de labori kun @keyframes-ĵetonoj estas, ke ili estas dizajnitaj por integriĝi perfekte unu kun la alia. Ĉi tiu glata komponado estas intencita, ne hazarda. Ni diskutos pri animacia komponado pli detale poste, inkluzive de kie ili povas fariĝi problemaj, sed plej multaj kombinaĵoj estas simplaj kaj facile efektivigeblaj. Noto: Skribante ĉi tiun artikolon, kaj eble pro verkado de ĝi, mi trovis min repripensi la tutan ideon de eniranimacioj. Kun ĉiuj lastatempaj progresoj en CSS, ĉu ni ankoraŭ bezonas ilin entute? Feliĉe, Adam Argyle esploris la samajn demandojn kaj esprimis ilin brile en sia blogo. Ĉi tio ne kontraŭdiras tion, kio estas skribita ĉi tie, sed ĝi prezentas aliron konsiderindajn, precipe se viaj projektoj forte dependas de eniranimacioj. Kontinuaj Animacioj Dum enirejaj kuraĝigoj, kiel "malvelki", "gliti" kaj "zomi" okazas unufoje kaj poste ĉesas, kontinuaj kuraĝigoj cirkulas senfine por atentigi aŭ indiki daŭrantan agadon. La du plej oftaj kontinuaj animacioj, kiujn mi renkontas, estas "spin" (por ŝarĝi indikilojn) kaj "pulse" (por reliefigi gravajn elementojn). Ĉi tiuj kuraĝigoj prezentas unikajn defiojn kiam temas pri krei ŝlosilkadrajn ĵetonojn. Male al enirejaj animacioj, kiuj kutime iras de unu ŝtato al alia, kontinuaj animacioj devas esti tre agordeblaj en siaj kondutpadronoj. La Spino-Doktoro Ĉiu projekto ŝajnas uzi plurajn turnajn kuraĝigojn. Iuj turniĝas dekstrume, aliaj maldekstrume. Iuj faras ununuran 360-gradan rotacion, aliaj faras plurajn turnojn por pli rapida efiko. Anstataŭ krei apartajn ŝlosilkadrojn por ĉiu vario, ni konstruu unu flekseblan spinon, kiu pritraktas ĉiujn scenarojn:
/* * Spin - rotacia kuraĝigo * Uzu --kf-spin-from kaj --kf-spin-to por kontroli rotacian gamon * Uzu --kf-spin-turns por kontroli rotacian kvanton * Defaŭlte: turniĝas de 0° ĝis 360° (1 plena rotacio) * Uzado: * kuraĝigo: kf-spin 1s lineara senfina; * --kf-spin-turnoj: 2; // 2 plenaj rotacioj * --kf-spin-de: 0deg; --kf-spin-to: 180deg; // duonrotacio * --kf-spin-de: 0deg; --kf-spin-to: -360deg; // maldekstrume */
@keyframes kf-spin { de { turni: var(--kf-spin-de, 0deg); } al { turni: calc(var(--kf-spin-de, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turnoj, 1)); } }
Nun ni povas krei ajnan spin-varion, kiun ni ŝatas:
.loading-spinner { kuraĝigo: kf-spin 1s lineara senfina; /* Uzas defaŭltan: turniĝas de 0° ĝis 360° */ }
.rapida ŝargilo { kuraĝigo: kf-spin 1.2s facileco-en-el senfina alterna; --kf-spin-turnoj: 3; /* 3 plenaj rotacioj por ĉiu direkto per ciklo*/ }
.paŝita-inversa { animacio: kf-spin 1.5s paŝoj(8) senfina; --kf-spin-to: -360deg; /* maldekstrume */ }
.subtle-wiggle { animacio: kf-spin 2s facileco-en-el senfina alterna; --kf-spin-de: -16deg; --kf-spin-to: 32deg; /* skui 36 gradojn: inter -18° kaj +18° */ }
Vidu la Pen Keyframes Tokens - Demo 5 [forkigita] de Amit Sheen. La beleco de ĉi tiu aliro estas, ke la samaj ŝlosilkadroj funkcias por ŝarĝo de ŝpiniloj, rotaciaj ikonoj, svingefektoj kaj eĉ kompleksaj plurturnaj animacioj. La Pulso-Paradokso Pulsaj animacioj estas pli malfacilaj ĉar ili povas "pulsi" malsamajn ecojn. Iuj premas la skalon, aliaj premas la opakecon, kaj iuj pulsaj kolorpropraĵoj kiel brileco aŭ saturiĝo. Prefere ol krei apartajn ŝlosilkadrojn por ĉiu posedaĵo, ni povas krei ŝlosilkadrojn kiuj funkcias kun iu ajn CSS-posedaĵo. Jen ekzemplo de pulsa ŝlosilkadro kun opcioj de skalo kaj opakeco:
/* * Pulso - pulsa animacio * Uzu --kf-pulse-scale-from kaj --kf-pulse-scale-to por kontroli skalan gamon * Uzu --kf-pulse-opacity-from kaj --kf-pulse-opacity-to por kontroli opakcecon * Defaŭlte: neniu pulso (ĉiuj valoroj 1) * Uzado: * kuraĝigo: kf-pulse 2s facileco-en-el senfina alterna; * --kf-pulso-skalo-de: 0,95; --kf-pulse-scale-to: 1.05; // skalo pulso * --kf-pulso-opakeco-de: 0,7; --kf-pulso-opakeco-to: 1; // opakecpulso */
@keyframes kf-pulse { de { skalo: var(--kf-pulso-skalo-de, 1); opakeco: var(--kf-pulso-opakeco-de, 1); } al { skalo: var(--kf-pulso-skalo-to, 1); opakeco: var(--kf-pulso-opakeco-to, 1); } }
Ĉi tio kreas flekseblan pulson kiu povas animi plurajn trajtojn: .voko al ago { animacio: kf-pulso 0,6s senfina alterna; --kf-pulso-opakeco-de: 0,5; /* opakecpulso */ }
.sciigo-punkto { animacio: kf-pulso 0.6s facileco-en-el senfina alterna; --kf-pulso-skalo-de: 0,9; --kf-pulse-scale-to: 1.1; /* skala pulso */ }
.text-highlight { animacio: kf-pulso 1.5s ease-out senfina; --kf-pulso-skalo-de: 0,8; --kf-pulso-opakeco-de: 0,2; /* skalo kaj opakecpulso */ }
Vidu la Pen Keyframes Tokens - Demo 6 [forkigita] de Amit Sheen. Ĉi tiu unuopa kf-pulsa ŝlosilkadro povas pritrakti ĉion, de subtilaj atentokaptoj ĝis dramaj kulminaĵoj, ĉio estante facile personigebla. Altnivela Malpezigo Unu el la bonegaj aferoj pri uzado de ŝlosilkadroj-ĵetonoj estas kiom facile estas vastigi nian animacian bibliotekon kaj provizi efikojn, kiujn plej multaj programistoj ne ĝenus skribi de nulo, kiel elasta aŭ resalto. Jen ekzemplo de simpla "resalto" ŝlosilkadroj-ĵetono, kiu uzas --kf-bounce-from kutiman posedaĵon por kontroli la saltalton. /* * Resalto - resalta enireja animacio * Uzu --kf-bounce-from por kontroli saltecon * Defaŭlte: saltas de 100vh (for ekrano) * Uzado: * kuraĝigo: kf-bonce 3s facileco; * --kf-bonce-de: 200px; // salti de 200px alteco */
@keyframes kf-bonce { 0% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -1); }
34% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.4); }
55% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.2); }
72% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.1); }
85% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.05); }
94% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.025); }
99% { traduki: 0 calc(var(--kf-bonce-from, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { traduki: 0 0; animation-timing-function: malfaciligi; } }
Animacioj kiel "elasta" estas iom pli malfacilaj pro la kalkuloj ene de la ŝlosilkadroj. Ni devas difini --kf-elastic-from-X kaj --kf-elastic-from-Y aparte (ambaŭ estas laŭvolaj), kaj kune ili lasas nin krei elastan enirejon de iu punkto sur la ekrano.
/* * Elasta En - elasta enireja kuraĝigo * Uzu --kf-elastic-from-X kaj --kf-elastic-from-Y por kontroli komencan pozicion * Defaŭlte: eniras de supra centro (0, -100vh) * Uzado: * kuraĝigo: kf-elastic-in 2s ease-in-out ambaŭ; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // enigu de (-50px, -200px) */
@keyframes kf-elastic-in { 0% { traduku: calc(var(--kf-elasta-de-X, -50vw) * 1) calc(var(--kf-elasta-de-Y, 0px) * 1); }
16% { traduku: calc(var(--kf-elastic-de-X, -50vw) * -0.3227) calc(var(--kf-elastic-de-Y, 0px) * -0.3227); }
28% { traduku: calc(var(--kf-elastic-from-X, -50vw) * 0.1312)calc(var(--kf-elasta-de-Y, 0px) * 0.1312); }
44% { traduki: calc(var(--kf-elastic-de-X, -50vw) * -0.0463) calc(var(--kf-elastic-de-Y, 0px) * -0.0463); }
59% { traduki: calc(var(--kf-elastic-de-X, -50vw) * 0.0164) calc(var(--kf-elastic-de-Y, 0px) * 0.0164); }
73% { traduki: calc(var(--kf-elastic-de-X, -50vw) * -0.0058) calc(var(--kf-elastic-de-Y, 0px) * -0.0058); }
88% { traduki: calc(var(--kf-elastic-de-X, -50vw) * 0.0020) calc(var(--kf-elastic-de-Y, 0px) * 0.0020); }
100% { traduki: 0 0; } }
Ĉi tiu aliro faciligas reuzi kaj personecigi altnivelajn ŝlosilkadrojn tra nia projekto, nur ŝanĝante ununuran kutiman posedaĵon.
.resalto-kaj-zomi { animacio: kf-resalto 3s facileco, kf-zoom 3s lineara; --kf-zoom-de: 0; }
.resalto-kaj-gliti { animacio-komponado: aldoni; /* Ambaŭ animacioj uzas traduki */ animacio: kf-resalto 3s facileco, kf-glit-enen 3s facile-eksteren; --kf-gliti-de: -200px; }
.elastic-in { animacio: kf-elastic-in 2s ease-in-out ambaŭ; }
Vidu la Pen Keyframes Tokens - Demo 7 [forkigita] de Amit Sheen. Ĝis ĉi tiu punkto, ni vidis kiel ni povas plifirmigi ŝlosilkadrojn en inteligenta kaj efika maniero. Kompreneble, vi eble volas ĝustigi aferojn por pli bone konveni la bezonojn de via projekto, sed ni kovris ekzemplojn de pluraj oftaj kuraĝigoj kaj ĉiutagaj uzkazoj. Kaj kun ĉi tiuj ŝlosilkadraj ĵetonoj, ni nun havas potencajn konstrubriketojn por krei konsekvencajn, konserveblajn kuraĝigojn tra la tuta projekto. Ne plu duobligitaj ŝlosilkadroj, ne plu tutmondaj ampleksaj konfliktoj. Nur pura, oportuna maniero trakti ĉiujn niajn kuraĝigajn bezonojn. Sed la vera demando estas: Kiel ni kunmetas ĉi tiujn konstrubriketojn kune? Kunmetante Ĉion Ni vidis, ke kombini bazajn ŝlosilkadrajn ĵetonojn estas simpla. Ni bezonas nenion specialan sed difini la unuan animacion, difini la duan, agordi la variablojn laŭbezone, kaj jen ĝi. /* Fado + gliti */ .toast { animacio: kf-fade-en 0.4s, kf-gliti-en 0.4s kuba-bezier (0.34, 1.56, 0.64, 1); --kf-gliti-de: 0 40px; }
/* Zomi + fado */ .modala { animacio: kf-fade-en 0.3s, kf-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); --kf-zoom-de: 0,7; --kf-zoom-to: 1; }
/* Gliti en + pulso */ .sciigo { animacio: kf-glita enen 0.5s, kf-pulso 1.2s facileco-en-el senfina alterna; --kf-gliti-de: -100px 0; --kf-pulso-skalo-de: 0,95; --kf-pulse-scale-to: 1.05; }
Tiuj ĉi kombinaĵoj funkcias bele ĉar ĉiu animacio celas malsaman econ: opakecon, transformi (traduki/skali), ktp. Sed foje estas konfliktoj, kaj ni bezonas scii kial kaj kiel trakti ilin. Kiam du animacioj provas vigligi la saman posedaĵon - ekzemple, ambaŭ vigligante skalon aŭ ambaŭ vigligante opakecon - la rezulto ne estos tia, kion vi atendas. Defaŭlte, nur unu el la animacioj estas efektive aplikata al tiu posedaĵo, kiu estas la lasta en la animacia listo. Ĉi tio estas limigo de kiel CSS pritraktas plurajn kuraĝigojn sur la sama posedaĵo. Ekzemple, ĉi tio ne funkcios kiel celite ĉar nur la kf-pulsa animacio aplikiĝos. .malbon-kombo { animacio: kf-zoom 0.5s antaŭen, kf-pulso 1.2s senfina alterna; --kf-zoom-de: 0,5; --kf-zoom-to: 1.2; --kf-pulso-skalo-de: 0,8; --kf-pulse-scale-to: 1.1; }
Animacia Aldono La plej simpla kaj rekta maniero trakti plurajn animaciojn, kiuj influas la saman posedaĵon, estas uzi la animacio-kunmetaĵon. En la lasta ekzemplo supre, la kf-pulsa animacio anstataŭigas la kf-zoom animacion, do ni ne vidos la komencan zomon kaj ne ricevos la atendatan skalon de 1.2. Agordante la animacio-kunmetaĵon por aldoni, ni diras al la retumilo kombini ambaŭ kuraĝigojn. Ĉi tio donas al ni la rezulton, kiun ni volas. .komponanto-du { animacio-komponado: aldoni; }
Vidu la Pen Keyframes Tokens - Demo 8 [forkigita] de Amit Sheen. Ĉi tiu aliro funkcias bone por plej multaj kazoj, kie ni volas kombini efikojn sur la sama posedaĵo. Ĝi ankaŭ estas utila kiam ni bezonas kombini kuraĝigojn kun senmovaj posedaĵvaloroj. Ekzemple, se ni havas elementon, kiu uzas la tradukan posedaĵon por poziciigi ĝin ĝuste kie ni volas, kaj tiam ni volas vigligi ĝin per la kf-glit-enaj ŝlosilkadroj, ni ricevas aĉan videblan salton sen kuraĝigo-kunmetaĵo. Vidu la Pen Keyframes Tokens - Demo 9 [forkigita] de Amit Sheen. Kun kuraĝigo-komponado aldonita, la kuraĝigo estas glate kombinita kun la ekzistantatransformi, do la elemento restas en loko kaj animas kiel atendite. Animacio Ŝanceliĝu Alia maniero manipuli plurajn animaciojn estas "ŝanceligi" ilin - tio estas, komenci la duan animacion iomete post kiam la unua finiĝas. Ĝi ne estas solvo, kiu funkcias por ĉiu kazo, sed ĝi estas utila kiam ni havas eniranimacion sekvitan de kontinua animacio. /* fado + opakecpulso */ .sciigo { animacio: kf-fade-en 2s malfaciligo, kf-pulso 0.5s 2s facileco-en-el senfina alterna; --kf-pulso-opakeco-to: 0,5; }
Vidu la Pen Keyframes Tokens - Demo 10 [forkigita] de Amit Sheen. Order Matters Granda parto de la kuraĝigoj, kun kiuj ni laboras, uzas la transform-posedaĵon. Plejofte, ĉi tio estas simple pli oportuna. Ĝi ankaŭ havas rendimentan avantaĝon ĉar transformanimacioj povas esti GPU-akcelitaj. Sed se ni uzas transformojn, ni devas akcepti, ke gravas la ordo en kiu ni faras niajn transformojn. Multe. En niaj ŝlosilkadroj ĝis nun, ni uzis individuajn transformojn. Laŭ la specifoj, ĉi tiuj ĉiam estas aplikataj en fiksa ordo: unue, la elemento estas tradukita, poste turnita, poste skalo. Ĉi tio havas sencon kaj estas kion la plej multaj el ni atendas. Tamen, se ni uzas la transforman posedaĵon, la ordo en kiu la funkcioj estas skribitaj estas la ordo en kiu ili estas aplikataj. En ĉi tiu kazo, se ni movas ion 100 pikselojn sur la X-akso kaj poste turnas ĝin je 45 gradoj, tio ne estas la sama kiel unue turni ĝin je 45 gradoj kaj poste movi ĝin 100 pikselojn. /* Rozkolora kvadrato: Unue traduku, poste turnu */ .ekzemplo-unu { transformi: tradukiX(100px) turni(45deg); }
/* Verda kvadrato: Unue turnu, poste traduku */ .ekzemplo-du { transformi: turni(45deg) tradukiX(100px); }
Vidu la Pen Keyframes Tokens - Demo 11 [forkigita] de Amit Sheen. Sed laŭ la transformordo, ĉiuj individuaj transformoj - ĉio, kion ni uzis por la ŝlosilkadroj-ĵetonoj - okazas antaŭ la transformfunkcioj. Tio signifas, ke ĉio, kion vi starigis en la transform-posedaĵo, okazos post la kuraĝigoj. Sed se vi agordas, ekzemple, traduki kune kun la kf-spin ŝlosilkadroj, la tradukado okazos antaŭ la animacio. Konfuzita ankoraŭ?! Ĉi tio kondukas al situacioj kie senmovaj valoroj povas kaŭzi malsamajn rezultojn por la sama animacio, kiel en la sekva kazo:
/* Komuna animacio por ambaŭ ŝpiniloj */ .spinner { kuraĝigo: kf-spin 1s lineara senfina; }
/* Rozkolora ŝpinilo: traduku antaŭ turni (individua transformo) */ .spinner-rozkolora { traduki: 100% 50%; }
/* Verda ŝpinilo: turnu kaj poste traduku (ordo de funkcioj) */ .spinner-verda { transformi: traduki(100%, 50%); }
Vidu la Pen Keyframes Tokens - Demo 12 [forkigita] de Amit Sheen. Vi povas vidi, ke la unua ŝpinilo (rozkolora) ricevas tradukon, kiu okazas antaŭ la rotacio de kf-spin, do ĝi unue moviĝas al sia loko kaj poste turniĝas. La dua ŝpinilo (verda) ricevas translate() funkcion kiu okazas post la individua transformo, do la elemento unue turniĝas, tiam moviĝas relative al sia nuna angulo, kaj ni ricevas tiun larĝan orbitefikon. Ne, ĉi tio ne estas cimo. Ĝi estas nur unu el tiuj aferoj, kiujn ni bezonas scii pri CSS kaj memori kiam vi laboras kun pluraj kuraĝigoj aŭ multoblaj transformoj. Se necesas, vi ankaŭ povas krei plian aron de kf-spin-alt ŝlosilkadroj kiuj turnas elementojn uzante la funkcion rotate(). Reduktita Movo Kaj dum ni parolas pri alternativaj ŝlosilkadroj, ni ne povas ignori la opcion "sen animacio". Unu el la plej grandaj avantaĝoj de uzado de ŝlosilframoj-ĵetonoj estas, ke alirebleco povas esti bakita, kaj ĝi estas fakte sufiĉe facila por fari. Projektante niajn ŝlosilkadrojn kun alirebleco en menso, ni povas certigi, ke uzantoj, kiuj preferas reduktitan moviĝon, ricevu pli glatan, malpli distran sperton, sen ekstra laboro aŭ koda duobligo. La preciza signifo de "Reduktita Moviĝo" povas iomete ŝanĝiĝi de unu animacio al alia, kaj de projekto al projekto, sed jen kelkaj gravaj punktoj por konsideri: Silentigi Ŝlosilkadrojn Dum iuj kuraĝigoj povas esti mildigitaj aŭ malrapidigitaj, ekzistas aliaj, kiuj devus tute malaperi kiam reduktita moviĝo estas petita. Pulsaj kuraĝigoj estas bona ekzemplo. Por certigi, ke ĉi tiuj kuraĝigoj ne ruliĝas en reduktita mova reĝimo, ni povas simple envolvi ilin en la taŭgan amaskomunikilaron.
@media (prefers-reduktita-moviĝo: sen-prefero) { @keyfrmaes kf-pulse { de { skalo: var(--kf-pulso-skalo-de, 1); opakeco: var(--kf-pulso-opakeco-de, 1); } al { skalo: var(--kf-pulso-skalo-to, 1); opakeco:var(--kf-pulso-opakeco-to, 1); } } }
Ĉi tio certigas, ke uzantoj, kiuj agordis prefers-reduced-motion por redukti, ne vidos la animacion kaj ricevos sperton, kiu kongruas kun sia prefero. Tuja En Estas iuj ŝlosilkadroj, kiujn ni ne povas simple forigi, kiel enirej kuraĝigoj. La valoro devas ŝanĝiĝi, devas animi; alie, la elemento ne havos la ĝustajn valorojn. Sed en reduktita moviĝo, ĉi tiu transiro de la komenca valoro devus esti tuja. Por atingi ĉi tion, ni difinos kroman aron de ŝlosilkadroj kie la valoro tuj saltas al la fina stato. Ĉi tiuj fariĝas niaj defaŭltaj ŝlosilkadroj. Poste, ni aldonos la regulajn ŝlosilkadrojn ene de amaskomunikila demando por preferoj-reduktita-moviĝo agordita al sen-prefero, same kiel en la antaŭa ekzemplo. /* eniru tuj por reduktita moviĝo */ @keyframes kf-zoom { de, al { skalo: var(--kf-zoom-to, 1); } }
@media (prefers-reduktita-moviĝo: sen-prefero) { /* Originalaj zomaj ŝlosilkadroj */ @keyframes kf-zoom { de { skalo: var(--kf-zoom-de, 0,8); } al { skalo: var(--kf-zoom-to, 1); } } }
Tiel, uzantoj, kiuj preferas reduktitan moviĝon, vidos la elementon aperi tuj en ĝia fina stato, dum ĉiuj aliaj ricevas la viglan transiron. La Mola Aliro Estas kazoj kie ni volas konservi iom da movado, sed multe pli milda kaj pli trankvila ol la originala animacio. Ekzemple, ni povas anstataŭigi resaltan enirejon per milda fade-en.
@keyframes kf-bonce { /* Mola fade-en por reduktita moviĝo */ }
@media (prefers-reduktita-moviĝo: sen-prefero) { @keyframes kf-bonce { /* Originalaj resaltaj ŝlosilkadroj */ } }
Nun uzantoj kun reduktita moviĝo ebligita ankoraŭ ricevas senton de aspekto, sed sen la intensa movado de resalto aŭ elasta animacio. Kun la konstrubriketoj en loko, la sekva demando estas kiel fari ilin parto de la reala laborfluo. Skribi flekseblajn ŝlosilkadrojn estas unu afero, sed fari ilin fidindaj tra granda projekto postulas kelkajn strategiojn, kiujn mi devis lerni malfacile. Efektivigaj Strategioj & Plej Bonaj Praktikoj Post kiam ni havas solidan bibliotekon de ŝlosilkadroj-ĵetonoj, la vera defio estas kiel alporti ilin en ĉiutagan laboron.
La tento estas enmeti ĉiujn ŝlosilkadrojn samtempe kaj deklari la problemon solvita, sed praktike mi trovis, ke la plej bonaj rezultoj venas de laŭgrada adopto. Komencu per la plej oftaj kuraĝigoj, kiel fade aŭ gliti. Ĉi tiuj estas facilaj venkoj, kiuj montras tujan valoron sen postuli grandajn reverkojn. Nomado estas alia punkto, kiu meritas atenton. Konsekvenca prefikso aŭ nomspaco evidentigas, kiuj animacioj estas ĵetonoj kaj kiuj estas lokaj unufojaj. Ĝi ankaŭ malhelpas hazardajn koliziojn kaj helpas novajn teamanojn rekoni la komunan sistemon tuj. Dokumentado estas same grava kiel la kodo mem. Eĉ mallonga komento super ĉiu ŝlosilframa ĵetono povas ŝpari horojn da divenado poste. Programisto devus povi malfermi la tokens-dosieron, skani por la efiko, kiun ili bezonas, kaj kopii la uzpadronon rekte en sian komponanton. Fleksebleco estas kio faras ĉi tiun aliron valora la peno. Eksponante prudentajn kutimajn proprietojn, ni donas al teamoj spacon por adapti la animacion sen rompi la sistemon. Samtempe, provu ne tro kompliki. Provizu la kapetojn kiuj gravas kaj tenu la reston opiniema. Fine, memoru alireblecon. Ne ĉiu animacio bezonas reduktitan moviĝan alternativon, sed multaj faras. Baki ĉi tiujn alĝustigojn frue signifas, ke ni neniam devas renovigi ilin poste, kaj ĝi montras nivelon de zorgo, kiun niaj uzantoj rimarkos eĉ se ili neniam mencias ĝin.
Laŭ mia sperto, trakti ŝlosilkadrajn ĵetonojn kiel parton de nia laborfluo de dezajnaj ĵetonoj estas kio igas ilin algluiĝi. Post kiam ili estas en la loko, ili ĉesas sentiĝi kiel specialaj efektoj kaj fariĝas parto de la dezajnlingvo, natura etendaĵo de kiel la produkto moviĝas kaj respondas. Envolvante Animacioj povas esti unu el la plej ĝojaj partoj de konstruado de interfacoj, sed sen strukturo, ili ankaŭ povas iĝi unu el la plej grandaj fontoj de frustriĝo. Traktante ŝlosilkadrojn kiel ĵetonojn, vi prenas ion, kio estas kutime senorda kaj malfacile administrebla, kaj igas ĝin klara, antaŭvidebla sistemo. La vera valoro ne estas nur ŝpari kelkajn liniojn de kodo. Estas en la fido, ke kiam vi uzas fade, gliti, zomi aŭ turni, vi scias precize kiel ĝi kondutos tra la projekto. Ĝi estas en la fleksebleco, kiu venas de kutimaj propraĵoj sen la kaoso de senfinaj variadoj. Kaj ĝi estas en la alirebleco konstruita en la fundamenton prefere ol aldonita kielpostpenso. Mi vidis ĉi tiujn ideojn funkcii en malsamaj teamoj kaj malsamaj kodbazoj, kaj la ŝablono ĉiam estas la sama. Post kiam la ĵetonoj estas en loko, ŝlosilkadroj ĉesas esti disa kolekto de lertaĵoj kaj fariĝas parto de la dezajnlingvo. Ili igas la produkton sentiĝi pli intencita, pli konsekvenca kaj pli viva. Se vi prenas unu aferon el ĉi tiu artikolo, ĝi estu ĉi tio: kuraĝigoj meritas la saman zorgon kaj strukturon, kiujn ni jam donas al koloroj, tipografio kaj interspaco. Malgranda investo en ŝlosilframoj-ĵetonoj pagas ĉiufoje kiam via interfaco moviĝas.
