GIF 加载程序与矢量动画：为什么团队要替换 UI 中的动画 GIF

GIF 能做什么和不能做什么

MDN 的图像格式指南解释说，每个 GIF 像素都是最多 256 种颜色的调色板的索引，并指出 GIF 等旧格式与 WebP 和 AVIF 等新格式相比性能较差。对于 UI，实际问题是渐变带、透明背景上的锯齿状边缘、高密度屏幕上的模糊缩放以及无法响应应用程序正在执行的操作。

用什么代替

根据动画需要执行的操作进行选择：

• 简单的旋转器或脉冲：CSS 动画或内联 SVG。小巧、锐利且易于暂停以减少运动。
• 插图循环或图标：Lottie 或动画 SVG。矢量，可扩展，小，适合简单的艺术品。
• 摄影或复杂素材：视频（WebM 或 MP4）或动画 WebP/AVIF，而不是 GIF。
• 导致成功或错误的加载器：基于状态的运行时，例如 ExodeUI 或 Rive，由应用程序的状态驱动。

装载机应该知道发生了什么

无论请求花费一秒还是一分钟，GIF都会以相同的方式循环，并且当工作完成时它不能成为复选标记。基于状态的加载器可以从加载到成功或错误并显示进度，这比旋转图像告诉人们的更多。

无障碍

循环 GIF 无法自行遵循缩减运动设置。当用户要求减少运动时，可以暂停或简化 CSS、SVG 和运行时动画。还为加载程序提供可访问的标签，例如“加载结果”，以便屏幕阅读器用户知道发生了什么。