Rive 2.0 互動網頁動畫完全攻略：用 State Machine 打造流暢微互動體驗

為什麼 2026 年你該認真看待 Rive 2.0

老實說，我一開始對 Rive 是抱持觀望態度的。畢竟 Lottie 已經用得好好的，幹嘛要換工具？但當我在一個電商專案中需要做到滑鼠 hover 時商品卡片會有物理反彈效果時，Lottie 的侷限性就暴露無遺了。

Rive 2.0 最大的革新在於 State Machine 的全面升級。它支援 Blend States、條件觸發、甚至嵌套狀態機。你可以在一個動畫檔案裡定義完整的互動邏輯，不需要靠 JavaScript 寫一堆 if-else。

根據 Rive 官方基準測試，同樣動畫在 Rive Runtime 下檔案大小只有 Lottie 的 1/10 到 1/5，渲染效能快了 3-5 倍。

State Machine 核心概念拆解

每個 State 代表一段動畫，Transition 定義狀態切換。關鍵在於 Inputs：Boolean、Number、Trigger 三種類型。按鈕互動有 idle、hover、pressed、loading、success 五個狀態，定義 isHovered Boolean 和 onClick Trigger 就好。

Blend States 允許根據數值在多個動畫間平滑插值，以前需要大量 sprite sheet，現在在 Rive Editor 拖拉就搞定。

網頁整合實戰

Rive 提供 @rive-app/react-canvas 和 @rive-app/canvas 兩個套件。安裝：npm install @rive-app/react-canvas。注意 .riv 檔放 public 目錄，Canvas 尺寸要明確設定。

透過 useStateMachineInput hook 取得 input reference，在事件處理器中修改值即可。自定義字體務必嵌入到 .riv 檔案。

效能實測：Rive 2.0 vs Lottie vs CSS Animation

• CSS Animation：最輕量，60 個粒子就掉幀
• Lottie：JSON 287KB，平均 12ms/frame
• Rive 2.0：.riv 31KB，平均 3ms/frame，支援 WebGL

想了解更多程序化動畫可參考 Blender Geometry Nodes 程序化動畫入門。

設計師與開發者的協作流程

設計師可在 Rive Editor 定義互動邏輯，開發者只需綁定 Input。命名規範：Input 用 camelCase、State Machine 用 PascalCase、Animation 用 snake_case。多利用 Listener 預覽互動效果，能減少 50% 來回修改。

搭配影片級動態圖形可看 AE 2026 Substance 3D 素材指南。

實務開發的五個關鍵提醒

• 記憶體管理：unmount 時呼叫 cleanup()
• 響應式設計：用 Fit.contain 搭配 Alignment.center
• 無障礙：加 role=img 和 aria-label
• SSR 相容：Next.js 用 dynamic import 搭配 ssr: false
• 版本鎖定：Editor 和 Runtime 版本要對應