從 Flash 到 Lottie 再到狀態機：Web 向量動畫的演變
Web 向量動畫如何從 Flash 和 ActionScript 轉移到 Lottie 的 After Effects 匯出，然後轉移到狀態機運行時，以及每個步驟發生的變化。
核心要點
Flash 將向量動畫和互動性結合在一個工具中，但它運行在一個插件中，Adobe 在 2020 年 12 月 31 日後停止支援。 Lottie 透過播放 After Effects 動畫恢復了向量動畫，並與 Bodymovin 一起匯出為 JSON，原生在 Web 和行動裝置上，但這些動畫只能播放。 Rive 和 ExodeUI 等状态机运行时将交互性重新添加到设计文件中。
Flash：動畫和邏輯位於一處
Flash 讓設計人員可以繪製向量、在時間軸上為它們設定動畫並使用 ActionScript 新增行為，所有這些都在一個檔案中。它為遊戲、廣告和整個網站提供動力。它的弱點是插件：它在瀏覽器自己的技術之外運行，存在持續的安全性和效能問題。 Adobe於2020年12月31日後終止對Flash播放器的支持，並從2021年1月12日起阻止Flash內容運作。
Lottie：沒有插件的向量
來自 Airbnb 的 Lottie 使用 Bodymovin 插件解析導出為 JSON 的 Adobe After Effects 動畫，並在 Web、iOS、Android 和 React Native 上本地渲染它們。它使豐富的向量運動再次在應用程式中變得實用，並且它仍然是簡單播放的動畫最廣泛支援的格式。
缺失的部分：互動性
Lottie 檔案描述時間線，而不是行為。讓 Lottie 動畫回應懸停、載入或成功意味著圍繞播放器編寫程式碼。 Flash 內建了這種行為；無插件的世界失去了它。
狀態機：再次在文件中行為
狀態機運作時在沒有插件的情況下恢復了 Flash 的想法。 Rive 可讓您設計向量動畫並將其連接到由您的程式碼控制輸入的狀態機。我們製作的 ExodeUI 將相同的想法應用於產品 UI，在一個打開的 JSON 檔案中添加佈局、彈簧物理和邏輯，該檔案由 React、SwiftUI、Flutter 等運行時播放。
要記住的關鍵 Principle
- Flash 在插件中結合了向量動畫和互動性
- Adobe 於 2020 年 12 月 31 日後結束 Flash 播放器支持
- Lottie 原生播放用 Bodymovin 匯出的 After Effects 動畫
- Lottie動畫播放；互動需要額外的程式碼
- 狀態機運作時將編寫的行為帶回檔案中
常見問題解答
來源
- Adobe Flash Player End of Life — Adobe
- lottie-web — GitHub（愛彼迎）
- State Machine Playback — Rive 文檔