Nakladače GIF vs vektorová animácia: Prečo tímy nahrádzajú animované GIF v používateľskom rozhraní
Prečo sa animované GIF nehodia pre zavádzače a ikony používateľského rozhrania, čo použiť namiesto toho (CSS, SVG, Lottie, video, stavové moduly) a ako si vybrať.
Core Takeaway
Animované GIF sú obmedzené na palety s maximálne 256 farbami, majú priehľadnosť pri zapnutom alebo vypnutom stave, rozmazané pri zmene veľkosti a nemôžu reagovať na stav aplikácie. V prípade zavádzačov a ikon používateľského rozhrania je animácia CSS alebo SVG zvyčajne svetlejšia a ostrejšia; Lottie funguje pre bohatšie ilustrácie; a stavové runtime ako ExodeUI alebo Rive sú najlepšie, keď sa animácia musí meniť s načítaním, úspechom a chybou.
Čo GIF dokáže a čo nemôže
Sprievodca formátom obrázkov MDN vysvetľuje, že každý pixel GIF je indexom do palety maximálne 256 farieb a poznamenáva, že staršie formáty, ako napríklad GIF, fungujú zle v porovnaní s novšími, ako sú WebP a AVIF. V prípade používateľského rozhrania sú praktickými problémami pruhy v prechodoch, zubaté okraje na priehľadnom pozadí, rozmazané škálovanie na obrazovkách s vysokou hustotou a žiadny spôsob, ako reagovať na to, čo aplikácia robí.
Čo použiť namiesto toho
Vyberte si, čo má animácia robiť:
- Jednoduchý spinner alebo pulz: animácia CSS alebo inline SVG. Drobné, ostré a ľahko pozastaviteľné pre znížený pohyb.
- Ilustrovaná slučka alebo ikona: Lottie alebo animovaná SVG. Vektorové, škálovateľné, malé pre jednoduché umelecké diela.
- Fotografické alebo zložité zábery: video (WebM alebo MP4) alebo animované WebP/AVIF, nie GIF.
- Načítač, ktorý sa zmení na úspech alebo chybu: runtime založený na stave, ako napríklad ExodeUI alebo Rive, riadený stavom vašej aplikácie.
Nakladači by mali vedieť, čo sa deje
GIF sa opakuje rovnakým spôsobom bez ohľadu na to, či požiadavka trvá jednu sekundu alebo minútu, a po dokončení práce sa nemôže stať začiarknutím. Stavový zavádzač môže prejsť od načítania k úspechu alebo chybe a ukázať pokrok, ktorý ľuďom povie oveľa viac ako otáčajúci sa obrázok.
Prístupnosť
Looping GIF sám o sebe nedokáže rešpektovať nastavenie zníženého pohybu. Animácie CSS, SVG a runtime sa dajú pozastaviť alebo zjednodušiť, keď používateľ požaduje menej pohybu. Načítavačom tiež dajte prístupný štítok, napríklad „Načítava sa výsledky“, aby používatelia čítačky obrazovky vedeli, čo sa deje.
Kľúč Principle na zapamätanie
- Palety GIF obsahujú najviac 256 farieb a majú slabú mierku
- Pre jednoduché nakladače použite CSS alebo SVG
- Použite Lottie pre ilustrované slučky, video pre zábery
- Keď sa načítanie musí zmeniť na úspech alebo chybu, použite runtime založené na stave
- Podporujte znížený pohyb a pridajte prístupné štítky
Často kladené otázky
Zdroje
- Image file type and format guide — Webové dokumenty MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Webové dokumenty MDN