Představte si toto: připojíte se k novému projektu, ponoříte se do kódové základny a během prvních několika hodin objevíte něco frustrujícího povědomého. V šablonách stylů najdete několik definic @keyframes pro stejné základní animace. Tři různé efekty prolínání, dvě nebo tři varianty snímků, hrstka animací přiblížení a alespoň dvě různé animace otáčení, protože, no, proč ne? @keyframes pulse { od { měřítko: 1; } do { měřítko: 1,1; } }
@keyframes větší-puls { 0 %, 20 %, 100 % { měřítko: 1; } 10 %, 40 % { měřítko: 1,2; } }
Pokud vám tento scénář zní povědomě, nejste sami. Podle mých zkušeností z různých projektů je jednou z nejkonzistentnějších rychlých výher, které mohu poskytnout, konsolidace a standardizace klíčových snímků. Stal se tak spolehlivým vzorem, že se nyní těším na toto vyčištění jako na jeden z mých prvních úkolů na jakékoli nové kódové základně. Logika za chaosem Tato redundance dává dokonalý smysl, když se nad tím zamyslíte. Při každodenní práci všichni používáme stejné základní animace: blednutí, posouvání, přibližování, otáčení a další běžné efekty. Tyto animace jsou docela přímočaré a je snadné vytvořit rychlou definici @keyframes, aby byla práce hotová. Bez centralizovaného animačního systému vývojáři přirozeně píší tyto klíčové snímky od nuly, aniž by si byli vědomi, že podobné animace již existují jinde v kódové základně. To je běžné zejména při práci v architekturách založených na komponentách (což dnes dělá většina z nás), protože týmy často pracují paralelně napříč různými částmi aplikace. Výsledek? Animační chaos. Malý problém Nejzřetelnějšími problémy s duplikací klíčových snímků jsou plýtvání časem při vývoji a zbytečné nafouknutí kódu. Více definic klíčových snímků znamená více míst pro aktualizaci, když se změní požadavky. Potřebujete upravit načasování animace slábnutí? Budete muset hledat každou instanci ve vaší kódové základně. Chcete standardizovat náběhové funkce? Hodně štěstí při hledání všech variant. Díky tomuto násobení bodů údržby jsou i jednoduché aktualizace animací časově náročným úkolem. Větší problém Tato duplikace klíčových snímků vytváří mnohem zákeřnější problém číhající pod povrchem: past globálního rozsahu. I při práci s architekturami založenými na komponentách jsou klíčové snímky CSS vždy definovány v globálním rozsahu. To znamená, že všechny klíčové snímky se vztahují na všechny komponenty. Vždy. Ano, vaše animace nemusí nutně používat klíčové snímky, které jste definovali ve vaší komponentě. Používá poslední klíčové snímky, které odpovídají přesně stejnému názvu, který byl načten do globálního rozsahu. Dokud jsou všechny vaše klíčové snímky identické, může se to zdát jako malý problém. Ale ve chvíli, kdy chcete upravit animaci pro konkrétní případ použití, máte potíže, nebo hůře, budete to vy, kdo je způsobí. Buď vaše animace nebude fungovat, protože se po vaší načte další komponenta, která přepíše vaše klíčové snímky, nebo se vaše komponenta načte jako poslední a náhodně změní chování animace pro každou další komponentu používající název daného klíčového snímku, a vy si to možná ani neuvědomujete. Zde je jednoduchý příklad, který demonstruje problém: .component-one { /* styly komponent */ animace: pulz 1s náběh a výstup nekonečné střídání; }
/* tato definice @keyframes nebude fungovat */ @keyframes pulse { od { měřítko: 1; } do { měřítko: 1,1; } }
/* dále v kódu... */
.komponenta-dva { /* styly komponent */ animace: pulz 1s náběh a výstup nekonečný; }
/* tyto klíčové snímky budou platit pro obě komponenty */ @keyframes pulse { 0 %, 20 %, 100 % { měřítko: 1; } 10 %, 40 % { měřítko: 1,2; } }
Obě komponenty používají stejný název animace, ale druhá definice @keyframes přepíše tu první. Komponenta jedna i komponenta dva nyní budou používat druhé klíčové snímky bez ohledu na to, která komponenta definovala které klíčové snímky. Podívejte se na Tokeny klíčových snímků pera – Demo 1 [rozvětvené] od Amita Sheena. Nejhorší část? V místním vývoji to často funguje perfektně, ale ve výrobě se záhadně naruší, když procesy sestavování změní pořadí načítání vašich šablon stylů. Skončíte s animacemi, které se chovají odlišně podle toho, které komponenty jsou načteny a v jakém pořadí. Řešení: Sjednocené klíčové snímky Odpověď na tento chaos je překvapivě jednoduchá: předdefinované dynamické klíčové snímky uložené ve sdílené šabloně stylů. Namísto toho, aby každá komponenta definovala své vlastní animace, vytváříme centralizované klíčové snímky, které jsou dobře zdokumentované a snadno sepoužití, udržovatelné a přizpůsobené konkrétním potřebám vašeho projektu. Představte si to jako tokeny klíčových snímků. Stejně jako používáme tokeny pro barvy a mezery a mnoho z nás již používá tokeny pro vlastnosti animace, jako je trvání a funkce náběhu/doběhu, proč nepoužít tokeny také pro klíčové snímky? Tento přístup lze přirozeně integrovat s jakýmkoli aktuálním pracovním postupem návrhového tokenu, který používáte, a zároveň vyřešit malý problém (duplikace kódu) i větší problém (konflikty globálního rozsahu) najednou. Myšlenka je přímočará: vytvořit jediný zdroj pravdy pro všechny naše společné animace. Tato sdílená šablona stylů obsahuje pečlivě vytvořené klíčové snímky, které pokrývají vzory animací, které náš projekt skutečně používá. Už žádné hádání, zda animace slábnutí již někde v naší kódové základně existuje. Už žádné náhodné přepisování animací z jiných komponent. Ale tady je klíč: nejde jen o statické animace kopírování a vkládání. Jsou navrženy tak, aby byly dynamické a přizpůsobitelné pomocí vlastních vlastností CSS, což nám umožňuje zachovat konzistenci a zároveň mít flexibilitu přizpůsobit animace konkrétním případům použití, například když potřebujete o něco větší „pulzní“ animaci na jednom místě. Sestavení prvního tokenu klíčových snímků Jedním z prvních nízko visících plodů, které bychom měli řešit, je animace „fade-in“. V jednom ze svých nedávných projektů jsem našel více než tucet samostatných definic zatmívání a ano, všechny jednoduše animovaly neprůhlednost od 0 do 1. Vytvořme tedy novou šablonu stylů, nazvěme ji kf-tokens.css, naimportujeme ji do našeho projektu a vložíme do ní naše klíčové snímky se správnými komentáři. /* keyframes-tokens.css */
/* * Fade In - fade vstupní animace * Použití: animace: kf-fade-in 0,3s náběh; */ @keyframes kf-fade-in { od { neprůhlednost: 0; } do { krytí: 1; } }
Tato jediná deklarace @keyframes nahrazuje všechny ty rozptýlené animace fade-in v naší kódové základně. Čisté, jednoduché a globálně použitelné. A nyní, když máme tento token definovaný, můžeme jej použít z libovolné komponenty v celém našem projektu: .modal { animace: kf-fade-in 0,3s náběh; }
.tooltip { animace: kf-fade-in 0,2s easy-in-out; }
.notification { animace: kf-fade-in 0,5s náběh; }
Podívejte se na Tokeny klíčových snímků pera – Demo 2 [rozvětvené] od Amita Sheena. Poznámka: Ve všech názvech @keyframes používáme předponu kf-. Tato předpona slouží jako jmenný prostor, který zabraňuje konfliktům pojmenování s existujícími animacemi v projektu a okamžitě objasňuje, že tyto klíčové snímky pocházejí z našeho souboru tokenů klíčových snímků. Vytvoření dynamického snímku Klíčové snímky kf-fade-in fungují skvěle, protože jsou jednoduché a je v nich málo místa na to, aby se věci pokazily. V jiných animacích však musíme být mnohem dynamičtější a zde můžeme využít obrovskou sílu vlastních vlastností CSS. To je místo, kde tokeny klíčových snímků skutečně září ve srovnání s rozptýlenými statickými animacemi. Vezměme si běžný scénář: „slide-in“ animace. Ale odkud? 100px zprava? 50% zleva? Má vstupovat z horní části obrazovky? Nebo možná vplout ze dna? Tolik možností, ale místo vytváření samostatných klíčových snímků pro každý směr a každou variantu můžeme vytvořit jeden flexibilní token, který se přizpůsobí všem scénářům: /* * Slide In - směrová animace snímku * Pro ovládání směru použijte --kf-slide-from * Výchozí: zasune se zleva (-100 %) * Použití: * animace: kf-slide-in 0,3s easy-out; * --kf-slide-from: -100px 0; // snímek zleva * --kf-slide-from: 100px 0; // snímek zprava * --kf-slide-from: 0 -50px; // posunutí shora */
@keyframes kf-slide-in { od { přeložit: var(--kf-slide-from, -100% 0); } do { přeložit: 0 0; } }
Nyní můžeme použít tento jediný token @keyframes pro jakýkoli směr snímku jednoduše změnou uživatelské vlastnosti --kf-slide-from: .sidebar { animace: kf-slide-in 0,3s easy-out; /* Použije výchozí hodnotu: snímky zleva */ }
.notification { animace: kf-slide-in 0,4s easy-out; --kf-slide-from: 0 -50px; /* snímek shora */ }
.modal { animace: kf-fade-in 0,5s, kf-slide-in 0,5s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 50px 50px; /* snímek z pravého dolního rohu */ }
Tento přístup nám poskytuje neuvěřitelnou flexibilitu při zachování konzistence. Jedna deklarace klíčového snímku, nekonečné možnosti. Podívejte se na Tokeny klíčových snímků pera – Demo 3 [rozvětvené] od Amita Sheena. A pokud chceme, aby naše animace byly ještě flexibilnější a umožnily také „vysouvací“ efekty, můžemejednoduše přidejte uživatelskou vlastnost --kf-slide-to, podobnou té, kterou uvidíme v další části. Klíčové snímky obousměrného přiblížení Další běžnou animací, která se duplikuje napříč projekty, jsou efekty „přiblížení“. Animace přiblížení jsou všude, ať už jde o jemné zvětšení pro toastové zprávy, dramatické přiblížení pro mody nebo jemný efekt zmenšení pro nadpisy. Namísto vytváření samostatných klíčových snímků pro každou hodnotu měřítka sestavíme jednu flexibilní sadu klíčových snímků kf-zoom:
/* * Zoom - měřítko animace * K ovládání hodnot stupnice použijte --kf-zoom-from a --kf-zoom-to * Výchozí: přiblížení od 80 % do 100 % (0,8 až 1) * Použití: * animace: kf-zoom 0,2s náběh; * --kf-zoom-od: 0,5; --kf-zoom-to: 1; // zoom od 50 % do 100 % * --kf-zoom-from: 1; --kf-zoom-to: 0; // zoom od 100 % do 0 % * --kf-zoom-from: 1; --kf-zoom-to: 1,1; // zoom od 100 % do 110 % */
@keyframes kf-zoom { od { měřítko: var(--kf-zoom-from, 0,8); } do { měřítko: var(--kf-zoom-to, 1); } }
S jednou definicí můžeme dosáhnout jakékoli variace přiblížení, kterou potřebujeme: .toast { animace: kf-slide-in 0,2s, kf-zoom 0,4s náběh; --kf-slide-from: 0 100 %; /* snímek shora */ /* Používá výchozí přiblížení: měřítko od 80 % do 100 % */ }
.modal { animace: kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-from: 0; /* dramatický zoom od 0 % do 100 % */ }
.heading { animace: kf-fade-in 2s, kf-zoom 2s náběh; --kf-zoom-from: 1,2; --kf-zoom-to: 0,8; /* jemné zmenšení */ }
Výchozí hodnota 0,8 (80 %) funguje perfektně pro většinu prvků uživatelského rozhraní, jako jsou toastové zprávy a karty, přičemž je stále snadné ji přizpůsobit pro zvláštní případy. Podívejte se na Tokeny klíčových snímků pera – Demo 4 [rozvětvené] od Amita Sheena. Možná jste si v nedávných příkladech všimli něčeho zajímavého: kombinovali jsme animace. Jednou z klíčových výhod práce s tokeny @keyframes je, že jsou navrženy tak, aby se vzájemně hladce integrovaly. Tato hladká kompozice je záměrná, nikoli náhodná. Kompozici animací probereme podrobněji později, včetně toho, kde mohou být problematické, ale většina kombinací je přímočará a snadno implementovatelná. Poznámka: Při psaní tohoto článku a možná i kvůli jeho psaní jsem se přistihl, že přehodnocuji celou myšlenku vstupních animací. Se všemi nedávnými pokroky v CSS, potřebujeme je ještě vůbec? Naštěstí Adam Argyle prozkoumal stejné otázky a brilantně je vyjádřil na svém blogu. To není v rozporu s tím, co je zde napsáno, ale představuje to přístup, který stojí za zvážení, zvláště pokud vaše projekty silně spoléhají na vstupní animace. Nepřetržité animace Zatímco vstupní animace, jako je „fade“, „slide“ a „zoom“ proběhnou jednou a poté se zastaví, nepřetržité animace se donekonečna opakují, aby přitáhly pozornost nebo naznačovaly probíhající aktivitu. Dvě nejběžnější souvislé animace, se kterými se setkávám, jsou „spin“ (pro indikátory načítání) a „pulse“ (pro zvýraznění důležitých prvků). Tyto animace představují jedinečné výzvy, pokud jde o vytváření tokenů klíčových snímků. Na rozdíl od vstupních animací, které obvykle přecházejí z jednoho stavu do druhého, kontinuální animace musí být vysoce přizpůsobitelné ve svých vzorcích chování. Spin Doctor Zdá se, že každý projekt používá více rotujících animací. Některé se točí ve směru hodinových ručiček, jiné proti směru hodinových ručiček. Některé provedou jednu rotaci o 360 stupňů, jiné pro rychlejší účinek provedou několik otočení. Namísto vytváření samostatných klíčových snímků pro každou variantu, pojďme vytvořit jeden flexibilní spin, který zvládne všechny scénáře:
/* * Spin - animace rotace * Použijte --kf-spin-from a --kf-spin-to pro ovládání rozsahu otáčení * Použijte --kf-spin-turns k ovládání velikosti rotace * Výchozí: otáčí se od 0 stupňů do 360 stupňů (1 plné otočení) * Použití: * animace: kf-spin 1s lineární nekonečno; * --kf-spin-turns: 2; // 2 plné otáčky * --kf-spin-from: 0deg; --kf-spin-to: 180deg; // poloviční rotace * --kf-spin-from: 0deg; --kf-spin-to: -360deg; // proti směru hodinových ručiček */
@keyframes kf-spin { od { rotace: var(--kf-spin-from, 0deg); } do { rotace: calc(var(--kf-spin-from, 0deg) + var(--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Nyní můžeme vytvořit libovolnou variaci rotace, kterou chceme:
.loading-spinner { animace: kf-spin 1s lineární nekonečno; /* Používá výchozí: otáčí se od 0 stupňů do 360 stupňů */ }
.fast-loader { animace: kf-spin 1,2s náběh a výstup nekonečné střídání; --kf-spin-turns: 3; /* 3 plné otáčky pro každý směr za cyklus*/ }
.steped-reverse { animace: kf-spin 1.5s steps(8) infinite; --kf-spin-to: -360deg; /* proti směru hodinových ručiček */ }
.subtle-wiggle { animace: kf-spin 2s easy-in-out nekonečné střídání; --kf-spin-from: -16deg; --kf-spin-to: 32°; /* kývání 36 stupňů: mezi -18 a +18 stupni */ }
Podívejte se na Tokeny klíčových snímků pera – Demo 5 [rozvětvené] od Amita Sheena. Krása tohoto přístupu spočívá v tom, že stejné klíčové snímky fungují pro načítání číselníků, otáčení ikon, efekty kývání a dokonce i složité animace s více otáčkami. Pulzní paradox Pulzní animace jsou složitější, protože mohou „pulsovat“ různé vlastnosti. Některé pulzují stupnici, jiné pulzují neprůhlednost a některé pulzují barevné vlastnosti, jako je jas nebo sytost. Namísto vytváření samostatných klíčových snímků pro každou vlastnost můžeme vytvořit klíčové snímky, které fungují s jakoukoli vlastností CSS. Zde je příklad pulzního klíčového snímku s možnostmi měřítka a krytí:
/* * Pulse - pulzující animace * K ovládání rozsahu stupnice použijte --kf-pulse-scale-from a --kf-pulse-scale-to * K ovládání rozsahu krytí použijte --kf-pulse-opacity-from a --kf-pulse-opacity-to * Výchozí: žádný pulz (všechny hodnoty 1) * Použití: * animace: kf-pulse 2s náběh a výstup nekonečné střídání; * --kf-pulse-scale-od: 0,95; --kf-pulse-scale-to: 1,05; // puls měřítka * --kf-pulse-opacity-od: 0,7; --kf-pulse-opacity-to: 1; // pulz opacity */
@keyframes kf-pulse { od { měřítko: var(--kf-puls-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } do { měřítko: var(--kf-pulse-scale-to, 1); opacity: var(--kf-pulse-opacity-to, 1); } }
To vytváří flexibilní pulz, který může animovat několik vlastností: .call-to-action { animace: kf-pulse 0,6s nekonečné střídání; --kf-pulse-opacity-od: 0,5; /* puls krytí */ }
.notification-dot { animace: kf-pulse 0,6s náběh a výstup nekonečné střídání; --kf-pulse-scale-od: 0,9; --kf-pulse-scale-to: 1,1; /* impuls stupnice */ }
.text-highlight { animace: kf-pulse 1,5s náběh nekonečno; --kf-pulse-scale-od: 0,8; --kf-pulse-opacity-od: 0,2; /* měřítko a puls krytí */ }
Podívejte se na Tokeny klíčových snímků pera – Demo 6 [rozvětvené] od Amita Sheena. Tento jediný klíčový snímek kf-pulse zvládne vše od jemného upoutání pozornosti až po dramatická zvýraznění, a to vše při snadném přizpůsobení. Pokročilé uvolňování Jednou ze skvělých věcí na používání tokenů klíčových snímků je, jak snadné je rozšířit naši knihovnu animací a poskytnout efekty, které by se většina vývojářů neobtěžovala psát od začátku, jako je elastický nebo bounce. Zde je příklad jednoduchého tokenu klíčových snímků „bounce“, který používá uživatelskou vlastnost --kf-bounce-from k ovládání výšky skoku. /* * Bounce - poskakující vstupní animace * K ovládání výšky skoku použijte --kf-bounce-from * Výchozí: skoky ze 100vh (mimo obrazovku) * Použití: * animace: kf-bounce 3s easy-in; * --kf-bounce-from: 200px; // skok z výšky 200px */
@keyframes kf-bounce { 0 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99 % { přeložit: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22 %, 45 %, 64 %, 79 %, 90 %, 97 %, 100 % { přeložit: 0 0; animace-časování-funkce: easy-out; } }
Animace jako „elastické“ jsou trochu složitější kvůli výpočtům uvnitř klíčových snímků. Musíme definovat --kf-elastic-from-X a --kf-elastic-from-Y odděleně (obojí jsou volitelné) a společně nám umožňují vytvořit pružný vstup z libovolného bodu na obrazovce.
/* * Elastic In - elastická vstupní animace * K ovládání počáteční polohy použijte --kf-elastic-from-X a --kf-elastic-from-Y * Výchozí: zadává se od středu nahoře (0, -100vh) * Použití: * animace: kf-elastic-in 2s easy-in-out obojí; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // zadejte od (-50px, -200px) */
@keyframes kf-elastic-in { 0 % { přeložit: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16 % { přeložit: calc(var(--kf-elastic-from-X, -50vw) * -0,3227) calc(var(--kf-elastic-from-Y, 0px) * -0,3227); }
28 % { přeložit: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44 % { přeložit: calc(var(--kf-elastic-from-X, -50vw) * -0,0463) calc(var(--kf-elastic-from-Y, 0px) * -0,0463); }
59 % { přeložit: 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 % { přeložit: 0 0; } }
Tento přístup usnadňuje opětovné použití a přizpůsobení pokročilých klíčových snímků v celém našem projektu, a to pouze změnou jedné vlastní vlastnosti.
.bounce-and-zoom { animace: snadné nastartování kf-bounce 3s, kf-zoom 3s lineární; --kf-zoom-from: 0; }
.bounce-and-slide { animace-kompozice: přidat; /* Obě animace používají překlad */ animace: snadné nastartování kf-bounce 3s, kf-slide-in 3s easy-out; --kf-slide-from: -200px; }
.elastic-in { animace: kf-elastic-in 2s easy-in-out obojí; }
Podívejte se na Tokeny klíčových snímků pera – Demo 7 [rozvětvené] od Amita Sheena. Až do této chvíle jsme viděli, jak můžeme konsolidovat klíčové snímky chytrým a efektivním způsobem. Možná budete chtít věci upravit tak, aby lépe vyhovovaly potřebám vašeho projektu, ale probrali jsme příklady několika běžných animací a případů každodenního použití. A s těmito tokeny klíčových snímků nyní máme výkonné stavební bloky pro vytváření konzistentních a udržovatelných animací v celém projektu. Žádné další duplicitní klíčové snímky, žádné globální konflikty rozsahu. Prostě čistý a pohodlný způsob, jak zvládnout všechny naše potřeby animace. Ale skutečná otázka zní: Jak tyto stavební kameny složíme dohromady? Dát to všechno dohromady Viděli jsme, že kombinování základních tokenů klíčových snímků je jednoduché. Nepotřebujeme nic speciálního, než definovat první animaci, definovat druhou, nastavit proměnné podle potřeby a je to. /* Roztmívání + zasouvání */ .toast { animace: kf-fade-in 0,4s, kf-slide-in 0,4s kubický-bezier(0,34, 1,56, 0,64, 1); --kf-slide-from: 0 40px; }
/* Přiblížit + přiblížit */ .modal { animace: kf-fade-in 0,3s, kf-zoom 0,3s cubic-bezier(0,34, 1,56, 0,64, 1); --kf-zoom-od: 0,7; --kf-zoom-to: 1; }
/* Zasunutí + pulz */ .notification { animace: kf-slide-in 0,5s, kf-pulse 1,2s náběh a výstup nekonečné střídání; --kf-slide-from: -100px 0; --kf-pulse-scale-od: 0,95; --kf-pulse-scale-to: 1,05; }
Tyto kombinace fungují krásně, protože každá animace cílí na jinou vlastnost: neprůhlednost, transformaci (přeložit/měřítko) atd. Někdy ale dochází ke konfliktům a my potřebujeme vědět, proč a jak se s nimi vypořádat. Když se dvě animace pokusí animovat stejnou vlastnost – například obě animace měřítka nebo obě animace neprůhlednosti – výsledek nebude takový, jaký očekáváte. Ve výchozím nastavení se na tuto vlastnost skutečně použije pouze jedna z animací, která je poslední v seznamu animací. Toto je omezení toho, jak CSS zpracovává více animací na stejné vlastnosti. Například to nebude fungovat tak, jak bylo zamýšleno, protože se použije pouze animace kf-pulse. .bad-combo { animace: kf-zoom 0,5s vpřed, kf-puls 1,2s nekonečné střídání; --kf-zoom-from: 0,5; --kf-zoom-to: 1,2; --kf-pulse-scale-od: 0,8; --kf-pulse-scale-to: 1,1; }
Přídavek animace Nejjednodušším a nejpřímějším způsobem, jak zpracovat více animací, které ovlivňují stejnou vlastnost, je použít vlastnost animation-composition. V posledním příkladu výše animace kf-pulse nahrazuje animaci kf-zoom, takže neuvidíme počáteční přiblížení a nezískáme očekávané měřítko 1,2. Nastavením kompozice animace, která se má přidat, řekneme prohlížeči, aby obě animace zkombinoval. To nám dává výsledek, který chceme. .komponenta-dva { animace-kompozice: přidat; }
Podívejte se na Tokeny klíčových snímků pera – Demo 8 [rozvětvené] od Amita Sheena. Tento přístup funguje dobře pro většinu případů, kdy chceme kombinovat efekty na stejnou vlastnost. Je také užitečné, když potřebujeme kombinovat animace se statickými hodnotami vlastností. Například, pokud máme prvek, který používá vlastnost translate k umístění přesně tam, kam chceme, a pak jej chceme animovat pomocí klíčových snímků kf-slide-in, dostaneme ošklivý viditelný skok bez kompozice animace. Podívejte se na Tokeny klíčových snímků pera – Demo 9 [rozvětvené] od Amita Sheena. Když je animace nastavena na přidání, animace je hladce kombinována s existujícítransformovat, takže prvek zůstane na místě a animuje se podle očekávání. Animace Stagger Dalším způsobem, jak pracovat s více animacemi, je jejich „rozložení“ – to znamená, že druhou animaci spusťte těsně po dokončení první. Není to řešení, které funguje pro každý případ, ale je užitečné, když máme vstupní animaci následovanou souvislou animací. /* prolínání + pulz opacity */ .notification { animace: kf-fade-in 2s uvolnění, kf-puls 0,5s 2s náběh a výstup nekonečné střídání; --kf-pulse-opacity-to: 0,5; }
Podívejte se na Tokeny klíčových snímků pera – Demo 10 [rozvětvené] od Amita Sheena. Na objednávce záleží Velká část animací, se kterými pracujeme, využívá vlastnost transform. Ve většině případů je to prostě pohodlnější. Má také výkonnostní výhodu, protože transformační animace mohou být akcelerovány GPU. Ale pokud používáme transformace, musíme se smířit s tím, že na pořadí, ve kterém naše transformace provádíme, záleží. Mnoho. V našich klíčových snímcích jsme doposud používali jednotlivé transformace. Podle specifikací jsou tyto vždy aplikovány v pevném pořadí: nejprve se prvek přeloží, poté se otočí a poté se změní měřítko. To dává smysl a je to, co většina z nás očekává. Pokud však použijeme vlastnost transform, pořadí, ve kterém jsou funkce zapsány, je pořadí, ve kterém jsou aplikovány. V tomto případě, když něco posuneme o 100 pixelů na ose X a pak to otočíme o 45 stupňů, není to totéž, jako když to nejprve otočíme o 45 stupňů a pak to posuneme o 100 pixelů. /* Růžový čtverec: Nejprve přeložte, poté otočte */ .example-one { transform: translateX(100px) rotation(45deg); }
/* Zelený čtverec: Nejprve otočte a poté přeložte */ .example-dva { transformovat: otočit(45 stupňů) přeložitX(100px); }
Podívejte se na Tokeny klíčových snímků pera – Demo 11 [rozvětvené] od Amita Sheena. Ale podle pořadí transformace se všechny jednotlivé transformace – vše, co jsme použili pro tokeny klíčových snímků – odehrávají před funkcemi transformace. To znamená, že vše, co nastavíte ve vlastnosti transform, se stane po animacích. Pokud ale nastavíte například překlad společně s klíčovými snímky kf-spin, k překladu dojde před animací. Ještě zmatený?! To vede k situacím, kdy statické hodnoty mohou způsobit různé výsledky pro stejnou animaci, jako v následujícím případě:
/* Společná animace pro oba spinnery */ .spinner { animace: kf-spin 1s lineární nekonečno; }
/* Růžový spinner: přeložit před otočením (individuální transformace) */ .spinner-pink { přeložit: 100 % 50 %; }
/* Zelený číselník: otočte a poté překládejte (pořadí funkcí) */ .spinner-green { transform: translate(100%, 50%); }
Podívejte se na Tokeny klíčových snímků pera – Demo 12 [rozvětvené] od Amita Sheena. Můžete vidět, že první spinner (růžový) dostane přeložení, ke kterému dojde před otočením kf-spin, takže se nejprve přesune na své místo a pak se roztočí. Druhý spinner (zelený) dostane funkci translate(), ke které dojde po individuální transformaci, takže prvek se nejprve otočí, pak se posune vzhledem ke svému aktuálnímu úhlu a dostaneme efekt široké oběžné dráhy. Ne, to není chyba. Je to jen jedna z věcí, které potřebujeme vědět o CSS a mít na paměti při práci s více animacemi nebo více transformacemi. V případě potřeby můžete také vytvořit další sadu klíčových snímků kf-spin-alt, které rotují prvky pomocí funkce rotation(). Snížený pohyb A když mluvíme o alternativních klíčových snímcích, nemůžeme ignorovat možnost „bez animace“. Jednou z největších výhod používání tokenů klíčových snímků je, že přístupnost může být zapečena, a to je vlastně docela snadné. Při navrhování našich klíčových snímků s ohledem na přístupnost můžeme zajistit, aby uživatelé, kteří preferují omezený pohyb, získali plynulejší a méně rušivý zážitek, bez další práce nebo duplikace kódu. Přesný význam slova „Reduced Motion“ se může u jednotlivých animací a od projektu k projektu trochu měnit, ale je třeba mít na paměti několik důležitých bodů: Ztlumení klíčových snímků Zatímco některé animace lze změkčit nebo zpomalit, existují jiné, které by měly úplně zmizet, když je požadováno omezení pohybu. Dobrým příkladem jsou pulzní animace. Abychom se ujistili, že tyto animace neběží v režimu sníženého pohybu, můžeme je jednoduše zabalit do příslušného mediálního dotazu.
@media (prefers-reduced-motion: no-preference) { @keyfrmaes kf-pulse { od { měřítko: var(--kf-puls-scale-from, 1); opacity: var(--kf-pulse-opacity-from, 1); } do { měřítko: var(--kf-pulse-scale-to, 1); neprůhlednost:var(--kf-puls-opacity-to, 1); } } }
Tím je zajištěno, že uživatelé, kteří nastavili předvolby-redukovaný-pohyb na snížení, neuvidí animaci a získají zážitek, který odpovídá jejich preferencím. Okamžitý vstup Některé klíčové snímky nemůžeme jednoduše odstranit, například vstupní animace. Hodnota se musí změnit, musí se animovat; jinak prvek nebude mít správné hodnoty. Ale při sníženém pohybu by tento přechod z počáteční hodnoty měl být okamžitý. Abychom toho dosáhli, definujeme další sadu klíčových snímků, kde hodnota okamžitě přeskočí do koncového stavu. Ty se stanou našimi výchozími klíčovými snímky. Poté do mediálního dotazu přidáme běžné klíčové snímky pro prefers-reduced-motion nastavené na no-preferenci, stejně jako v předchozím příkladu. /* okamžitě vyskočí pro omezení pohybu */ @keyframes kf-zoom { od, do { měřítko: var(--kf-zoom-to, 1); } }
@media (prefers-reduced-motion: no-preference) { /* Původní klíčové snímky přiblížení */ @keyframes kf-zoom { od { měřítko: var(--kf-zoom-from, 0,8); } do { měřítko: var(--kf-zoom-to, 1); } } }
Tímto způsobem uživatelé, kteří preferují omezený pohyb, uvidí prvek okamžitě ve svém konečném stavu, zatímco všichni ostatní získají animovaný přechod. Měkký přístup Jsou případy, kdy chceme zachovat nějaký pohyb, ale mnohem jemnější a klidnější než původní animace. Například odrazový vstup můžeme nahradit jemným fade-in.
@keyframes kf-bounce { /* Měkké prolínání pro snížení pohybu */ }
@media (prefers-reduced-motion: no-preference) { @keyframes kf-bounce { /* Původní klíčové snímky odrazu */ } }
Nyní mají uživatelé s povoleným omezením pohybu stále pocit vzhledu, ale bez intenzivního pohybu odrazu nebo elastické animace. Když jsou stavební bloky na místě, další otázkou je, jak je učinit součástí skutečného pracovního postupu. Psaní flexibilních klíčových snímků je jedna věc, ale zajistit, aby byly spolehlivé ve velkém projektu, vyžaduje několik strategií, které jsem se musel pracně naučit. Implementační strategie a osvědčené postupy Jakmile budeme mít solidní knihovnu tokenů klíčových snímků, skutečnou výzvou je, jak je začlenit do každodenní práce.
Pokušením je zahodit všechny klíčové snímky najednou a prohlásit problém za vyřešený, ale v praxi jsem zjistil, že nejlepší výsledky přináší postupná adopce. Začněte s nejběžnějšími animacemi, jako je fade nebo slide. Jedná se o snadné výhry, které ukazují okamžitou hodnotu bez nutnosti velkých přepisů. Pojmenování je dalším bodem, který si zaslouží pozornost. Konzistentní předpona nebo jmenný prostor jasně ukazuje, které animace jsou tokeny a které jsou místní jednorázové. Zabraňuje také náhodným kolizím a pomáhá novým členům týmu na první pohled rozpoznat sdílený systém. Dokumentace je stejně důležitá jako samotný kód. Dokonce i krátký komentář nad každým tokenem klíčových snímků může později ušetřit hodiny hádání. Vývojář by měl být schopen otevřít soubor tokenů, vyhledat efekt, který potřebuje, a zkopírovat vzor použití přímo do své komponenty. Flexibilita je důvodem, proč tento přístup stojí za námahu. Odhalením rozumných uživatelských vlastností dáváme týmům prostor pro přizpůsobení animace bez narušení systému. Zároveň se snažte nekomplikovat. Poskytněte knoflíky, na kterých záleží, a ostatní udržujte svéprávné. Nakonec nezapomeňte na dostupnost. Ne každá animace potřebuje alternativu se sníženým pohybem, ale mnohé ano. Včasné zapečení těchto úprav znamená, že je nikdy nebudeme muset dodatečně vybavovat později, a ukazuje to úroveň péče, které si naši uživatelé všimnou, i když se o tom nikdy nezmíní.
Podle mých zkušeností se tokeny klíčových snímků jako součást našeho pracovního postupu návrhových tokenů nutí je udržovat. Jakmile jsou na místě, přestanou cítit jako speciální efekty a stanou se součástí designového jazyka, přirozeného rozšíření toho, jak se produkt pohybuje a reaguje. Zabalit se Animace mohou být jednou z nejradostnějších součástí rozhraní budov, ale bez struktury se mohou stát také jedním z největších zdrojů frustrace. Tím, že s klíčovými snímky zacházíte jako s tokeny, vezmete něco, co je obvykle chaotické a těžko spravovatelné, a přeměníte to na jasný a předvídatelný systém. Skutečná hodnota není jen v ušetření několika řádků kódu. Je to v důvěře, že když použijete fade, slide, zoom nebo spin, přesně víte, jak se to bude chovat v projektu. Je to ve flexibilitě, která vychází z uživatelských vlastností bez chaosu nekonečných variací. A je to spíše v přístupnosti zabudované do základu než přidanédodatečný nápad. Viděl jsem, jak tyto nápady fungují v různých týmech a různých kódových základnách a vzor je vždy stejný. Jakmile jsou tokeny na svém místě, klíčové snímky přestanou být rozptýlenou sbírkou triků a stanou se součástí designového jazyka. Díky nim působí produkt více záměrně, konzistentněji a živěji. Pokud si z tohoto článku vezmete jednu věc, budiž toto: animace si zaslouží stejnou péči a strukturu, jakou již věnujeme barvám, typografii a mezerám. Malá investice do tokenů klíčových snímků se vyplatí pokaždé, když se vaše rozhraní posune.
