State Machine 核心概念回顧

如果你已經讀過我之前寫的 Rive 2 State Machine 互動動畫基礎教學，應該對 State Machine 的基本概念不陌生。這篇文章我們要更深入——把 Rive 動畫實際整合到網頁專案中，讓它們真正活起來。

快速回顧一下核心概念：State Machine 是一種管理動畫狀態的機制。每個 State 代表一個動畫狀態（例如：Idle、Hover、Pressed、Loading），而 Transition 則定義了狀態之間的切換條件和過渡動畫。Input 是外部觸發條件，可以是布林值、數值或觸發器。

在 Rive Editor 中設計好 State Machine 之後，接下來的挑戰就是：怎麼在網頁中讓使用者的操作（滑鼠移動、點擊、滾動、表單輸入）驅動這些狀態切換？這就是這篇教學要解決的問題。

網頁端 Runtime 安裝與設定

Rive 提供了多個平台的 Runtime SDK，我們這裡專注在 Web Runtime。安裝方式非常簡單：

使用 npm 安裝：npm install @rive-app/canvas。如果你要在 React 中使用，可以額外安裝 @rive-app/react-canvas。

基礎的初始化程式碼像這樣：建立一個 canvas 元素，然後用 Rive 的 Runtime 載入你的 .riv 檔案。Runtime 會自動偵測並啟動 State Machine。

這裡有一個常見的坑：.riv 檔案的載入是非同步的，你必須確保在動畫完全載入之後才開始操作 State Machine 的 Input。我見過很多人在 onLoad callback 之前就嘗試設定 Input 值，結果什麼都不會發生。

另外，Runtime 支援兩種渲染模式：Canvas 2D 和 WebGL。Canvas 2D 的相容性更好，幾乎所有瀏覽器都支援；WebGL 的效能更好，特別是在有大量向量路徑或模糊效果的動畫中。我的建議是：如果動畫不太複雜，用 Canvas 2D；如果需要高效能，用 WebGL。

React 專案整合實戰

React 是目前最多人使用的前端框架，Rive 官方也有提供 React 專用的 Hook。實際整合時有幾個重點：

使用 useRive Hook 來初始化 Rive 實例。這個 Hook 會回傳一個 ref（綁定到 canvas 元素）和一系列控制方法。你可以透過 useStateMachineInput Hook 來取得和設定 State Machine 的 Input。

實戰範例：假設你設計了一個互動按鈕動畫，有 isHover（Boolean）和 isPressed（Boolean）兩個 Input。在 React 中，你只需要在 onMouseEnter 時設定 isHover 為 true，在 onMouseLeave 時設定為 false，在 onMouseDown/onMouseUp 時控制 isPressed。

需要注意的是，Rive 的 canvas 元素和 React 的虛擬 DOM 是獨立的。這代表 React 的重新渲染不會影響 Rive 動畫的播放狀態，反之亦然。這是一個優點——你不用擔心 React 的 re-render 打斷動畫。

但也帶來一個陷阱：如果你在 useEffect 中初始化 Rive，記得在 cleanup function 中呼叫 rive.cleanup() 來釋放資源。否則在元件重新掛載時會產生記憶體洩漏。

Vue 專案整合方式

Vue 的整合方式和 React 類似，但沒有官方 Hook。你需要自己用 Composition API 封裝一個 composable。

基本做法是在 onMounted 中初始化 Rive 實例，在 onUnmounted 中清理。用 ref 來追蹤 State Machine 的 Input 狀態，並透過 watch 來同步 Vue 的資料和 Rive 的 Input。

Vue 和 React 最大的不同在於模板語法。在 Vue 中，你可以直接在模板上綁定事件：v-on:mouseenter、v-on:mouseleave 等，比 React 的 JSX 更直覺。

一個實用的技巧是封裝一個通用的 RiveAnimation 元件。這個元件接受 src（.riv 檔案路徑）和 stateMachineName 作為 props，內部處理所有的初始化和清理邏輯。這樣在專案中需要使用 Rive 動畫的地方，只需要用這個元件就好。

使用者輸入與觸發器設計

State Machine 的三種 Input 類型在網頁中的應用方式各不相同：

Boolean Input：最常用於開關狀態。例如：選單是否展開、暗色模式是否開啟、元素是否被 hover。在程式碼中，直接設定 input.value = true/false。

Number Input：適合連續變化的數值。最經典的應用是滾動進度——將 window.scrollY 映射到 0-100 的範圍，然後設定為 Number Input 的值。這樣動畫就會隨著滾動播放，效果非常酷。如果你對捲動動畫有興趣，推薦看看 GSAP ScrollTrigger 捲動動畫教學，裡面有很多可以和 Rive 互補的技巧。

Trigger Input：用於一次性事件。例如：點擊按鈕時觸發一個「彈跳」動畫、表單提交成功時觸發一個「打勾」動畫。在程式碼中，呼叫 input.fire() 就會觸發。

