Nakladače GIF vs vektorová animace: Proč týmy nahrazují animované GIF v uživatelském rozhraní
Proč se animované GIF nehodí pro zavaděče uživatelského rozhraní a ikony, co místo nich použít (CSS, SVG, Lottie, video, stavová běhová prostředí) a jak si vybrat.
Core Takeaway
Animované GIF jsou omezeny na palety maximálně 256 barev, mají průhlednost při zapnutí nebo vypnutí, při změně velikosti jsou rozmazané a nemohou reagovat na stav aplikace. U zavaděčů a ikon uživatelského rozhraní je animace CSS nebo SVG obvykle světlejší a ostřejší; Lottie funguje pro bohatší ilustrace; a běhová prostředí založená na stavu, jako je ExodeUI nebo Rive, jsou nejlepší, když se animace musí měnit s načítáním, úspěchem a chybou.
Co GIF umí a co nemůže
Průvodce formátem obrázků MDN vysvětluje, že každý pixel GIF je indexem do palety maximálně 256 barev, a poznamenává, že starší formáty, jako je GIF, fungují špatně ve srovnání s novějšími, jako jsou WebP a AVIF. U uživatelského rozhraní jsou praktickými problémy pruhování v přechodech, zubaté okraje na průhledném pozadí, rozmazané měřítko na obrazovkách s vysokou hustotou a žádný způsob, jak reagovat na to, co aplikace dělá.
Co použít místo toho
Vyberte, co má animace dělat:
- Jednoduchý spinner nebo pulz: animace CSS nebo inline SVG. Drobné, ostré a snadno pozastavitelné pro snížení pohybu.
- Ilustrovaná smyčka nebo ikona: Lottie nebo animovaný SVG. Vektor, škálovatelný, malý pro jednoduchou kresbu.
- Fotografické nebo složité záběry: video (WebM nebo MP4) nebo animované WebP/AVIF, nikoli GIF.
- Loader, který se změní v úspěch nebo chybu: běhové prostředí založené na stavu, jako je ExodeUI nebo Rive, řízené stavem vaší aplikace.
Nakladači by měli vědět, co se děje
GIF se opakuje stejným způsobem, ať požadavek trvá jednu sekundu nebo jednu minutu, a nemůže se stát zaškrtnutím, když je práce hotová. Stavový zavaděč může přejít od načítání k úspěchu nebo chybě a ukázat pokrok, což lidem řekne mnohem více než rotující obrázek.
Přístupnost
Looping GIF sám o sobě nemůže respektovat nastavení sníženého pohybu. Animace CSS, SVG a runtime lze pozastavit nebo zjednodušit, když uživatel požádá o méně pohybu. Zavaděčům také dejte přístupný štítek, například „Načítání výsledků“, aby uživatelé čteček obrazovky věděli, co se děje.
Klíč Principle k zapamatování
- Palety GIF obsahují maximálně 256 barev a mají špatné měřítko
- Pro jednoduché nakladače použijte CSS nebo SVG
- Použijte Lottie pro ilustrované smyčky, video pro záběry
- Když se načítání musí změnit v úspěch nebo chybu, použijte běhové prostředí založené na stavu
- Podporujte omezený pohyb a přidejte pří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