教你製作強大的 Rive 動畫,完成一隻 Flutter Dash,在 APP 跟它互動!

Yii Chen
Flutter Formosa
Published in
15 min readMar 2, 2023

--

簡單好上手的 Rive Animation

已經想很久要製作動畫,之前想說要嘗試 Lottie 還是 Rive,動畫能製作的效果都很棒,不過 Flutter 持續有在跟 Rive 合作,社群活躍,團隊本身也有 Flutter 開發者會分享一些相關應用,讓我對它產生興趣,而且很快就能上手了,趕緊跟著我來了解吧!

  • 動畫開發服務與平台,前身為 Flare
  • Flutter 持續有在推廣 Rive 也經常合作,最新的作品為 Holobooth
  • 跨平台支援,在任何地方都能運行的交互式動畫格式,包含手機、網頁、桌面應用,當然 APP 相關有 Android、iOS、Flutter、React Native
  • 使用網頁編輯器和 MacOS 版本製作動畫
  • 免費帳戶允許創建 3 個專案,每個都可創建無限的模板,對個人來說很夠用了

官網:https://rive.app/

下載:https://rive.app/downloads

文件:https://help.rive.app/

Rive 與 Lottie 比較

  • Rive 不需要安裝額外的工具、軟體,例如:AE,可以直接在網頁上製作動畫。而現在也有了 MacOS 版本,體驗一樣好
  • Rive 擁有更多與動畫互動的功能,例如:Bone、Weight、Blend…。Lottie 為矢量 GIF,能操作的互動性有限
  • Rive 從製作到產出都是在相同平台,確保品質與效果在多平台都是一致的。Lottie 經由多個工具的輔助,他們都不是互相設計,所以沒辦法保證最後的顯示相同
  • Rive 文件更小、更快,不太消耗裝置的記憶體
  • Rive 支援團隊協作,一起設計
https://rive.app/blog/rive-as-a-lottie-alternative

官方範例

--

--

Yii Chen
Flutter Formosa

Flutter Lover || Organizer FlutterTaipei || Writer, Speaker || wanna make Flutter strong in Taiwan. https://linktr.ee/yiichenhi