2026 年 React Native 和 Flutter 團隊的最佳動畫工具
Reanimated、Flutter 的動畫 API、Lottie、Rive 和 ExodeUI 與 React Native 和 Flutter 進行了比較：每個函數做什麼、誰編寫動作以及何時使用它。
核心要點
對於用程式碼編寫的運動，在 React Native 中使用 Reanimated，在 Flutter 中使用 Flutter 的內建隱式和明確動畫。對於僅播放的設計動畫，請使用Lottie（lottie-react-native，或Flutter的lottie套件）。對於設計的具有狀態的互動式動畫，請使用 Rive 或 ExodeUI，它們都具有 React Native 和 Flutter 的運行時間。我們生產ExodeUI。
兩個問題決定工具
誰擁有該動議，程式碼的開發人員還是工具的設計人員？它只是播放，還是對狀態和輸入做出反應？這兩個答案很快就縮小了選擇範圍。
程式碼優先
Reanimated，源自Software Mansion，是標準的React Native動畫庫。它的文件稱，JavaScript 中定義的動畫預設在 UI 執行緒上本機運行，並且它與手勢處理程序配對以實現互動式手勢。在Flutter中，框架本身提供隱式動畫（最簡單的預先包裝選項）和帶有AnimationController的明確動畫以實現完全控制。兩者都是免費的，並為開發人員提供了完全的控制權，但代價是每次轉換都要手寫。
設計播放的動畫：Lottie
Lottie 播放匯出為 JSON 的 After Effects 動畫。 lottie-react-native 提供了 React Native 綁定，pub.dev 上的lottie 套件是純 Dart Flutter 實作。它非常適合不需要對狀態做出反應的插圖、入門藝術和加載程序。
設計與互動：Rive 和 ExodeUI
Rive 具有適用於兩個平台（rive-react-native 和 rive Flutter 套件）的官方運行時，並且是具有狀態機的互動式向量動畫的既定選擇。我們製作的ExodeUI也有React Native和Flutter運行時；它專注於產品 UI，在一個打開的 JSON 檔案中包含佈局、彈簧物理和邏輯，同一團隊也可以在 Web 和 SwiftUI 中使用該檔案。
選擇
典型組合：
- 開發人員擁有的一些過渡和手勢：Reanimated 或 Flutter 動畫。
- 來自動作設計師的插圖和循環：Lottie。
- 人物和說明性互動圖形：Rive。
- 跨行動裝置和 Web 共享的互動式產品元件：ExodeUI 或 Rive。
- 大多數應用程式：一個程式碼優先的函式庫加上一個設計工具運行時。
要記住的關鍵 Principle
- 代碼優先：Reanimated (React Native)、隱式和明確動畫 (Flutter)
- 設計動畫播放：Lottie 在兩個平台上
- 互動設計的動畫：Rive 或 ExodeUI 運行時
- 根據動議的擁有者以及是否對狀態做出反應來選擇
- 大多數團隊將程式碼庫與一個設計工具運行時結合
常見問題解答
來源
- React Native Reanimated — Software Mansion
- Introduction to animations — Flutter 文檔
- lottie-react-native — npm
- rive-react-native — npm
- lottie (Flutter package) — pub.dev