Rive 2 State Machine 互動動畫教學：狀態機實戰

為什麼 State Machine 是 Rive 動畫的靈魂？

如果你玩過 Rive 一陣子，應該會發現一件事：單純的時間軸動畫做起來很快，但要讓動畫「活起來」——根據使用者的點擊、滑鼠移入移出來切換不同狀態——那就是 State Machine 登場的時刻了。

State Machine（狀態機）本質上是一個視覺化的圖形編輯器，讓你用「連連看」的方式把不同動畫狀態串起來，定義它們之間的轉場邏輯。聽起來很學術，但實際操作起來比你想像的簡單很多。如果你還沒接觸過 Rive，建議先看看Rive 動畫入門教學打個基礎。

跟傳統的Lottie 動畫相比，Rive 的狀態機讓你不用寫一堆 if-else 來控制動畫切換，所有邏輯都在編輯器裡視覺化完成。而且 Rive 檔案體積比 Lottie 小得多，效能表現更好，特別適合行動裝置。

State Machine 五大核心概念

在動手之前，先搞清楚這五個基本元件，後面操作會順很多：

1. Graph（圖形面板）

這是你編排所有狀態和轉場的工作區。打開 Rive Editor 的 State Machine 面板，你會看到一個乾淨的畫布，上面有一個預設的 Entry 節點。所有的故事都從這裡開始。

2. States（狀態）

每個 State 通常對應一段時間軸動畫。最常見的例子就是按鈕的 Idle（閒置）和 Pressed（按下）兩個狀態。除了時間軸動畫，State 也可以是 Blend State（混合狀態）或是空的 Placeholder。

3. Transitions（轉場）

從一個 State 拉一條線到另一個 State，就建立了一個 Transition。你可以在上面設定觸發條件，例如「當 Boolean Input 為 true 時，從 Idle 轉場到 Hover」。轉場還能設定持續時間和 easing curve，讓切換更滑順。

4. Inputs（輸入）

Input 是外部世界跟動畫溝通的橋樑，有三種類型：

Trigger Input：一次性觸發，像是按鈕被點擊的瞬間
Boolean Input：開關型，true / false 切換狀態
Number Input：數值型，可以用數字驅動動畫，例如滑桿進度

要注意的是，Rive 官方已經對舊版 Inputs 系統發出了 deprecation 通知，建議新專案使用 Data Binding 來取代。後面會詳細講這個。

5. Layers（圖層）

一個 State Machine 可以有多個 Layer，各層獨立運作、互不干擾。這在做複雜動畫時超好用——比如角色的身體動作放一層、表情放另一層，透過 Layer Mixing 讓它們同時播放。

Listeners：讓動畫聽懂使用者的操作

有了 State Machine 的基本架構，接下來要讓動畫對使用者的操作做出反應。Rive 的 Listener 系統支援三種常用事件：

Pointer Enter：滑鼠移入元素區域
Pointer Exit：滑鼠移出元素區域
Click：點擊元素

在 Rive Editor 中，你可以直接在圖形上建立 Listener，指定觸發哪個 Input。不需要寫任何程式碼，滑鼠滑過按鈕就自動切換到 Hover 狀態，點擊就觸發 Pressed 動畫。這種做法跟AE 表達式自動化的概念有點像，都是減少手動控制、讓系統自己處理邏輯。

Data Binding：取代舊版 Inputs 的新做法

Rive 最新推薦的做法是用 Data Binding 來連結外部資料跟動畫狀態。相比舊版 Inputs 系統，Data Binding 更靈活、更好維護，也更適合跟前端框架整合。

核心概念是：你在 Rive Editor 裡定義好資料結構（View Model），然後在程式碼端直接綁定資料。當資料變動時，動畫會自動更新——不需要手動去操作 State Machine 的 Input。

這對做 Dashboard、表單驗證、即時資料視覺化這類需求來說，簡直是救星。

實戰：在 React 中整合 Rive State Machine

理論講夠了，來看實際的程式碼。Rive 官方提供了 React、Angular、Flutter、Unity 等平台的 Runtime SDK，這裡用 React 示範。

