Stel jou voor: jy sluit by 'n nuwe projek aan, duik in die kodebasis in, en binne die eerste paar uur ontdek jy iets frustrerend bekend. Verspreid deur die stylblaaie vind jy verskeie @keyframes-definisies vir dieselfde basiese animasies. Drie verskillende vervaag-effekte, twee of drie skyfievariasies, 'n handvol zoom-animasies, en ten minste twee verskillende draai-animasies, want, wel, hoekom nie? @keyframes puls { van { skaal: 1; } aan { skaal: 1.1; } }
@keyframes groter-puls { 0%, 20%, 100% { skaal: 1; } 10%, 40% { skaal: 1.2; } }
As hierdie scenario bekend klink, is jy nie alleen nie. In my ervaring oor verskeie projekte, is een van die mees konsekwente vinnige oorwinnings wat ek kan lewer, die konsolidering en standaardisering van sleutelrame. Dit het so 'n betroubare patroon geword dat ek nou uitsien na hierdie skoonmaak as een van my eerste take op enige nuwe kodebasis. Die Logika Agter Die Chaos Hierdie oortolligheid maak volkome sin as jy daaraan dink. Ons gebruik almal dieselfde fundamentele animasies in ons daaglikse werk: vervaag, skyfies, zoem, draai en ander algemene effekte. Hierdie animasies is redelik eenvoudig, en dit is maklik om 'n vinnige @keyframes-definisie op te sweep om die werk gedoen te kry. Sonder 'n gesentraliseerde animasiestelsel skryf ontwikkelaars natuurlik hierdie sleutelrame van nuuts af, onbewus daarvan dat soortgelyke animasies reeds elders in die kodebasis bestaan. Dit is veral algemeen wanneer ons in komponentgebaseerde argitekture werk (wat die meeste van ons deesdae doen), aangesien spanne dikwels parallel oor verskillende dele van die toepassing werk. Die resultaat? Animasie chaos. Die Klein Probleem Die mees voor die hand liggende probleme met duplisering van sleutelraamwerke is vermorste ontwikkelingstyd en onnodige kode-opblaas. Veelvuldige sleutelraamdefinisies beteken verskeie plekke om op te dateer wanneer vereistes verander. Moet u die tydsberekening van u vervaag-animasie aanpas? Jy sal elke instansie oor jou kodebasis moet soek. Wil jy verligtingsfunksies standaardiseer? Sterkte met die vind van al die variasies. Hierdie vermenigvuldiging van onderhoudspunte maak selfs eenvoudige animasie-opdaterings 'n tydrowende taak. Die groter probleem Hierdie duplisering van sleutelraamwerke skep 'n veel meer verraderlike probleem wat onder die oppervlak skuil: die globale omvang-lokval. Selfs wanneer daar met komponent-gebaseerde argitekture gewerk word, word CSS-sleutelrame altyd in die globale omvang gedefinieer. Dit beteken dat alle sleutelrame op alle komponente van toepassing is. Altyd. Ja, jou animasie gebruik nie noodwendig die sleutelrame wat jy in jou komponent gedefinieer het nie. Dit gebruik die laaste sleutelrame wat ooreenstem met presies dieselfde naam wat in die globale omvang gelaai is. Solank al jou sleutelrame identies is, kan dit na 'n geringe probleem lyk. Maar die oomblik as jy 'n animasie vir 'n spesifieke gebruiksgeval wil aanpas, is jy in die moeilikheid, of erger nog, jy sal die een wees wat dit veroorsaak. Óf jou animasie sal nie werk nie, want 'n ander komponent wat ná joune gelaai is, wat jou sleutelrame oorskryf, óf jou komponent laai laaste en verander per ongeluk die animasiegedrag vir elke ander komponent wat daardie sleutelraam se naam gebruik, en jy sal dit dalk nie eers besef nie. Hier is 'n eenvoudige voorbeeld wat die probleem demonstreer: .component-one { /* komponentstyle */ animasie: pols 1s gemak-in-uit oneindige alternatiewe; }
/* hierdie @keyframes-definisie sal nie werk nie */ @keyframes puls { van { skaal: 1; } aan { skaal: 1.1; } }
/* later in die kode... */
.component-twee { /* komponentstyle */ animasie: pols 1s gemak-in-uit oneindig; }
/* hierdie sleutelraamwerke sal van toepassing wees op beide komponente */ @keyframes puls { 0%, 20%, 100% { skaal: 1; } 10%, 40% { skaal: 1.2; } }
Albei komponente gebruik dieselfde animasienaam, maar die tweede @keyframes-definisie oorskryf die eerste een. Nou sal beide komponent-een en komponent-twee die tweede sleutelrame gebruik, ongeag watter komponent watter sleutelrame gedefinieer het. Sien die Pen Keyframes Tokens - Demo 1 [gevurk] deur Amit Sheen. Die ergste deel? Dit werk dikwels perfek in plaaslike ontwikkeling, maar breek geheimsinnig in produksie wanneer bouprosesse die laaivolgorde van jou stylblaaie verander. Jy eindig met animasies wat anders optree, afhangende van watter komponente gelaai is en in watter volgorde. Die oplossing: verenigde sleutelrame Die antwoord op hierdie chaos is verbasend eenvoudig: voorafbepaalde dinamiese sleutelrame gestoor in 'n gedeelde stylblad. In plaas daarvan om elke komponent sy eie animasies te laat definieer, skep ons gesentraliseerde sleutelrame wat goed gedokumenteer is, maklik omgebruik, onderhoubaar en aangepas by die spesifieke behoeftes van jou projek. Dink daaraan as sleutelrame-tokens. Net soos ons tokens vir kleure en spasiëring gebruik, en baie van ons reeds gebruik tokens vir animasie-eienskappe, soos tydsduur en verligtingsfunksies, waarom nie ook tekens vir sleutelrame gebruik nie? Hierdie benadering kan natuurlik integreer met enige huidige ontwerptoken-werkvloei wat jy gebruik, terwyl beide die klein probleem (kodeduplisering) en die groter probleem (globale omvangkonflikte) in een slag opgelos word. Die idee is eenvoudig: skep 'n enkele bron van waarheid vir al ons algemene animasies. Hierdie gedeelde stylblad bevat sorgvuldig vervaardigde sleutelrame wat die animasiepatrone dek wat ons projek eintlik gebruik. Moenie meer raai of 'n vervaag-animasie reeds iewers in ons kodebasis bestaan nie. Nie meer per ongeluk oorskryf animasies van ander komponente. Maar hier is die sleutel: dit is nie net statiese kopieer-plak-animasies nie. Hulle is ontwerp om dinamies en aanpasbaar te wees deur CSS-pasgemaakte eienskappe, wat ons in staat stel om konsekwentheid te handhaaf terwyl ons steeds die buigsaamheid het om animasies aan te pas by spesifieke gebruiksgevalle, soos as jy 'n effens groter "puls"-animasie op een plek nodig het. Die bou van die eerste sleutelrame-token Een van die eerste laaghangende vrugte wat ons moet aanpak, is die "fade-in"-animasie. In een van my onlangse projekte het ek meer as 'n dosyn afsonderlike vervaagde definisies gevind, en ja, hulle het almal eenvoudig die ondeursigtigheid van 0 tot 1 geanimeer. So, kom ons skep 'n nuwe stylblad, noem dit kf-tokens.css, voer dit in ons projek in, en plaas ons sleutelrame met behoorlike opmerkings daarin. /* keyframes-tokens.css */
/* * Fade In - vervaag ingang animasie * Gebruik: animasie: kf-vervaag-in 0.3s gemak-uit; */ @keyframes kf-vervaag-in { van { ondeursigtigheid: 0; } aan { ondeursigtigheid: 1; } }
Hierdie enkele @keyframes-verklaring vervang al daardie verspreide vervaag-animasies oor ons kodebasis. Skoon, eenvoudig en wêreldwyd toepaslik. En noudat ons hierdie teken gedefinieer het, kan ons dit van enige komponent regdeur ons projek gebruik: .modal { animasie: kf-vervaag-in 0.3s gemak-uit; }
.tooltip { animasie: kf-vervaag-in 0.2s gemak-in-uit; }
.kennisgewing { animasie: kf-vervaag-in 0.5s gemak-uit; }
Sien die Pen Keyframes Tokens - Demo 2 [gevurk] deur Amit Sheen. Let wel: Ons gebruik 'n kf- voorvoegsel in al ons @keyframes name. Hierdie voorvoegsel dien as 'n naamruimte wat naamkonflik met bestaande animasies in die projek voorkom en maak dit onmiddellik duidelik dat hierdie sleutelrame van ons sleutelrame-tokenslêer kom. Maak 'n dinamiese skyfie Die kf-vervaag-sleutelrame werk uitstekend, want dit is eenvoudig en daar is min ruimte om dinge deurmekaar te maak. In ander animasies moet ons egter baie meer dinamies wees, en hier kan ons die enorme krag van CSS-pasgemaakte eienskappe benut. Dit is waar sleutelrame-tokens werklik skyn in vergelyking met verspreide statiese animasies. Kom ons neem 'n algemene scenario: "inskuif"-animasies. Maar gly in van waar? 100px van regs af? 50% van links? Moet dit vanaf die bokant van die skerm ingaan? Of dalk van onder af indryf? Soveel moontlikhede, maar in plaas daarvan om aparte sleutelrame vir elke rigting en elke variasie te skep, kan ons een buigsame teken bou wat by alle scenario's aanpas: /* * Slide In - rigtingskyfie-animasie * Gebruik --kf-slide-van om rigting te beheer * Verstek: gly in van links (-100%) * Gebruik: * animasie: kf-gly-in 0.3s gemak-uit; * --kf-skyfie-vanaf: -100px 0; // gly van links * --kf-skyfie-vanaf: 100px 0; // gly van regs * --kf-skyfie-vanaf: 0 -50px; // gly van bo af */
@keyframes kf-slide-in { van { vertaal: var(--kf-skyfie-van, -100% 0); } aan { vertaal: 0 0; } }
Nou kan ons hierdie enkele @keyframes-token vir enige skyfierigting gebruik bloot deur die --kf-slide-from persoonlike eienskap te verander: .sidebar { animasie: kf-gly-in 0.3s gemak-uit; /* Gebruik verstekwaarde: skyfies van links */ }
.kennisgewing { animasie: kf-gly-in 0.4s gemak-uit; --kf-skyfie-vanaf: 0 -50px; /* gly van bo af */ }
.modal { animasie: kf-vervaag-in 0.5s, kf-gly-in 0.5s kubieke bezier(0.34, 1.56, 0.64, 1); --kf-skyfie-van: 50px 50px; /* gly van onder-regs */ }
Hierdie benadering gee ons ongelooflike buigsaamheid terwyl ons konsekwentheid behou. Een sleutelraamverklaring, oneindige moontlikhede. Sien die Pen Keyframes Tokens - Demo 3 [gevurk] deur Amit Sheen. En as ons ons animasies selfs meer buigsaam wil maak, wat ook "uitgly-effekte" toelaat, kan onsvoeg eenvoudig 'n --kf-slide-to pasgemaakte eiendom by, soortgelyk aan wat ons in die volgende afdeling sal sien. Tweerigtingzoem sleutelrame Nog 'n algemene animasie wat oor projekte gedupliseer word, is "zoom"-effekte. Of dit nou 'n subtiele opskaal vir roosterbroodboodskappe is, 'n dramatiese inzoom vir modale, of 'n sagte afskaal-effek vir opskrifte, inzoom-animasies is oral. In plaas daarvan om aparte sleutelrame vir elke skaalwaarde te skep, kom ons bou een buigsame stel kf-zoom sleutelrame:
/* * Zoom - skaal animasie * Gebruik --kf-zoom-from en --kf-zoom-to om skaalwaardes te beheer * Verstek: zoem van 80% tot 100% (0,8 tot 1) * Gebruik: * animasie: kf-zoom 0.2s gemak-uit; * --kf-zoem-vanaf: 0,5; --kf-zoem-na: 1; // zoem van 50% tot 100% * --kf-zoem-vanaf: 1; --kf-zoem-na: 0; // zoem van 100% tot 0% * --kf-zoem-vanaf: 1; --kf-zoom-tot: 1.1; // zoem van 100% tot 110% */
@keyframes kf-zoom { van { skaal: var(--kf-zoem-vanaf, 0,8); } aan { skaal: var(--kf-zoom-tot, 1); } }
Met een definisie kan ons enige zoomvariasie bereik wat ons benodig: .toast { animasie: kf-gly-in 0.2s, kf-zoom 0.4s gemak-uit; --kf-skyfie-vanaf: 0 100%; /* gly van bo af */ /* Gebruik verstekzoem: skaal van 80% tot 100% */ }
.modal { animasie: kf-zoom 0.3s kubieke bezier(0.34, 1.56, 0.64, 1); --kf-zoem-vanaf: 0; /* dramatiese zoem van 0% tot 100% */ }
.heading { animasie: kf-vervaag-in 2s, kf-zoom 2s gemak-in; --kf-zoem-vanaf: 1.2; --kf-zoem-na: 0.8; /* ligte skaal af */ }
Die verstek van 0.8 (80%) werk perfek vir die meeste UI-elemente, soos roosterbroodboodskappe en -kaarte, terwyl dit steeds maklik is om vir spesiale gevalle aan te pas. Sien die Pen Keyframes Tokens - Demo 4 [gevurk] deur Amit Sheen. Jy het dalk iets interessants opgemerk in die onlangse voorbeelde: ons het animasies gekombineer. Een van die belangrikste voordele om met @keyframes-tokens te werk, is dat hulle ontwerp is om naatloos met mekaar te integreer. Hierdie gladde samestelling is opsetlik, nie toevallig nie. Ons sal later animasiesamestelling in meer besonderhede bespreek, insluitend waar dit problematies kan word, maar die meeste kombinasies is eenvoudig en maklik om te implementeer. Let wel: Terwyl ek hierdie artikel geskryf het, en miskien as gevolg van die skryf daarvan, het ek gevind dat ek die hele idee van toegangsanimasies heroorweeg het. Met al die onlangse vooruitgang in CSS, het ons dit nog enigsins nodig? Gelukkig het Adam Argyle dieselfde vrae ondersoek en dit briljant in sy blog uitgedruk. Dit weerspreek nie wat hier geskryf is nie, maar dit bied 'n benadering wat die moeite werd is om te oorweeg, veral as jou projekte swaar op ingangsanimasies staatmaak. Deurlopende animasies Terwyl toegangsanimasies, soos "vervaag", "gly" en "zoem" een keer gebeur en dan stop, loop deurlopende animasies onbepaald om aandag te trek of deurlopende aktiwiteit aan te dui. Die twee mees algemene deurlopende animasies wat ek teëkom is "spin" (vir laai aanwysers) en "puls" (vir die uitlig van belangrike elemente). Hierdie animasies bied unieke uitdagings wanneer dit kom by die skep van sleutelrame-tokens. Anders as toegangsanimasies wat tipies van een staat na 'n ander gaan, moet deurlopende animasies hoogs aanpasbaar wees in hul gedragspatrone. Die Spindokter Dit lyk asof elke projek veelvuldige draai-animasies gebruik. Sommige draai kloksgewys, ander antikloksgewys. Sommige doen 'n enkele 360-grade rotasie, ander doen verskeie draaie vir 'n vinniger effek. In plaas daarvan om aparte sleutelrame vir elke variasie te skep, kom ons bou een buigsame draai wat alle scenario's hanteer:
/* * Spin - rotasie animasie * Gebruik --kf-spin-from en --kf-spin-to om rotasiereeks te beheer * Gebruik --kf-spin-draaie om die hoeveelheid rotasie te beheer * Verstek: draai van 0grade tot 360grade (1 volle rotasie) * Gebruik: * animasie: kf-spin 1s lineêr oneindig; * --kf-spin-draaie: 2; // 2 volle rotasies * --kf-spin-vanaf: 0grade; --kf-spin-tot: 180deg; // halwe rotasie * --kf-spin-vanaf: 0grade; --kf-spin-tot: -360deg; // linksom */
@keyframes kf-spin { van { draai: var(--kf-spin-van, 0grade); } aan { draai: calc(var(--kf-spin-vanaf, 0grade) + var(--kf-spin-tot, 360deg) * var(--kf-spin-draaie, 1)); } }
Nou kan ons enige spin-variasie skep waarvan ons hou:
.loading-spinner { animasie: kf-spin 1s lineêre oneindige; /* Gebruik verstek: roteer van 0deg na 360deg */ }
.fast-loader { animasie: kf-spin 1.2s gemak-in-uit oneindige alternatiewe; --kf-draai-draaie: 3; /* 3 volle rotasies vir elke rigting per siklus*/ }
.steped-reverse { animasie: kf-spin 1.5s stappe(8) oneindig; --kf-spin-tot: -360deg; /* linksom */ }
.subtle-wiggle { animasie: kf-spin 2s gemak-in-uit oneindige alternatiewe; --kf-spin-vanaf: -16deg; --kf-spin-tot: 32deg; /* wikkel 36 grade: tussen -18deg en +18deg */ }
Sien die Pen Keyframes Tokens - Demo 5 [gevurk] deur Amit Sheen. Die skoonheid van hierdie benadering is dat dieselfde sleutelrame werk vir die laai van draaiers, roterende ikone, wip-effekte en selfs komplekse multi-draai-animasies. Die Pols Paradoks Polsanimasies is moeiliker omdat hulle verskillende eienskappe kan "puls". Sommige pols die skaal, ander pols die ondeursigtigheid, en sommige pols kleur eienskappe soos helderheid of versadiging. Eerder as om aparte sleutelrame vir elke eiendom te skep, kan ons sleutelrame skep wat met enige CSS-eiendom werk. Hier is 'n voorbeeld van 'n pulssleutelraam met skaal- en ondeursigtigheidopsies:
/* * Pols - polsende animasie * Gebruik --kf-pulse-skaal-van en --kf-puls-skaal-na om skaalreeks te beheer * Gebruik --kf-pulse-opacity-from en --kf-pulse-opacity-to om ondeursigtigheidreeks te beheer * Verstek: geen polsslag (alle waardes 1) * Gebruik: * animasie: kf-puls 2s gemak-in-uit oneindige alternatiewe; * --kf-pols-skaal-vanaf: 0,95; --kf-pols-skaal-tot: 1,05; // skaal pols * --kf-puls-ondeursigtigheid-vanaf: 0,7; --kf-puls-ondeursigtigheid-tot: 1; // ondeursigtigheid pols */
@keyframes kf-puls { van { skaal: var(--kf-puls-skaal-vanaf, 1); ondeursigtigheid: var(--kf-puls-ondeursigtigheid-van, 1); } aan { skaal: var(--kf-puls-skaal-tot, 1); ondeursigtigheid: var(--kf-puls-ondeursigtigheid-tot, 1); } }
Dit skep 'n buigsame puls wat verskeie eienskappe kan animeer: .oproep-tot-aksie { animasie: kf-puls 0.6s oneindig alternatiewe; --kf-puls-ondeursigtigheid-vanaf: 0,5; /* ondeursigtigheid pols */ }
.kennisgewing-punt { animasie: kf-puls 0.6s gemak-in-uit oneindige alternatiewe; --kf-pols-skaal-vanaf: 0,9; --kf-pols-skaal-tot: 1.1; /* skaal pols */ }
.text-highlight { animasie: kf-puls 1.5s verligting oneindig; --kf-pols-skaal-vanaf: 0,8; --kf-puls-ondeursigtigheid-vanaf: 0.2; /* skaal en ondeursigtigheid pols */ }
Sien die Pen Keyframes Tokens - Demo 6 [gevurk] deur Amit Sheen. Hierdie enkele kf-puls sleutelraam kan alles hanteer van subtiele aandagtrekke tot dramatiese hoogtepunte, alles terwyl dit maklik is om aan te pas. Gevorderde verligting Een van die wonderlike dinge met die gebruik van sleutelrame-tokens is hoe maklik dit is om ons animasiebiblioteek uit te brei en effekte te verskaf wat die meeste ontwikkelaars nie van nuuts af sal doen nie, soos rek of wip. Hier is 'n voorbeeld van 'n eenvoudige "weiering" sleutelrame-token wat 'n --kf-bounce-from persoonlike eienskap gebruik om die springhoogte te beheer. /* * Weering - weerkaatsinganganimasie * Gebruik --kf-bounce-from om spronghoogte te beheer * Standaard: spring vanaf 100vh (van die skerm af) * Gebruik: * animasie: kf-bounce 3s gemak-in; * --kf-bons-vanaf: 200px; // spring vanaf 200px hoogte */
@keyframes kf-bounce { 0% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -1); }
34% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.4); }
55% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.2); }
72% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.1); }
85% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.05); }
94% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.025); }
99% { vertaal: 0 bereken (var(--kf-bons-van, 100vh) * -0.0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { vertaal: 0 0; animasie-tydsberekening-funksie: gemak-uit; } }
Animasies soos "elasties" is 'n bietjie moeiliker as gevolg van die berekeninge binne die sleutelrame. Ons moet --kf-elastic-van-X en --kf-elastic-van-Y afsonderlik definieer (albei is opsioneel), en saam laat hulle ons 'n elastiese ingang vanaf enige punt op die skerm skep.
/* * Elastiese in - elastiese ingangsanimasie * Gebruik --kf-elastic-from-X en --kf-elastic-from-Y om beginposisie te beheer * Verstek: gaan vanaf boonste middel (0, -100vh) * Gebruik: * animasie: kf-elastic-in 2s gemak-in-out beide; * --kf-elasties-van-X: -50px; * --kf-elastiek-van-Y: -200px; // voer in vanaf (-50px, -200px) */
@keyframes kf-elastic-in { 0% { vertaal: calc(var(--kf-elastic-van-X, -50vw) * 1) calc(var(--kf-elastic-van-Y, 0px) * 1); }
16% { vertaal: calc(var(--kf-elastic-van-X, -50vw) * -0.3227) calc(var(--kf-elastic-van-Y, 0px) * -0.3227); }
28% { vertaal: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-van-Y, 0px) * 0,1312); }
44% { vertaal: calc(var(--kf-elastic-van-X, -50vw) * -0.0463) calc(var(--kf-elastic-van-Y, 0px) * -0.0463); }
59% { vertaal: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73% { vertaal: calc(var(--kf-elastic-van-X, -50vw) * -0,0058) calc(var(--kf-elastic-van-Y, 0px) * -0,0058); }
88% { vertaal: calc(var(--kf-elastic-van-X, -50vw) * 0,0020) calc(var(--kf-elastic-van-Y, 0px) * 0,0020); }
100% { vertaal: 0 0; } }
Hierdie benadering maak dit maklik om gevorderde sleutelrame oor ons projek te hergebruik en aan te pas, net deur 'n enkele pasgemaakte eiendom te verander.
.hop-en-zoom { animasie: kf-bounce 3s gemak-in, kf-zoom 3s lineêr; --kf-zoem-vanaf: 0; }
.bounce-and-slide { animasie-samestelling: byvoeg; /* Beide animasies gebruik translate */ animasie: kf-bounce 3s gemak-in, kf-gly-in 3s gemak-uit; --kf-skyfie-vanaf: -200px; }
.elastic-in { animasie: kf-elastic-in 2s gemak-in-out beide; }
Sien die Pen Keyframes Tokens - Demo 7 [gevurk] deur Amit Sheen. Tot op hierdie stadium het ons gesien hoe ons sleutelrame op 'n slim en doeltreffende manier kan konsolideer. Natuurlik wil jy dalk dinge aanpas om beter by jou projek se behoeftes te pas, maar ons het voorbeelde van verskeie algemene animasies en alledaagse gebruiksgevalle gedek. En met hierdie sleutelrame-tokens in plek, het ons nou kragtige boublokke vir die skep van konsekwente, onderhoubare animasies oor die hele projek. Geen gedupliseerde sleutelrame meer nie, nie meer globale omvangkonflikte nie. Net 'n skoon, gerieflike manier om al ons animasiebehoeftes te hanteer. Maar die eintlike vraag is: Hoe stel ons hierdie boustene saam? Sit alles bymekaar Ons het gesien dat die kombinasie van basiese sleutelrame-tokens eenvoudig is. Ons het niks spesiaals nodig nie as om die eerste animasie te definieer, die tweede een te definieer, die veranderlikes te stel soos nodig, en dit is dit. /* Vervaag in + skuif in */ .toast { animasie: kf-vervaag-in 0.4s, kf-gly-in 0.4s kubieke bezier(0.34, 1.56, 0.64, 1); --kf-skyfie-vanaf: 0 40px; }
/* Zoem in + vervaag in */ .modal { animasie: kf-vervaag-in 0.3s, kf-zoom 0.3s kubieke bezier(0.34, 1.56, 0.64, 1); --kf-zoem-vanaf: 0.7; --kf-zoem-na: 1; }
/* Skuif in + pols */ .kennisgewing { animasie: kf-gly-in 0.5s, kf-puls 1.2s gemak-in-uit oneindige alternatiewe; --kf-skyfie-vanaf: -100px 0; --kf-pols-skaal-vanaf: 0,95; --kf-pols-skaal-tot: 1,05; }
Hierdie kombinasies werk pragtig omdat elke animasie 'n ander eienskap teiken: ondeursigtigheid, transformasie (vertaal/skaal), ens. Maar soms is daar konflikte, en ons moet weet hoekom en hoe om dit te hanteer. Wanneer twee animasies probeer om dieselfde eienskap te animeer - byvoorbeeld beide animasieskaal of albei animasie ondeursigtigheid - sal die resultaat nie wees wat jy verwag nie. By verstek word slegs een van die animasies werklik op daardie eiendom toegepas, wat die laaste een in die animasielys is. Dit is 'n beperking van hoe CSS veelvuldige animasies op dieselfde eiendom hanteer. Dit sal byvoorbeeld nie werk soos bedoel nie, want slegs die kf-puls-animasie sal van toepassing wees. .bad-combo { animasie: kf-zoom 0.5s vorentoe, kf-puls 1.2s oneindig afwisselend; --kf-zoem-vanaf: 0.5; --kf-zoom-na: 1.2; --kf-pols-skaal-vanaf: 0,8; --kf-pols-skaal-tot: 1.1; }
Animasie toevoeging Die eenvoudigste en mees direkte manier om veelvuldige animasies te hanteer wat dieselfde eienskap beïnvloed, is om die animasie-samestelling-eienskap te gebruik. In die laaste voorbeeld hierbo vervang die kf-puls-animasie die kf-zoom-animasie, so ons sal nie die aanvanklike zoom sien nie en sal nie die verwagte skaal van 1.2 kry nie. Deur die animasie-samestelling te stel om by te voeg, vertel ons die blaaier om beide animasies te kombineer. Dit gee ons die resultaat wat ons wil hê. .component-twee { animasie-samestelling: byvoeg; }
Sien die Pen Keyframes Tokens - Demo 8 [gevurk] deur Amit Sheen. Hierdie benadering werk goed vir die meeste gevalle waar ons effekte op dieselfde eiendom wil kombineer. Dit is ook nuttig wanneer ons animasies met statiese eienskapwaardes moet kombineer. Byvoorbeeld, as ons 'n element het wat die translate-eienskap gebruik om dit presies te posisioneer waar ons wil, en dan wil ons dit inanimeer met die kf-slide-in sleutelrame, kry ons 'n nare sigbare sprong sonder animasie-komposisie. Sien die Pen Keyframes Tokens - Demo 9 [gevurk] deur Amit Sheen. Met animasie-komposisie ingestel om by te voeg, word die animasie glad gekombineer met die bestaandetransformeer, sodat die element in plek bly en animeer soos verwag word. Animasie Stagger Nog 'n manier om veelvuldige animasies te hanteer, is om hulle te "wankel" - dit wil sê, begin die tweede animasie effens nadat die eerste een klaar is. Dit is nie 'n oplossing wat vir elke geval werk nie, maar dit is nuttig wanneer ons 'n ingangsanimasie het, gevolg deur 'n deurlopende animasie. /* vervaag + ondeursigtigheid puls */ .kennisgewing { animasie: kf-fade-in 2s gemak-uit, kf-puls 0.5s 2s gemak-in-uit oneindig alternatiewe; --kf-puls-ondeursigtigheid-tot: 0,5; }
Sien die Pen Keyframes Tokens - Demo 10 [gevurk] deur Amit Sheen. Orde maak saak 'n Groot deel van die animasies waarmee ons werk, gebruik die transform-eienskap. In die meeste gevalle is dit eenvoudig meer gerieflik. Dit het ook 'n prestasievoordeel aangesien transformasie-animasies GPU-versnel kan word. Maar as ons transformasies gebruik, moet ons aanvaar dat die volgorde waarin ons ons transformasies uitvoer saak maak. Baie. In ons sleutelrame tot dusver het ons individuele transformasies gebruik. Volgens die spesifikasies word dit altyd in 'n vaste volgorde toegepas: eers word die element vertaal, dan roteer, dan skaal. Dit maak sin en is wat die meeste van ons verwag. As ons egter die transform-eienskap gebruik, is die volgorde waarin die funksies geskryf word die volgorde waarin dit toegepas word. In hierdie geval, as ons iets 100 pixels op die X-as beweeg en dit dan met 45 grade draai, is dit nie dieselfde as om dit eers met 45 grade te draai en dan 100 pixels te beweeg nie. /* Pienk vierkant: Vertaal eers, draai dan */ .example-one { transformeer: translateX(100px) roteer(45deg); }
/* Groen vierkant: Draai eers, vertaal dan */ .example-twee { transformeer: roteer(45deg) translateX(100px); }
Sien die Pen Keyframes Tokens - Demo 11 [gevurk] deur Amit Sheen. Maar volgens die transformasiebevel vind alle individuele transformasies - alles wat ons vir die sleutelrame-tokens gebruik het - voor die transformasiefunksies plaas. Dit beteken enigiets wat jy in die transform-eienskap instel, sal ná die animasies gebeur. Maar as jy byvoorbeeld vertaal saam met die kf-spin sleutelrame instel, sal die vertaling voor die animasie gebeur. Nog verward?! Dit lei tot situasies waar statiese waardes verskillende resultate vir dieselfde animasie kan veroorsaak, soos in die volgende geval:
/* Algemene animasie vir beide draaiers */ .spinner { animasie: kf-spin 1s lineêre oneindige; }
/* Pienk draaier: vertaal voor rotasie (individuele transformasie) */ .spinner-pienk { vertaal: 100% 50%; }
/* Groen draaier: draai en vertaal dan (funksievolgorde) */ .spinner-green { transformeer: vertaal (100%, 50%); }
Sien die Pen Keyframes Tokens - Demo 12 [gevurk] deur Amit Sheen. Jy kan sien dat die eerste draaier (pienk) 'n translate kry wat gebeur voor die rotasie van kf-spin, so dit beweeg eers na sy plek en dan draai. Die tweede draaier (groen) kry 'n translate() funksie wat plaasvind na die individuele transformasie, so die element draai eers, beweeg dan relatief tot sy huidige hoek, en ons kry daardie wye wentelbaan effek. Nee, dit is nie 'n fout nie. Dit is net een van daardie dinge wat ons oor CSS moet weet en in gedagte moet hou wanneer ons met veelvuldige animasies of veelvuldige transformasies werk. Indien nodig, kan jy ook 'n bykomende stel kf-spin-alt sleutelrame skep wat elemente roteer deur die rotate() funksie te gebruik. Verminderde beweging En terwyl ons oor alternatiewe sleutelrame praat, kan ons nie die opsie "geen animasie" ignoreer nie. Een van die grootste voordele van die gebruik van sleutelrame-tokens is dat toeganklikheid ingebak kan word, en dit is eintlik redelik maklik om te doen. Deur ons sleutelrame te ontwerp met toeganklikheid in gedagte, kan ons verseker dat gebruikers wat verminderde beweging verkies 'n gladder, minder afleidende ervaring kry, sonder ekstra werk of kodeduplisering. Die presiese betekenis van "Reduced Motion" kan 'n bietjie verander van een animasie na 'n ander, en van projek tot projek, maar hier is 'n paar belangrike punte om in gedagte te hou: Demp sleutelrame Terwyl sommige animasies versag of vertraag kan word, is daar ander wat heeltemal moet verdwyn wanneer verminderde beweging versoek word. Pols-animasies is 'n goeie voorbeeld. Om seker te maak dat hierdie animasies nie in verminderde bewegingsmodus werk nie, kan ons dit eenvoudig in die toepaslike medianavraag toedraai.
@media (verkies-verminderde-beweging: geen-voorkeur) { @keyfrmaes kf-pulse { van { skaal: var(--kf-puls-skaal-vanaf, 1); ondeursigtigheid: var(--kf-puls-ondeursigtigheid-van, 1); } aan { skaal: var(--kf-puls-skaal-tot, 1); ondeursigtigheid:var(--kf-puls-ondeursigtigheid-tot, 1); } } }
Dit verseker dat gebruikers wat voorkeur-verminder-beweging gestel het om te verminder nie die animasie sal sien nie en 'n ervaring sal kry wat by hul voorkeur pas. Onmiddellik in Daar is 'n paar sleutelrame wat ons nie eenvoudig kan verwyder nie, soos toegangsanimasies. Die waarde moet verander, moet lewendig word; anders sal die element nie die korrekte waardes hê nie. Maar in verminderde beweging moet hierdie oorgang vanaf die aanvanklike waarde onmiddellik wees. Om dit te bereik, sal ons 'n ekstra stel sleutelrame definieer waar die waarde onmiddellik na die eindtoestand spring. Dit word ons verstek sleutelrame. Dan sal ons die gewone sleutelrame binne 'n medianavraag byvoeg vir voorkeur-verminderde-beweging wat op geen-voorkeur gestel is, net soos in die vorige voorbeeld. /* spring onmiddellik in vir verminderde beweging */ @keyframes kf-zoom { van, na { skaal: var(--kf-zoom-tot, 1); } }
@media (verkies-verminderde-beweging: geen-voorkeur) { /* Oorspronklike zoom sleutelrame */ @keyframes kf-zoom { van { skaal: var(--kf-zoem-vanaf, 0,8); } aan { skaal: var(--kf-zoom-tot, 1); } } }
Op hierdie manier sal gebruikers wat verminderde beweging verkies, sien dat die element onmiddellik in sy finale toestand verskyn, terwyl almal anders die geanimeerde oorgang kry. Die sagte benadering Daar is gevalle waar ons wel 'n bietjie beweging wil hou, maar baie sagter en kalmer as die oorspronklike animasie. Ons kan byvoorbeeld 'n weiering-ingang vervang met 'n sagte vervaag.
@keyframes kf-bounce { /* Sagte vervaag vir verminderde beweging */ }
@media (verkies-verminderde-beweging: geen-voorkeur) { @keyframes kf-bounce { /* Oorspronklike weiering sleutelrame */ } }
Nou kry gebruikers met verminderde beweging steeds 'n gevoel van voorkoms, maar sonder die intense beweging van 'n weiering of elastiese animasie. Met die boustene in plek, is die volgende vraag hoe om dit deel van die werklike werkvloei te maak. Om buigsame sleutelrame te skryf is een ding, maar om dit betroubaar te maak oor 'n groot projek, vereis 'n paar strategieë wat ek op die harde manier moes leer. Implementeringstrategieë en beste praktyke Sodra ons 'n soliede biblioteek van sleutelrame-tokens het, is die werklike uitdaging hoe om dit in die alledaagse werk te bring.
Die versoeking is om alle sleutelrame gelyktydig in te gooi en te verklaar dat die probleem opgelos is, maar in die praktyk het ek gevind dat die beste resultate uit geleidelike aanvaarding kom. Begin met die mees algemene animasies, soos vervaag of gly. Dit is maklike oorwinnings wat onmiddellike waarde toon sonder om groot herskrywings te vereis. Naamgewing is nog 'n punt wat aandag verdien. 'n Konsekwente voorvoegsel of naamruimte maak dit duidelik watter animasies tekens is en watter plaaslike eenmaliges is. Dit voorkom ook toevallige botsings en help nuwe spanlede om die gedeelde stelsel in 'n oogopslag te herken. Dokumentasie is net so belangrik soos die kode self. Selfs 'n kort opmerking bo elke sleutelrame-token kan later ure se raai bespaar. 'n Ontwikkelaar moet die tokens-lêer kan oopmaak, skandeer vir die effek wat hulle benodig, en die gebruikspatroon reguit in hul komponent kan kopieer. Buigsaamheid is wat hierdie benadering die moeite werd maak. Deur sinvolle pasgemaakte eienskappe bloot te stel, gee ons spanne ruimte om die animasie aan te pas sonder om die stelsel te breek. Probeer terselfdertyd om nie te ingewikkeld te wees nie. Verskaf die knoppies wat saak maak en hou die res opinig. Ten slotte, onthou toeganklikheid. Nie elke animasie het 'n verminderde beweging-alternatief nodig nie, maar baie doen dit. Om hierdie aanpassings vroeg in te bak, beteken dat ons dit nooit later hoef te herstel nie, en dit toon 'n vlak van sorg wat ons gebruikers sal opmerk, selfs al noem hulle dit nooit.
In my ervaring is die behandeling van sleutelrame-tokens as deel van ons ontwerptokens-werkvloei wat hulle laat vashou. Sodra hulle in plek is, hou hulle op om soos spesiale effekte te voel en word hulle deel van die ontwerptaal, 'n natuurlike uitbreiding van hoe die produk beweeg en reageer. Afronding Animasies kan een van die mees vreugdevolle dele van die bou van koppelvlakke wees, maar sonder struktuur kan dit ook een van die grootste bronne van frustrasie word. Deur sleutelrame as tekens te behandel, neem jy iets wat gewoonlik morsig en moeilik is om te bestuur en verander dit in 'n duidelike, voorspelbare stelsel. Die werklike waarde is nie net om 'n paar reëls kode te stoor nie. Dit is in die vertroue dat wanneer jy 'n vervaag, skyfie, zoom of draai gebruik, jy presies weet hoe dit oor die projek sal optree. Dit is in die buigsaamheid wat kom van pasgemaakte eiendomme sonder die chaos van eindelose variasies. En dit is in die toeganklikheid ingebou in die fondament eerder as bygevoeg as'n nagedagte. Ek het gesien hoe hierdie idees in verskillende spanne en verskillende kodebasisse werk, en die patroon is altyd dieselfde. Sodra die tokens in plek is, hou sleutelrame op om 'n verspreide versameling truuks te wees en word dit deel van die ontwerptaal. Hulle laat die produk meer opsetlik, meer konsekwent en meer lewendig voel. As jy een ding uit hierdie artikel neem, laat dit dit wees: animasies verdien dieselfde sorg en struktuur wat ons reeds aan kleure, tipografie en spasiëring gee. 'n Klein belegging in sleutelrame-tokens betaal elke keer as jou koppelvlak beweeg.
