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 和運行時動畫。還為載入程式提供可存取的標籤，例如“載入結果”，以便螢幕閱讀器使用者知道發生了什麼。