Predstavte si toto: pripojíte sa k novému projektu, ponoríte sa do kódovej základne a počas prvých niekoľkých hodín objavíte niečo frustrujúco známe. V šablónach štýlov nájdete viacero definícií @keyframes pre rovnaké základné animácie. Tri rôzne efekty fade-in, dve alebo tri variácie snímok, niekoľko zoom animácií a aspoň dve rôzne animácie otáčania, pretože, no, prečo nie? @keyframes pulz { od { mierka: 1; } do { mierka: 1,1; } }
@keyframes väčší-pulz { 0 %, 20 %, 100 % { mierka: 1; } 10 %, 40 % { mierka: 1,2; } }
Ak vám tento scenár znie povedome, nie ste sami. Podľa mojich skúseností v rôznych projektoch je jednou z najkonzistentnejších rýchlych výhier, aké môžem dosiahnuť, konsolidácia a štandardizácia kľúčových snímok. Stal sa tak spoľahlivým vzorom, že sa teraz teším na toto vyčistenie ako na jednu z mojich prvých úloh na akejkoľvek novej kódovej základni. Logika za chaosom Táto redundancia dáva dokonalý zmysel, keď sa nad tým zamyslíte. Všetci používame rovnaké základné animácie v našej každodennej práci: blednutie, posúvanie, približovanie, otáčanie a ďalšie bežné efekty. Tieto animácie sú celkom jednoduché a je ľahké vytvoriť rýchlu definíciu @kľúčových snímok, aby ste svoju prácu zvládli. Bez centralizovaného animačného systému vývojári prirodzene píšu tieto kľúčové snímky od začiatku, nevediac, že podobné animácie už existujú inde v kódovej základni. Je to bežné najmä pri práci v architektúrach založených na komponentoch (čo väčšina z nás v súčasnosti robí), keďže tímy často pracujú paralelne v rôznych častiach aplikácie. Výsledok? Animačný chaos. Malý problém Najviditeľnejšími problémami s duplikáciou kľúčových snímok sú premárnený čas vývoja a zbytočné nafúknutie kódu. Viacnásobné definície kľúčových snímok znamenajú viacero miest na aktualizáciu pri zmene požiadaviek. Potrebujete upraviť načasovanie animácie slabnutia? Budete musieť nájsť každú inštanciu vo svojej kódovej základni. Chcete štandardizovať funkcie uvoľňovania? Veľa šťastia pri hľadaní všetkých variácií. Toto znásobenie bodov údržby robí aj z jednoduchých aktualizácií animácií časovo náročnú úlohu. Väčší problém Toto zdvojenie kľúčových snímok vytvára oveľa zákernejší problém, ktorý sa skrýva pod povrchom: pascu globálneho rozsahu. Aj pri práci s architektúrami založenými na komponentoch sú kľúčové snímky CSS vždy definované v globálnom rozsahu. To znamená, že všetky kľúčové snímky sa vzťahujú na všetky komponenty. Vždy. Áno, vaša animácia nemusí nevyhnutne používať kľúčové snímky, ktoré ste definovali vo svojom komponente. Používa posledné kľúčové snímky, ktoré sa zhodujú s rovnakým názvom, ktorý bol načítaný do globálneho rozsahu. Pokiaľ sú všetky vaše kľúčové snímky identické, môže sa to zdať ako malý problém. Ale v momente, keď chcete prispôsobiť animáciu pre konkrétny prípad použitia, máte problémy, v horšom prípade ich spôsobíte vy. Buď vaša animácia nebude fungovať, pretože sa po vás načíta ďalší komponent, ktorý prepíše vaše kľúčové snímky, alebo sa váš komponent načíta ako posledný a náhodne zmení správanie animácie pre každý ďalší komponent používajúci názov tejto kľúčovej snímky, a možno si to ani neuvedomujete. Tu je jednoduchý príklad, ktorý demonštruje problém: .component-one { /* štýly komponentov */ animácia: pulz 1s uvoľnenie-in-out nekonečné striedanie; }
/* táto definícia @keyframes nebude fungovať */ @keyframes pulz { od { mierka: 1; } do { mierka: 1,1; } }
/* ďalej v kóde... */
.komponent-dva { /* štýly komponentov */ animácia: pulz 1s plynulý nábeh a výstup nekonečný; }
/* tieto kľúčové snímky sa budú vzťahovať na oba komponenty */ @keyframes pulz { 0 %, 20 %, 100 % { mierka: 1; } 10 %, 40 % { mierka: 1,2; } }
Obidva komponenty používajú rovnaký názov animácie, ale druhá definícia @keyframes prepisuje prvú. Teraz bude komponent 1 aj komponent 2 používať druhé kľúčové snímky bez ohľadu na to, ktorý komponent definoval ktoré kľúčové snímky. Pozrite si tokeny kľúčových snímok pera – Demo 1 [rozdvojené] od Amita Sheena. Najhoršia časť? Pri lokálnom vývoji to často funguje perfektne, ale vo výrobe sa záhadne naruší, keď procesy zostavovania zmenia poradie načítania vašich šablón štýlov. Skončíte s animáciami, ktoré sa správajú odlišne v závislosti od toho, ktoré komponenty sú načítané a v akom poradí. Riešenie: Zjednotené kľúčové snímky Odpoveď na tento chaos je prekvapivo jednoduchá: preddefinované dynamické kľúčové snímky uložené v zdieľanej šablóne so štýlmi. Namiesto toho, aby každý komponent definoval svoje vlastné animácie, vytvárame centralizované kľúčové snímky, ktoré sú dobre zdokumentované a ľahko sapoužiteľné, udržiavateľné a prispôsobené špecifickým potrebám vášho projektu. Predstavte si to ako tokeny kľúčových snímok. Tak ako používame tokeny na farby a medzery a mnohí z nás už používajú tokeny na vlastnosti animácie, ako je trvanie a funkcie easing, prečo nepoužiť tokeny aj pre kľúčové snímky? Tento prístup sa dá prirodzene integrovať s akýmkoľvek aktuálnym pracovným tokom tokenov dizajnu, ktorý používate, a zároveň vyriešiť malý problém (duplikácia kódu) aj väčší problém (konflikty globálneho rozsahu) naraz. Myšlienka je jednoduchá: vytvorte jediný zdroj pravdy pre všetky naše spoločné animácie. Táto zdieľaná šablóna so štýlmi obsahuje starostlivo vytvorené kľúčové snímky, ktoré pokrývajú vzory animácií, ktoré náš projekt skutočne používa. Už žiadne hádanie, či už niekde v našej kódovej základni existuje animácia slabnutia. Už žiadne náhodné prepisovanie animácií z iných komponentov. Ale tu je kľúč: toto nie sú len statické animácie kopírovania a prilepenia. Sú navrhnuté tak, aby boli dynamické a prispôsobiteľné prostredníctvom vlastných vlastností CSS, čo nám umožňuje zachovať konzistenciu a zároveň mať flexibilitu na prispôsobenie animácií konkrétnym prípadom použitia, napríklad ak potrebujete o niečo väčšiu „pulznú“ animáciu na jednom mieste. Budovanie prvého tokenu kľúčových snímok Jedným z prvých nízko visiacich plodov, ktoré by sme mali riešiť, je animácia „fade-in“. V jednom z mojich nedávnych projektov som našiel viac ako tucet samostatných definícií prechodu a áno, všetky jednoducho animovali nepriehľadnosť od 0 do 1. Vytvorme teda novú šablónu so štýlmi, nazvime ju kf-tokens.css, importujeme ju do nášho projektu a umiestnime do nej naše kľúčové snímky so správnymi komentármi. /* keyframes-tokens.css */
/* * Fade In - vstupná animácia zoslabnutia * Použitie: animácia: kf-fade-in 0,3s uvoľnenie; */ @keyframes kf-fade-in { od { nepriehľadnosť: 0; } do { nepriehľadnosť: 1; } }
Táto jediná deklarácia @keyframes nahrádza všetky tie roztrúsené fade-in animácie v našej kódovej základni. Čisté, jednoduché a globálne použiteľné. A teraz, keď máme tento token definovaný, môžeme ho použiť z akéhokoľvek komponentu v rámci nášho projektu: .modal { animácia: kf-fade-in 0,3s zmiernenie-out; }
.tooltip { animácia: kf-fade-in 0,2s easy-in-out; }
.notification { animácia: kf-fade-in 0,5s zmiernenie-out; }
Pozrite si tokeny kľúčových snímok pera – Demo 2 [rozdvojené] od Amita Sheena. Poznámka: Vo všetkých názvoch @keyframes používame predponu kf-. Táto predpona slúži ako priestor názvov, ktorý zabraňuje konfliktom názvov s existujúcimi animáciami v projekte a okamžite objasňuje, že tieto kľúčové snímky pochádzajú z nášho súboru tokenov kľúčových snímok. Vytvorenie dynamickej snímky Kľúčové snímky kf-fade-in fungujú skvele, pretože sú jednoduché a je tu malý priestor na pokazenie vecí. V iných animáciách však musíme byť oveľa dynamickejší a tu môžeme využiť obrovskú silu vlastných vlastností CSS. To je miesto, kde tokeny kľúčových snímok skutočne žiaria v porovnaní s rozptýlenými statickými animáciami. Zoberme si bežný scenár: „slide-in“ animácie. Ale odkiaľ sa zasunúť? 100 pixelov sprava? 50% zľava? Má vstúpiť z hornej časti obrazovky? Alebo možno plávať zospodu? Toľko možností, ale namiesto vytvárania samostatných kľúčových snímok pre každý smer a každú variáciu môžeme vytvoriť jeden flexibilný token, ktorý sa prispôsobí všetkým scenárom: /* * Slide In - smerová animácia snímky * Na ovládanie smeru použite --kf-slide-from * Predvolené: zasunie sa zľava (-100 %) * Použitie: * animácia: kf-slide-in 0,3s uvoľnenie-out; * --kf-slide-from: -100px 0; // snímka zľava * --kf-slide-from: 100px 0; // snímka sprava * --kf-slide-from: 0 -50px; // posunutie zhora */
@keyframes kf-slide-in { od { preložiť: var(--kf-slide-from, -100% 0); } do { preložiť: 0 0; } }
Teraz môžeme použiť tento jediný token @keyframes pre akýkoľvek smer snímky jednoduchou zmenou vlastnej vlastnosti --kf-slide-from: .bočný panel { animácia: kf-slide-in 0,3s uvoľnenie-out; /* Používa predvolenú hodnotu: snímky zľava */ }
.notification { animácia: kf-slide-in 0,4s uvoľnenie-out; --kf-slide-from: 0 -50px; /* posúvať zhora */ }
.modal { animácia: kf-fade-in 0,5 s, kf-slide-in 0,5s kubický-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* snímka sprava dole */ }
Tento prístup nám poskytuje neuveriteľnú flexibilitu pri zachovaní konzistentnosti. Jedna deklarácia kľúčovej snímky, nekonečné možnosti. Pozrite si tokeny kľúčových snímok pera – Demo 3 [rozdvojené] od Amita Sheena. A ak chceme, aby boli naše animácie ešte flexibilnejšie a umožnili aj „vysúvacie“ efekty, môžemejednoducho pridajte vlastnú vlastnosť --kf-slide-to, podobnú tej, ktorú uvidíme v ďalšej časti. Kľúčové snímky obojsmerného priblíženia Ďalšou bežnou animáciou, ktorá sa v projektoch duplikuje, sú efekty „zoom“. Či už ide o jemné zväčšenie pre toastové správy, dramatické priblíženie pre modály alebo efekt jemného zmenšenia pre nadpisy, animácie priblíženia sú všade. Namiesto vytvárania samostatných kľúčových snímok pre každú hodnotu stupnice zostavme jednu flexibilnú sadu kľúčových snímok kf-zoom:
/* * Zoom - mierka animácie * Na ovládanie hodnôt stupnice použite --kf-zoom-from a --kf-zoom-to * Predvolené: priblíženie od 80 % do 100 % (0,8 až 1) * Použitie: * animácia: kf-zoom 0,2s uvoľnenie; * --kf-zoom-od: 0,5; --kf-zoom-to: 1; // priblíženie od 50 % do 100 % * --kf-zoom-from: 1; --kf-zoom-to: 0; // priblíženie od 100 % do 0 % * --kf-zoom-from: 1; --kf-zoom-to: 1,1; // priblíženie od 100 % do 110 % */
@keyframes kf-zoom { od { mierka: var(--kf-zoom-od, 0,8); } do { mierka: var(--kf-zoom-to, 1); } }
S jednou definíciou môžeme dosiahnuť akúkoľvek variáciu priblíženia, ktorú potrebujeme: .toast { animácia: kf-slide-in 0,2 s, kf-zoom 0,4s uvoľnenie; --kf-slide-from: 0 100 %; /* posúvať zhora */ /* Používa predvolené priblíženie: mierka od 80 % do 100 % */ }
.modal { animácia: kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0; /* dramatické priblíženie od 0 % do 100 % */ }
.heading { animácia: kf-fade-in 2s, kf-zoom 2s uvoľnenie; --kf-zoom-from: 1,2; --kf-zoom-to: 0,8; /* jemné zmenšenie */ }
Predvolená hodnota 0,8 (80 %) funguje perfektne pre väčšinu prvkov používateľského rozhrania, ako sú toastové správy a karty, pričom sa stále dá ľahko prispôsobiť pre špeciálne prípady. Pozrite si tokeny kľúčových snímok pera – Demo 4 [rozdvojené] od Amita Sheena. V nedávnych príkladoch ste si mohli všimnúť niečo zaujímavé: kombinovali sme animácie. Jednou z kľúčových výhod práce s tokenmi @keyframes je, že sú navrhnuté tak, aby sa navzájom hladko integrovali. Táto hladká kompozícia je zámerná, nie náhodná. O kompozícii animácií budeme diskutovať podrobnejšie neskôr, vrátane toho, kde môžu byť problematické, ale väčšina kombinácií je jednoduchá a ľahko implementovateľná. Poznámka: Pri písaní tohto článku a možno práve kvôli jeho písaniu som sa pristihol, že prehodnocujem celú myšlienku vstupných animácií. So všetkými nedávnymi pokrokmi v CSS ich ešte vôbec potrebujeme? Našťastie Adam Argyle preskúmal rovnaké otázky a brilantne ich vyjadril vo svojom blogu. To nie je v rozpore s tým, čo je tu napísané, ale predstavuje to prístup, ktorý stojí za zváženie, najmä ak sa vaše projekty vo veľkej miere spoliehajú na vstupné animácie. Nepretržité animácie Zatiaľ čo vstupné animácie, ako napríklad „miznutie“, „súvanie“ a „priblíženie“ sa dejú raz a potom sa zastavia, nepretržité animácie sa donekonečna opakujú, aby upútali pozornosť alebo naznačili prebiehajúcu aktivitu. Dve najbežnejšie nepretržité animácie, s ktorými sa stretávam, sú „točenie“ (pre indikátory načítania) a „pulz“ (pre zvýraznenie dôležitých prvkov). Tieto animácie predstavujú jedinečné výzvy, pokiaľ ide o vytváranie tokenov kľúčových snímok. Na rozdiel od vstupných animácií, ktoré zvyčajne prechádzajú z jedného stavu do druhého, kontinuálne animácie musia byť vo svojich vzorcoch správania vysoko prispôsobiteľné. Spin Doctor Zdá sa, že každý projekt používa viacero animácií otáčania. Niektoré sa točia v smere hodinových ručičiek, iné proti smeru hodinových ručičiek. Niektorí urobia jednu rotáciu o 360 stupňov, iní urobia niekoľko otočení pre rýchlejší efekt. Namiesto vytvárania samostatných kľúčových snímok pre každú variáciu vytvorme jedno flexibilné otáčanie, ktoré zvládne všetky scenáre:
/* * Spin - animácia rotácie * Na ovládanie rozsahu otáčania použite --kf-spin-from a --kf-spin-to * Na ovládanie množstva otáčania použite --kf-spin-turns * Predvolené: otáča sa od 0° do 360° (1 úplná rotácia) * Použitie: * animácia: kf-spin 1s lineárne nekonečno; * --kf-spin-turns: 2; // 2 plné otáčky * --kf-spin-from: 0deg; --kf-spin-to: 180°; // polovičná rotácia * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // proti smeru hodinových ručičiek */
@keyframes kf-spin { od { rotácia: var(--kf-spin-from, 0deg); } do { rotácia: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Teraz môžeme vytvoriť akúkoľvek variáciu rotácie, ktorá sa nám páči:
.loading-spinner { animácia: kf-spin 1s lineárne nekonečno; /* Používa predvolené nastavenie: otáča sa od 0° do 360° */ }
.fast-loader { animácia: kf-spin 1,2s easy-in-out nekonečné striedanie; --kf-spin-turns: 3; /* 3 plné otáčky pre každý smer za cyklus*/ }
.steped-reverse { animácia: kf-spin 1.5s steps(8) infinite; --kf-spin-to: -360deg; /* proti smeru hodinových ručičiek */ }
.subtle-wiggle { animácia: kf-spin 2s easy-in-out nekonečné striedanie; --kf-spin-from: -16deg; --kf-spin-to: 32°; /* kývanie o 36 stupňov: medzi -18 stupňov a +18 stupňov */ }
Pozrite si tokeny kľúčových snímok pera – Demo 5 [rozdvojené] od Amita Sheena. Krása tohto prístupu spočíva v tom, že rovnaké kľúčové snímky fungujú pre načítavanie spinnerov, otáčanie ikon, efekty kývania a dokonca aj zložité viacotáčkové animácie. Pulzný paradox Animácie impulzov sú zložitejšie, pretože môžu „pulzovať“ rôzne vlastnosti. Niektoré pulzujú stupnicou, iné pulzujú nepriehľadnosťou a niektoré pulzujú farebné vlastnosti, ako je jas alebo sýtosť. Namiesto vytvárania samostatných kľúčových snímok pre každú vlastnosť môžeme vytvoriť kľúčové snímky, ktoré fungujú s akoukoľvek vlastnosťou CSS. Tu je príklad pulznej kľúčovej snímky s možnosťami mierky a nepriehľadnosti:
/* * Pulz - pulzujúca animácia * Na ovládanie rozsahu stupnice použite --kf-pulse-scale-from a --kf-pulse-scale-to * Použite --kf-pulse-opacity-from a --kf-pulse-opacity-to na ovládanie rozsahu nepriehľadnosti * Predvolené: žiadny pulz (všetky hodnoty 1) * Použitie: * animácia: kf-pulse 2s easy-in-out nekonečné striedanie; * --kf-pulz-stupnica-od: 0,95; --kf-pulse-scale-to: 1,05; // impulz stupnice * --kf-pulse-opacity-od: 0,7; --kf-pulse-opacity-to: 1; // pulz opacity */
@keyframes kf-pulse { od { mierka: var(--kf-pulz-stupnica-od, 1); opacity: var(--kf-pulse-opacity-from, 1); } do { mierka: var(--kf-puls-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
To vytvára flexibilný impulz, ktorý môže animovať viaceré vlastnosti: .call-to-action { animácia: kf-pulz 0,6s nekonečné striedanie; --kf-pulse-opacity-od: 0,5; /* pulz opacity */ }
.notification-dot { animácia: kf-pulz 0,6s uvoľnenie-in-out nekonečné striedanie; --kf-pulz-stupnica-od: 0,9; --kf-pulse-scale-to: 1,1; /* impulz stupnice */ }
.text-highlight { animácia: kf-pulz 1,5 s nekonečné uvoľnenie; --kf-pulse-scale-od: 0,8; --kf-pulse-opacity-od: 0,2; /* mierka a impulz opacity */ }
Pozrite si tokeny kľúčových snímok pera - Demo 6 [rozdvojené] od Amita Sheena. Táto jediná kľúčová snímka kf-pulse zvládne všetko od jemného upútania pozornosti až po dramatické zvýraznenia, a to všetko pri jednoduchom prispôsobení. Pokročilé uvoľňovanie Jednou zo skvelých vecí na používaní tokenov kľúčových snímok je, aké ľahké je rozšíriť našu knižnicu animácií a poskytnúť efekty, ktoré by sa väčšina vývojárov neobťažovala písať od začiatku, ako napríklad elastické alebo odrazové. Tu je príklad jednoduchého tokenu kľúčových snímok „odrazenie“, ktorý používa vlastnú vlastnosť --kf-bounce-from na ovládanie výšky skoku. /* * Bounce - poskakujúca vstupná animácia * Na ovládanie výšky skoku použite --kf-bounce-from * Predvolené: skoky zo 100vh (mimo obrazovku) * Použitie: * animácia: kf-bounce 3s easy-in; * --kf-bounce-from: 200px; // skok z výšky 200px */
@keyframes kf-bounce { 0 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99 % { preložiť: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22 %, 45 %, 64 %, 79 %, 90 %, 97 %, 100 % { preložiť: 0 0; funkcia časovania animácie: uvoľnenie; } }
Animácie ako „elastické“ sú o niečo zložitejšie kvôli výpočtom vo vnútri kľúčových snímok. Musíme definovať --kf-elastic-from-X a --kf-elastic-from-Y oddelene (obe sú voliteľné) a spolu nám umožňujú vytvoriť elastický vstup z akéhokoľvek bodu na obrazovke.
/* * Elastic In - elastická vstupná animácia * Na ovládanie počiatočnej polohy použite --kf-elastic-from-X a --kf-elastic-from-Y * Predvolené: zadáva sa od stredu zhora (0, -100vh) * Použitie: * animácia: kf-elastic-in 2s easy-in-out oboch; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // zadajte od (-50px, -200px) */
@keyframes kf-elastic-in { 0 % { preložiť: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16 % { preložiť: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28 % { preložiť: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44 % { preložiť: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59 % { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73 % { translate: calc(var(--kf-elastic-from-X, -50vw) * -0,0058) calc(var(--kf-elastic-from-Y, 0px) * -0,0058); }
88 % { translate: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100 % { preložiť: 0 0; } }
Tento prístup uľahčuje opätovné použitie a prispôsobenie pokročilých kľúčových snímok v rámci nášho projektu len zmenou jedinej vlastnej vlastnosti.
.bounce-and-zoom { animácia: uvoľnenie kf-bounce 3s, kf-zoom 3s lineárny; --kf-zoom-from: 0; }
.bounce-and-slide { animácia-kompozícia: pridať; /* Obe animácie používajú preklad */ animácia: uvoľnenie kf-bounce 3s, kf-slide-in 3s uvoľnenie; --kf-slide-from: -200px; }
.elastic-in { animácia: kf-elastic-in 2s easy-in-out oboch; }
Pozrite si tokeny kľúčových snímok pera – Demo 7 [rozdvojené] od Amita Sheena. Až do tohto bodu sme videli, ako môžeme konsolidovať kľúčové snímky inteligentným a efektívnym spôsobom. Samozrejme, možno budete chcieť veci vyladiť tak, aby lepšie vyhovovali potrebám vášho projektu, ale prebrali sme príklady niekoľkých bežných animácií a prípadov každodenného použitia. A s týmito kľúčovými tokenmi na mieste máme teraz výkonné stavebné bloky na vytváranie konzistentných a udržiavateľných animácií v rámci celého projektu. Už žiadne duplicitné kľúčové snímky, žiadne globálne konflikty rozsahu. Len čistý a pohodlný spôsob, ako zvládnuť všetky naše potreby animácie. Skutočná otázka však znie: Ako tieto stavebné kamene poskladáme? Dať to všetko dokopy Videli sme, že kombinovanie základných tokenov kľúčových snímok je jednoduché. Nepotrebujeme nič špeciálne, len definovať prvú animáciu, definovať druhú, nastaviť premenné podľa potreby a je to. /* Fade in + slide in */ .toast { animácia: kf-fade-in 0,4s, kf-slide-in 0,4s kubický-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Priblížiť + zoslabiť */ .modal { animácia: kf-fade-in 0,3 s, kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-od: 0,7; --kf-zoom-to: 1; }
/* Zasunutie + pulz */ .notification { animácia: kf-slide-in 0,5s, kf-pulse 1,2s plynulý nábeh a výstup nekonečné striedanie; --kf-slide-from: -100px 0; --kf-pulse-scale-od: 0,95; --kf-pulse-scale-to: 1,05; }
Tieto kombinácie fungujú skvele, pretože každá animácia sa zameriava na inú vlastnosť: nepriehľadnosť, transformáciu (preložiť/zmenšiť) atď. Niekedy však dochádza ku konfliktom a musíme vedieť, prečo a ako sa s nimi vysporiadať. Keď sa dve animácie pokúšajú animovať rovnakú vlastnosť – napríklad obe animujú mierku alebo obe animujú nepriehľadnosť – výsledok nebude taký, aký očakávate. V predvolenom nastavení sa na túto vlastnosť skutočne použije iba jedna z animácií, ktorá je poslednou v zozname animácií. Toto je obmedzenie spôsobu, akým CSS spracováva viacero animácií v tej istej vlastnosti. Napríklad to nebude fungovať podľa plánu, pretože sa použije iba animácia kf-pulse. .bad-combo { animácia: kf-zoom 0,5 s dopredu, kf-pulz 1,2s nekonečné striedanie; --kf-zoom-od: 0,5; --kf-zoom-to: 1,2; --kf-pulse-scale-od: 0,8; --kf-pulse-scale-to: 1,1; }
Dodatok animácie Najjednoduchším a najpriamejším spôsobom spracovania viacerých animácií, ktoré ovplyvňujú rovnakú vlastnosť, je použiť vlastnosť animation-composition. V poslednom príklade vyššie animácia kf-pulse nahrádza animáciu kf-zoom, takže neuvidíme počiatočné priblíženie a nedosiahneme očakávanú mierku 1,2. Nastavením kompozície animácie, ktorá sa má pridať, povieme prehliadaču, aby skombinoval obe animácie. To nám dáva požadovaný výsledok. .komponent-dva { animácia-kompozícia: pridať; }
Pozrite si tokeny kľúčových snímok pera – Demo 8 [rozdvojené] od Amita Sheena. Tento prístup funguje dobre vo väčšine prípadov, keď chceme kombinovať efekty na rovnakú vlastnosť. Je tiež užitočný, keď potrebujeme kombinovať animácie so statickými hodnotami vlastností. Napríklad, ak máme prvok, ktorý používa vlastnosť translate, aby ho umiestnil presne tam, kde chceme, a potom ho chceme animovať pomocou kľúčových snímok kf-slide-in, dostaneme škaredý viditeľný skok bez kompozície animácie. Pozrite si kľúče tokenov pera - Demo 9 [rozdvojené] od Amita Sheena. Vďaka nastavenej kompozícii animácie na pridanie sa animácia hladko skombinuje s existujúcoutransformovať, takže prvok zostane na mieste a animuje sa podľa očakávania. Stagger animácie Ďalším spôsobom, ako pracovať s viacerými animáciami, je „rozložiť“ ich – to znamená spustiť druhú animáciu o niečo po dokončení prvej. Nie je to riešenie, ktoré funguje pre každý prípad, ale je užitočné, keď máme vstupnú animáciu, po ktorej nasleduje súvislá animácia. /* zoslabenie + pulz opacity */ .notification { animácia: kf-fade-in 2s uvoľnenie, kf-pulz 0,5s 2s uvoľnenie-in-out nekonečné striedanie; --kf-pulse-opacity-to: 0,5; }
Pozrite si kľúče tokenov pera – Demo 10 [rozdvojené] od Amita Sheena. Na objednávke záleží Veľká časť animácií, s ktorými pracujeme, využíva vlastnosť transform. Vo väčšine prípadov je to jednoducho pohodlnejšie. Má tiež výkonnostnú výhodu, pretože transformačné animácie môžu byť akcelerované GPU. Ale ak používame transformácie, musíme akceptovať, že na poradí, v ktorom vykonávame naše transformácie, záleží. Veľa. V našich kľúčových snímkach sme doteraz používali jednotlivé transformácie. Podľa špecifikácií sa tieto vždy aplikujú v pevnom poradí: najprv sa prvok preloží, potom sa otočí a potom sa zmení mierka. To dáva zmysel a je to, čo väčšina z nás očakáva. Ak však použijeme vlastnosť transform, poradie, v ktorom sú funkcie napísané, je poradie, v ktorom sú aplikované. V tomto prípade, ak niečo posunieme o 100 pixelov na osi X a potom to otočíme o 45 stupňov, nie je to to isté, ako keď to najprv otočíme o 45 stupňov a potom to posunieme o 100 pixelov. /* Ružový štvorec: Najprv preložte, potom otočte */ .example-one { transform: translateX(100px) rotation(45deg); }
/* Zelený štvorec: Najprv otočte, potom preložte */ .priklad-dva { transformácia: otočiť(45 stupňov) preložiťX(100px); }
Pozrite si kľúče tokenov pera – Demo 11 [rozdvojené] od Amita Sheena. Ale podľa poradia transformácie sa všetky jednotlivé transformácie - všetko, čo sme použili pre tokeny kľúčových snímok - dejú pred funkciami transformácie. To znamená, že všetko, čo nastavíte vo vlastnosti transform, sa stane po animáciách. Ale ak nastavíte napríklad preklad spolu s kľúčovými snímkami kf-spin, preklad sa uskutoční pred animáciou. Ešte zmätený?! To vedie k situáciám, keď statické hodnoty môžu spôsobiť rôzne výsledky pre rovnakú animáciu, ako je to v nasledujúcom prípade:
/* Spoločná animácia pre oba spinnery */ .spinner { animácia: kf-spin 1s lineárne nekonečno; }
/* Ružový spinner: preložiť pred otočením (individuálna transformácia) */ .spinner-pink { preložiť: 100 % 50 %; }
/* Zelený číselník: otočte a potom preložte (poradie funkcií) */ .spinner-green { transform: translate(100%, 50%); }
Pozrite si tokeny kľúčových snímok pera - Demo 12 [rozdvojené] od Amita Sheena. Môžete vidieť, že prvý spinner (ružový) dostane preloženie, ku ktorému dôjde pred otočením kf-spin, takže sa najprv presunie na svoje miesto a potom sa roztočí. Druhý spinner (zelený) dostane funkciu translate(), ktorá nastane po individuálnej transformácii, takže prvok sa najprv otočí, potom sa posunie vzhľadom na svoj aktuálny uhol a získame efekt širokej obežnej dráhy. Nie, toto nie je chyba. Je to len jedna z vecí, ktoré potrebujeme vedieť o CSS a na čo treba pamätať pri práci s viacerými animáciami alebo viacerými transformáciami. Ak je to potrebné, môžete tiež vytvoriť ďalšiu sadu kľúčových snímok kf-spin-alt, ktoré otáčajú prvky pomocou funkcie rotation(). Znížený pohyb A keď už hovoríme o alternatívnych kľúčových snímkach, nemôžeme ignorovať možnosť „žiadna animácia“. Jednou z najväčších výhod používania tokenov kľúčových snímok je, že je možné zapečatiť dostupnosť a v skutočnosti je to celkom jednoduché. Pri navrhovaní našich kľúčových snímok s ohľadom na dostupnosť môžeme zaistiť, že používatelia, ktorí uprednostňujú obmedzený pohyb, získajú plynulejší a menej rušivý zážitok bez ďalšej práce alebo duplikácie kódu. Presný význam výrazu „Reduced Motion“ sa môže mierne meniť od jednej animácie k druhej a od projektu k projektu, ale tu je niekoľko dôležitých bodov, ktoré treba mať na pamäti: Stlmenie kľúčových snímok Zatiaľ čo niektoré animácie je možné zjemniť alebo spomaliť, sú tu iné, ktoré by mali úplne zmiznúť, keď sa požaduje znížený pohyb. Dobrým príkladom sú pulzné animácie. Aby sme sa uistili, že tieto animácie nebežia v režime zníženého pohybu, môžeme ich jednoducho zabaliť do príslušného mediálneho dotazu.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { od { mierka: var(--kf-pulz-stupnica-od, 1); opacity: var(--kf-pulse-opacity-from, 1); } do { mierka: var(--kf-puls-scale-to, 1); nepriehľadnosť:var(--kf-pulz-opacity-to, 1); } } }
To zaisťuje, že používatelia, ktorí nastavili preferencie-redukovaný-pohyb na zníženie, neuvidia animáciu a získajú zážitok, ktorý zodpovedá ich preferenciám. Okamžitý vstup Niektoré kľúčové snímky nemôžeme jednoducho odstrániť, napríklad vstupné animácie. Hodnota sa musí zmeniť, musí sa animovať; inak prvok nebude mať správne hodnoty. Ale pri zníženom pohybe by tento prechod z počiatočnej hodnoty mal byť okamžitý. Aby sme to dosiahli, zadefinujeme ďalšiu sadu kľúčových snímok, kde hodnota okamžite preskočí do koncového stavu. Tieto sa stanú našimi predvolenými kľúčovými snímkami. Potom pridáme bežné kľúčové snímky do mediálneho dopytu pre preferencie-redukovaný pohyb nastavený na žiadnu preferenciu, rovnako ako v predchádzajúcom príklade. /* okamžité zasunutie pre znížený pohyb */ @keyframes kf-zoom { od, do { mierka: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Pôvodné kľúčové snímky priblíženia */ @keyframes kf-zoom { od { mierka: var(--kf-zoom-od, 0,8); } do { mierka: var(--kf-zoom-to, 1); } } }
Týmto spôsobom používatelia, ktorí uprednostňujú znížený pohyb, uvidia prvok, ktorý sa okamžite objaví vo svojom konečnom stave, zatiaľ čo všetci ostatní dostanú animovaný prechod. Mäkký prístup Sú prípady, keď chceme zachovať nejaký pohyb, ale oveľa jemnejší a pokojnejší ako pôvodná animácia. Napríklad odrazový vstup môžeme nahradiť jemným fade-in.
@keyframes kf-bounce { /* Mäkké zoslabenie pre znížený pohyb */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Pôvodné kľúčové snímky odrazenia */ } }
Teraz majú používatelia s povoleným zníženým pohybom stále pocit vzhľadu, ale bez intenzívneho pohybu odrazu alebo elastickej animácie. Keď sú stavebné bloky na mieste, ďalšou otázkou je, ako ich urobiť súčasťou skutočného pracovného postupu. Písanie flexibilných kľúčových snímok je jedna vec, ale zabezpečiť ich spoľahlivosť v rámci veľkého projektu si vyžaduje niekoľko stratégií, ktoré som sa musel tvrdo naučiť. Implementačné stratégie a osvedčené postupy Keď budeme mať solídnu knižnicu kľúčových snímok, skutočnou výzvou je, ako ich preniesť do každodennej práce.
Pokušením je zahodiť všetky kľúčové snímky naraz a vyhlásiť problém za vyriešený, ale v praxi som zistil, že najlepšie výsledky prináša postupná adopcia. Začnite s najbežnejšími animáciami, ako je miznutie alebo posúvanie. Sú to ľahké výhry, ktoré ukazujú okamžitú hodnotu bez toho, aby si vyžadovali veľké prepisy. Pomenovanie je ďalším bodom, ktorý si zaslúži pozornosť. Konzistentná predpona alebo priestor názvov objasňuje, ktoré animácie sú tokeny a ktoré sú lokálne jednorazové. Zabraňuje tiež náhodným kolíziám a pomáha novým členom tímu rozpoznať zdieľaný systém na prvý pohľad. Dokumentácia je rovnako dôležitá ako samotný kód. Dokonca aj krátky komentár nad každým kľúčovým tokenom môže neskôr ušetriť hodiny hádania. Vývojár by mal byť schopný otvoriť súbor tokenov, vyhľadať efekt, ktorý potrebuje, a skopírovať vzor použitia priamo do svojho komponentu. Flexibilita je dôvod, prečo tento prístup stojí za námahu. Odhalením rozumných vlastných vlastností dávame tímom priestor na prispôsobenie animácie bez narušenia systému. Zároveň sa snažte nekomplikovať. Poskytnite gombíky, na ktorých záleží, a zvyšok udržujte v názore. Nakoniec nezabudnite na dostupnosť. Nie každá animácia potrebuje alternatívu zníženého pohybu, no mnohé áno. Včasné zapečenie týchto úprav znamená, že ich už nikdy nebudeme musieť dodatočne vybavovať, a ukazuje to úroveň starostlivosti, ktorú si naši používatelia všimnú, aj keď to nikdy nespomínajú.
Podľa mojich skúseností je to, že tokeny kľúčových snímok ako súčasť nášho pracovného toku návrhových tokenov, núti ich držať sa. Akonáhle sú na mieste, prestanú cítiť ako špeciálne efekty a stanú sa súčasťou dizajnového jazyka, prirodzeného rozšírenia toho, ako sa produkt pohybuje a reaguje. Zabaliť sa Animácie môžu byť jednou z najradostnejších častí rozhrania budov, no bez štruktúry sa môžu stať aj jedným z najväčších zdrojov frustrácie. Keď budete s kľúčovými snímkami zaobchádzať ako s tokenmi, vezmete niečo, čo je zvyčajne chaotické a ťažko spravovateľné, a zmeníte to na jasný, predvídateľný systém. Skutočná hodnota nie je len v úspore niekoľkých riadkov kódu. Je to v dôvere, že keď použijete fade, slide, zoom alebo spin, presne viete, ako sa to bude správať v rámci projektu. Je to vo flexibilite, ktorá vychádza z vlastných vlastností bez chaosu nekonečných variácií. A je to skôr v prístupnosti zabudovanej do nadácie ako pridanejdodatočný nápad. Videl som, že tieto nápady fungujú v rôznych tímoch a rôznych kódových základniach a vzor je vždy rovnaký. Keď sú tokeny na svojom mieste, kľúčové snímky prestanú byť rozptýlenou zbierkou trikov a stanú sa súčasťou dizajnového jazyka. Vďaka nim sa produkt cíti viac zámerne, konzistentnejšie a živšie. Ak si z tohto článku vezmete jednu vec, nech je to takto: animácie si zaslúžia rovnakú starostlivosť a štruktúru, akú už venujeme farbám, typografii a medzerám. Malá investícia do tokenov kľúčových snímok sa vyplatí vždy, keď sa vaše rozhranie pohne.