安裝與基本設定

npm install @rive-app/react-canvas

基本使用：載入帶 State Machine 的 Rive 檔案

import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

function InteractiveButton() {
  const { rive, RiveComponent } = useRive({
    src: '/animations/button.riv',
    stateMachines: 'ButtonState',
    autoplay: true,
  });

  const hoverInput = useStateMachineInput(
    rive, 'ButtonState', 'isHover'
  );

  const handleMouseEnter = () => {
    if (hoverInput) hoverInput.value = true;
  };

  const handleMouseLeave = () => {
    if (hoverInput) hoverInput.value = false;
  };

  return (
    <RiveComponent
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{ width: 200, height: 60 }}
    />
  );
}

上面這段很直覺：載入 .riv 檔案，指定要用哪個 State Machine，然後用 useStateMachineInput 拿到 Boolean Input 的控制權。滑鼠進出時切換值，動畫就自動跟著轉場。

進階：使用 Trigger Input 做點擊回饋

function LikeButton() {
  const { rive, RiveComponent } = useRive({
    src: '/animations/like.riv',
    stateMachines: 'LikeStateMachine',
    autoplay: true,
  });

  const triggerLike = useStateMachineInput(
    rive, 'LikeStateMachine', 'triggerLike'
  );

  const handleClick = () => {
    if (triggerLike) triggerLike.fire();
  };

  return (
    <RiveComponent
      onClick={handleClick}
      style={{ width: 48, height: 48, cursor: 'pointer' }}
    />
  );
}

Trigger Input 跟 Boolean 不同，它是「射後不理」——呼叫 .fire() 就觸發一次，State Machine 會自己處理後續的轉場和回歸。非常適合做按讚、收藏這類一次性的互動動畫。

Skeletal Rigging 與 Mesh Deformation

講到 Rive 的進階動畫技巧，骨骼綁定（Skeletal Rigging）跟網格變形（Mesh Deformation）是兩個關鍵能力。

骨骼系統讓你可以像操控木偶一樣驅動角色動畫，搭配 State Machine 就能做出「走路 → 跑步 → 跳躍」的流暢切換。Mesh Deformation 則讓你可以對圖形做更細緻的變形，像是布料飄動、表情扭曲這類效果。

這些技巧跟Cavalry 程式驅動動畫走的是不同路線——Cavalry 偏向程式化生成，Rive 更著重手動設計配合狀態邏輯。兩者各有擅長的領域。

效能考量與最佳實踐

Rive 在效能方面有幾個天然優勢：

檔案超小：一個包含多個 State Machine 的 .riv 檔通常只有幾十 KB，比同等複雜度的 Lottie JSON 檔小很多
GPU 加速渲染：Rive Runtime 使用自己的渲染引擎，在 Canvas 或 WebGL 上跑，不走 DOM
State Machine 邏輯在 Runtime 內部執行：轉場計算不會卡在 JavaScript 主線程

幾個實用建議：

善用 Layer 分離獨立動畫，避免單一 State Machine 過於複雜
Number Input 搭配 Blend State 可以做出平滑的數值驅動動畫（像進度條）
新專案盡量用 Data Binding 取代舊版 Inputs，官方已明確建議遷移
如果動畫只需要簡單播放不需要互動，用AE Shape Layer 配 Lottie 也許更快

什麼時候該選 Rive？

最後做個簡單的判斷框架。Rive State Machine 特別適合這些場景：

需要根據使用者操作即時切換動畫狀態的互動介面
行動裝置 App（Flutter、React Native）要求高效能、低檔案大小
遊戲化 UI，像是角色動畫、成就系統、互動引導
需要設計師和工程師緊密協作的專案——設計師在 Rive Editor 做好邏輯，工程師只要接 SDK

如果你的需求只是播一段裝飾性動畫，沒有互動邏輯，那 Lottie 可能就夠了。但只要牽涉到「根據某個條件切換不同動畫」這種需求，Rive 的 State Machine 就是目前最優雅的解法。

Rive 2 State Machine 互動動畫完整教學：用狀態機打造專業級動態介面