Lottie 效能問題通常來自文件,而不是播放器。 After Effects 可以輕鬆添加在手機上逐幀渲染成本高的功能。
從文件開始。遮罩和軌道遮罩通常是最大的成本;盡可能用更簡單的形狀替換它們。刪除玩家不需要的效果和模糊。合併形狀、減少層數並仔細預合成。大型嵌入影像會增加記憶體和解碼成本,因此請優化它們或用向量替換它們。 Lottie 檢查器(例如我們的免費 Lottie JSON 檢視器)可協助您檢視文件內的內容。
然後檢查應用程式如何播放它。在螢幕外、關閉的選項卡內或滾動離開的清單儲存格內持續循環的動畫仍然會消耗 CPU 和電池。當它們不可見時暫停它們並停止不需要的循環。避免同時播放數十個動畫。
為您的平台選擇正確的選項。在網路上,SVG 和畫布渲染器的效能因動畫而異,因此請對兩者進行測試。壓縮的 .lottie (dotLottie) 格式可減少下載大小。在 Android 上,在您的播放器支援的情況下使用硬體加速進行測試。
最後,在低端設備上進行測量。如果動畫仍然太重,那麼它可能不是適合這項工作的工具:簡單的 CSS 或本機動畫可以取代裝飾循環,並且互動式元件可能會更好地建立在基於狀態的工具中,例如我們製作的 Rive 或 ExodeUI。