進階用法是結合多個 Input 來實現複雜的互動邏輯。例如，一個購物車按鈕可以有：isHover（Boolean）控制 hover 效果、isPressed（Boolean）控制按壓效果、itemCount（Number）控制數字動畫、addItem（Trigger）控制新增商品的動畫。

複雜狀態機：多層狀態與巢狀

當互動邏輯變得複雜時，單層的 State Machine 可能不夠用。Rive 支援幾種方式來處理複雜狀態：

多個 State Machine 並行：你可以在一個 Artboard 中建立多個 State Machine，各自獨立運作。例如，一個控制角色的動作（Idle、Walk、Run），另一個控制表情（Happy、Sad、Surprised）。它們可以同時播放，互不干擾。

Blend States：這是 Rive 2 的強大功能之一。Blend State 允許你根據一個 Number Input 在多個動畫之間平滑混合。例如，角色的行走動畫可以根據速度值在「緩步」和「快走」之間混合。

Layer 結構：在 State Machine 中使用多個 Layer，每個 Layer 控制不同部分的動畫。上層 Layer 可以覆蓋下層的特定屬性。

在網頁整合時，處理複雜狀態的關鍵是建立清楚的 Input 命名規範。我建議使用「feature_action」的格式，例如 cart_isOpen、nav_currentIndex、form_isValid。這樣在程式碼中就能一目了然。

效能優化

Rive 動畫在網頁上的效能通常很好，但如果不注意以下幾點，還是可能出問題：

檔案大小：.riv 檔案的大小直接影響載入時間。盡量避免在 Rive 中使用大量的 bitmap 圖片；善用向量圖形，它們的檔案更小、效能更好。一個典型的互動按鈕動畫，.riv 檔案應該在 50KB 以下。

Canvas 尺寸：canvas 的實際像素大小（不是 CSS 顯示大小）直接影響 GPU 負載。不要把 canvas 設得比需要的更大。使用 devicePixelRatio 來處理 Retina 螢幕，但考慮對低端裝置降低倍率。

動畫暫停：當 Rive 元素不在視窗中時，應該暫停動畫以節省 CPU/GPU 資源。使用 IntersectionObserver 來偵測可見性，在元素離開視窗時呼叫 rive.pause()，重新進入時呼叫 rive.play()。

預載策略：如果頁面上有多個 Rive 動畫，不要一次全部載入。使用 lazy loading——只在動畫即將進入視窗時才開始載入 .riv 檔案。

記憶體管理：每個 Rive 實例都會佔用 WebAssembly 記憶體。在 SPA 中，當頁面切換時，記得清理不再使用的 Rive 實例。這在 React 中就是在 useEffect 的 cleanup function 中處理。

如果你想了解更多動畫效能優化的方法，也可以參考 After Effects 表達式自動化動畫教學中關於動畫效能的觀念，很多原則是相通的。

實戰案例

來分享幾個我實際用 Rive State Machine 在網頁專案中的案例：

案例一：互動式 Onboarding 導覽

為一個 SaaS 產品設計了新手導覽動畫。State Machine 有 5 個主要狀態，對應 5 個步驟。使用者點擊「下一步」時，觸發 Trigger 切換到下一個狀態。每個狀態都有進入動畫和待機動畫。用了 Number Input 來控制進度條的動畫。整個導覽體驗非常流暢，使用者回饋說「像在用 native app」。

案例二：資料視覺化 Dashboard

在一個管理後台的 Dashboard 頁面中，使用 Rive 動畫來呈現數據變化。圖表的數值會根據 API 回傳的數據動態更新。透過 Number Input 將實際數值傳入 State Machine，動畫會平滑地從舊數值過渡到新數值。比起傳統的 CSS transition 或 JavaScript 動畫庫，Rive 的過渡效果更加自然和精緻。

案例三：遊戲化的表單體驗

為一個會員註冊頁面設計了一個卡通角色動畫。角色會根據使用者的操作做出不同反應：輸入 Email 時角色會好奇地看著輸入框；密碼欄位 focus 時角色會遮住眼睛；驗證通過時角色會開心地跳舞；驗證失敗時角色會搖頭。這個小設計讓註冊完成率提升了大約 15%。

案例四：電商產品展示

為一個運動用品品牌設計了互動式的產品展示頁。使用者可以拖曳滑桿來旋轉產品、點擊不同部位查看細節說明。所有的動畫都在一個 State Machine 中管理，透過多個 Number Input 和 Boolean Input 來控制。頁面載入速度比使用 3D 模型的方案快了 3 倍以上。

Rive 2 的 State Machine 加上 Web Runtime，真的讓網頁互動動畫的品質和效率都大幅提升。最大的優勢是設計和開發的協作變得很順暢——設計師在 Rive Editor 中完成所有動畫和狀態設計，開發者只需要連接 Input 就好。如果你還在用 CSS 動畫或 JavaScript 動畫庫來處理複雜的互動效果，強烈建議試試 Rive。