Rive 2 State Machine 進階教學：打造互動角色動畫與遊戲化 UI（2026 實戰）

為什麼 State Machine 是 Rive 的靈魂？

用過 Lottie 的人應該都有過這種經驗：動畫做好了、播放也沒問題，但要加上互動邏輯的時候就卡住了。你想讓按鈕 hover 的時候有動畫、點擊後切換狀態、根據資料動態改變角色表情——這些在 Lottie 裡面都不容易做到。

Rive 2 的 State Machine 就是為了解決這個問題而生的。它讓你在動畫編輯器裡就能設定完整的互動邏輯，不需要用程式碼硬寫。說白了，State Machine 就是一個視覺化的狀態管理工具，你定義好每個狀態（站立、行走、跳躍）和轉換條件（按下按鈕、滑鼠進入），Rive 就會自動處理狀態之間的切換和過渡動畫。

如果你還在觀望要不要學 Rive，可以先看看 Rive 2 State Machine Web 整合教學了解基礎概念。這篇文章會假設你已經知道怎麼建立基本的 State Machine，直接進入進階技巧。

巢狀 State Machine：管理複雜動畫的關鍵

當你的互動動畫越來越複雜，單一 State Machine 的節點會多到讓人崩潰。這時候就需要巢狀 State Machine（Nested State Machines）。

概念很簡單：把大的邏輯拆分成幾個小的 State Machine，然後在主 State Machine 裡引用它們。比如一個互動角色，你可以這樣拆分：

• Body State Machine：控制身體動作（站立、行走、跑步）
• Face State Machine：控制表情（開心、生氣、驚訝）
• Accessories State Machine：控制配件（帽子、眼鏡的顯示/隱藏）

每個子 State Machine 獨立運作，互不干擾。這樣的架構不但好維護，也讓團隊可以分工——一個人做身體動畫，另一個人做表情，最後組合起來就好。

Blend States：流暢的動畫混合

Blend States 是 Rive 2 最讓我驚豔的功能之一。傳統的狀態轉換是「A 狀態到 B 狀態」的切換，但 Blend States 讓你在多個動畫之間做平滑混合。

最經典的應用場景是角色移動：

• 速度 0 → 播放「站立」動畫
• 速度 0.5 → 「站立」和「行走」各 50% 混合
• 速度 1.0 → 100%「行走」動畫
• 速度 1.5 → 「行走」和「跑步」混合

這種效果用傳統的關鍵影格很難做到，但 Rive 的 Blend States 只需要設定好參數範圍，引擎自動幫你處理混合計算。在遊戲化 UI 和互動網頁裡，這個功能可以讓動畫品質直接提升一個層級。

Listeners 與 Events：動畫跟程式碼的溝通橋樑

State Machine 的互動不只是在動畫編輯器裡自嗨。透過 Listeners 和 Events 系統，你可以讓動畫跟外部程式碼雙向溝通。

Listeners（監聽器）

Listeners 定義了哪些使用者操作會觸發狀態變化：

• Pointer Enter / Exit：滑鼠進入/離開指定區域
• Pointer Down / Up：點擊/放開
• Pointer Move：滑鼠移動（可以用來做眼睛跟隨效果！）

Events（事件）

Events 則是動畫向程式碼發送訊號的方式。比如角色完成跳躍動畫後觸發一個「jumpComplete」事件，前端收到後更新分數。

// Web Runtime API 監聽事件
const rive = new Rive({
  src: 'character.riv',
  canvas: document.getElementById('canvas'),
  autoplay: true,
  stateMachines: 'MainState',
  onRiveEvent: (event) => {
    if (event.data.name === 'jumpComplete') {
      updateScore();
    }
  }
});

這種雙向溝通機制讓 Rive 不只是一個動畫工具，而是一個完整的互動引擎。

Data Binding：用資料驅動動畫

Rive 2 的 Data Binding 功能讓你可以用外部資料即時控制動畫的各種屬性。這在 dashboard 和資料視覺化場景特別有用。

常見的應用方式：

• 進度條動畫：綁定一個 Number Input，數值 0-100 控制進度條的長度
• 角色自訂：綁定 Color Input 讓使用者選擇角色顏色
• 狀態指示器：綁定 Boolean Input 控制「上線/離線」的動畫狀態

在 Runtime API 中設定 Input 值非常直覺：

const inputs = rive.stateMachineInputs('MainState');
const progressInput = inputs.find(i => i.name === 'progress');
progressInput.value = 75; // 動畫自動更新到 75%

Runtime API：Web 與 Mobile 整合

Rive 提供了多個平台的 Runtime SDK，我這邊以 Web 為主介紹幾個常用的 API 操作。

基本整合

import { Rive, Layout, Fit, Alignment } from '@rive-app/canvas';

const rive = new Rive({
  src: 'animation.riv',
  canvas: document.getElementById('rive-canvas'),
  layout: new Layout({
    fit: Fit.Contain,
    alignment: Alignment.Center
  }),
  autoplay: true,
  stateMachines: 'MainState'
});

效能考量

• 使用 @rive-app/canvas（Canvas 2D）還是 @rive-app/webgl（WebGL）？一般 UI 動畫用 Canvas 2D 就夠了，效能差異不大。但如果有大量粒子效果或複雜的 Blend，WebGL 會更流暢
• 記得在元件卸載時呼叫 rive.cleanup()，避免記憶體洩漏
• 不需要的動畫可以暫停播放：rive.pause()

如果你對其他動畫整合方案有興趣，可以比較一下 GSAP ScrollTrigger 捲動動畫教學和 Lottie 動畫網頁嵌入教學。

實戰範例：互動角色與遊戲化 UI

範例一：互動吉祥物

很多產品的首頁都有一個小吉祥物跟使用者互動。用 Rive 實作的思路：

1. 建立角色的基本動畫（呼吸、眨眼、揮手）
2. 用 Nested State Machine 分離身體和表情
3. 加入 Pointer Move Listener，讓眼睛跟隨游標
4. 點擊觸發特殊動畫（跳舞、變身）
5. 用 Event 回傳互動數據到 Analytics

範例二：遊戲化進度系統

把無聊的進度條變成一個角色冒險的動畫：

1. 設計一個角色在地圖上移動的動畫
2. 用 Blend States 控制移動速度（根據進度增加的快慢）
3. 每到一個里程碑觸發慶祝動畫（用 Events 通知前端顯示獎勵）
4. Data Binding 綁定實際進度數據

這種做法比起傳統的 CSS 動畫進度條，使用者體驗完全不在同一個層級。

效能最佳化建議

• 控制檔案大小：.riv 檔案盡量在 100KB 以內，複雜動畫也別超過 500KB
• 減少節點數：不必要的圖層和路徑會影響渲染效能
• 善用 Artboard 管理：把不同場景放在不同 Artboard，只載入需要的部分
• 測試低階裝置：Rive 在手機上的效能不如桌面，複雜動畫要特別注意
• Lazy Loading：首屏以外的動畫用 Intersection Observer 延遲載入

結語：Rive 2 State Machine 的無限可能

老實說，第一次接觸 Rive 的 State Machine 時，我覺得學習曲線有點陡。但一旦你理解了狀態、轉換、輸入這些核心概念，就會發現它打開了一個全新的互動設計世界。

跟 Lottie 比起來，Rive 的優勢在於原生的互動支援和更小的檔案大小。跟直接寫 Canvas/WebGL 動畫比，Rive 讓設計師和開發者能真正協作，而不是各做各的。

建議從一個簡單的互動按鈕開始練習，慢慢加入 Blend States 和 Events，你會愛上這個工具的。