GIF Loaders vs Vector Animation: Hvorfor teams erstatter animerede GIF'er i brugergrænsefladen
Hvorfor animerede GIF'er passer dårligt til UI-indlæsere og ikoner, hvad skal man bruge i stedet (CSS, SVG, Lottie, video, tilstandsbaserede kørselstider) og hvordan man vælger.
Core Takeaway
Animerede GIF'er er begrænset til paletter med højst 256 farver, har tænd-eller-sluk-gennemsigtighed, sløres, når de skaleres og kan ikke reagere på app-tilstand. For UI-indlæsere og ikoner er CSS- eller SVG-animation normalt lettere og skarpere; Lottie virker til rigere illustrationer; og tilstandsbaserede kørselstider såsom ExodeUI eller Rive er bedst, når animationen skal ændres med indlæsning, succes og fejl.
Hvad GIF kan og ikke kan
MDN's billedformatguide forklarer, at hver GIF-pixel er et indeks i en palet på højst 256 farver, og bemærker, at ældre formater som GIF klarer sig dårligt sammenlignet med nyere som WebP og AVIF. For brugergrænsefladen er de praktiske problemer bånd i gradienter, takkede kanter på gennemsigtige baggrunde, sløret skalering på skærme med høj tæthed og ingen måde at reagere på, hvad appen gør.
Hvad skal man bruge i stedet
Vælg efter, hvad animationen skal gøre:
- Enkel spinner eller puls: CSS animation eller en inline SVG. Lille, skarp og nem at sætte på pause for reduceret bevægelse.
- Illustreret sløjfe eller ikon: Lottie eller animeret SVG. Vektor, skalerbar, lille til enkle kunstværker.
- Fotografiske eller komplekse optagelser: video (WebM eller MP4) eller animeret WebP/AVIF, ikke GIF.
- Loader, der bliver til succes eller fejl: en tilstandsbaseret kørselstid, såsom ExodeUI eller Rive, drevet af din apps tilstand.
Læssere bør vide, hvad der sker
En GIF sløjfer på samme måde, uanset om anmodningen tager et sekund eller et minut, og den kan ikke blive et flueben, når arbejdet er færdigt. En statsbaseret loader kan flytte fra indlæsning til succes eller fejl og vise fremskridt, hvilket fortæller folk langt mere end et roterende billede.
Tilgængelighed
Looping GIF'er kan ikke respektere indstillingen for reduceret bevægelse alene. CSS, SVG og runtime-animationer kan sættes på pause eller forenkles, når brugeren beder om mindre bevægelse. Giv også indlæsere en tilgængelig etiket, såsom "Indlæser resultater", så skærmlæserbrugere ved, hvad der sker.
Tast Principles for at huske
- GIF paletter holder højst 256 farver og skaleres dårligt
- Brug CSS eller SVG til simple læssere
- Brug Lottie til illustrerede loops, video til optagelser
- Brug en tilstandsbaseret runtime, når indlæsning skal blive til succes eller fejl
- Understøtter reduceret bevægelse og tilføj tilgængelige etiketter
Ofte stillede spørgsmål
Kilder
- Image file type and format guide — MDN Web Docs
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Web Docs