做過網頁動效的人一定聽過 Lottie，那個讓設計師用 After Effects 匯出 JSON、前端工程師播放的工具。但老實說，我用 Lottie 做了兩年，一直覺得少了點什麼——它只能「播放」，沒辦法真正「互動」。

直到我碰到 Rive，整個工作流程都被翻轉了。這篇 Rive 動畫教學會帶你從頭了解這個工具，為什麼它是打造互動式網頁動效的最佳選擇，以及怎麼把它實際用在專案裡。

Rive 是什麼？為什麼它跟 Lottie 不一樣

簡單講，Rive 是一個網頁版的 2D 互動動畫設計工具。它跟 Lottie 最大的差別在於：Lottie 本質上是動畫播放器，你在 After Effects 做好動畫，匯出 JSON，前端播放，就這樣；而 Rive 是一個完整的互動引擎，你可以在裡面畫圖、做動畫、設定互動邏輯，全部在同一個地方完成。

我常跟同事這樣解釋：Rive 的工作流程就像是把 Figma（繪圖）+ After Effects（動畫）+ Unity（互動邏輯）揉成一個工具。聽起來很誇張，但實際用過之後你會覺得這比喻蠻精確的。

跨平台支援也是它的大殺器。Rive 檔案可以跑在 Web、iOS、Android、Flutter、React Native 上面，一個檔案打天下。底層用 JS/WASM runtime 搭配 Canvas + WebAssembly 渲染，GPU 記憶體佔用非常低，行動裝置上跑起來也很流暢。

如果你之前有用過 Lottie，可以看看Lottie 動畫教學：AE 到網頁動效這篇，對比一下兩者的差異會更有感覺。

誰在用 Rive？那些你認識的產品

你可能覺得 Rive 是個小眾工具，但其實很多大咖都在用：

Spotify Wrapped——每年底那個超酷的年度回顧動畫，就是用 Rive 做的
Duolingo——那隻綠色貓頭鷹的各種表情動畫
Figma——沒錯，Figma 自己的某些 UI 動效也是 Rive

這些團隊選 Rive 的理由很一致：效能好、檔案小、互動性強。一個 .riv 檔案通常只有幾十 KB，比同等複雜度的 Lottie JSON 小很多。

Rive 核心概念：三個你必須搞懂的東西

在開始實作之前，有三個核心概念你得先理解：

1. Artboard（畫板）

就是你的畫布，所有元素都放在這上面。一個 Rive 檔案可以有多個 Artboard，每個代表一個獨立的動畫場景。

2. Animation（動畫時間軸）

跟 After Effects 的時間軸概念一樣，你在這裡設定關鍵影格、調 easing curve、控制動畫的播放。支援骨骼動畫、路徑動畫、形狀變換等等。

3. State Machine（狀態機）

這是 Rive 的殺手級功能。State Machine 讓你用視覺化的方式定義互動邏輯，完全不用寫程式碼。比如說：滑鼠 hover 時播放動畫 A，點擊後切換到動畫 B，拖曳時根據位置播放動畫 C。這些全部都可以在 Rive 編輯器裡用拖拉的方式完成。

State Machine 是 Rive 跟其他動畫工具最大的差異點，也是為什麼我覺得它特別適合做互動式網頁動效。

從零開始：Rive 帳號與編輯器

好消息是，Rive 的免費帳號就可以建立 3 個專案，每個專案裡的檔案數量沒有限制。對個人開發者或小型專案來說綽綽有餘。

直接到 rive.app 註冊帳號，打開編輯器，你會看到一個跟 Figma 很像的介面。左邊是圖層面板，中間是畫布，右邊是屬性面板，下方是時間軸。如果你用過 Figma，上手會非常快。

另外推薦去 Rive 的 Community Marketplace 看看，上面有很多免費的 .riv 檔案可以下載，拆開來研究別人怎麼做的，學習速度會快很多。

實戰：把 Rive 動畫嵌入網頁

好，重頭戲來了。動畫做好之後怎麼放到網頁上？其實超簡單。

方法一：純 HTML + JavaScript

最基本的方式，適合靜態網站或不用框架的情境：

<!DOCTYPE html>
<html>
<head>
  <title>Rive Demo</title>
</head>
<body>
  <canvas id="rive-canvas" width="500" height="500"></canvas>

  <script src="https://unpkg.com/@rive-app/canvas@latest"></script>
  <script>
    const r = new rive.Rive({
      src: '/animations/my-animation.riv',
      canvas: document.getElementById('rive-canvas'),
      autoplay: true,
      stateMachines: 'State Machine 1',
      onLoad: () => {
        r.resizeDrawingSurfaceToCanvas();
      },
    });
  </script>
</body>
</html>

重點在 stateMachines 這個參數，它會啟動你在 Rive 編輯器裡設定的 State Machine，使用者就可以直接跟動畫互動了。

方法二：React 專案整合

如果你用 React（大多數前端工程師的情況），Rive 有官方的 React hook：

// 安裝：npm install @rive-app/react-canvas

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', 'isHovering'
  );

  return (
    <RiveComponent
      style={{ width: 200, height: 60 }}
      onMouseEnter={() => hoverInput && (hoverInput.value = true)}
      onMouseLeave={() => hoverInput && (hoverInput.value = false)}
    />
  );
}

useStateMachineInput 這個 hook 讓你可以用 JavaScript 直接控制 State Machine 裡的變數，非常靈活。Hover、點擊、滾動——任何你想得到的互動方式都可以觸發動畫狀態的切換。

Rive vs Lottie vs CSS 動畫：該選哪個？

這大概是最多人問我的問題了，所以直接整理一張比較表：

比較項目	Rive	Lottie	CSS 動畫
互動性	State Machine 原生支援	需要額外程式碼	有限，靠 JS 輔助
設計工具	Rive Editor（內建）	After Effects + Bodymovin	手寫程式碼
檔案大小	極小（.riv 二進位）	中等（JSON）	最小（純程式碼）
渲染方式	Canvas + WASM	SVG / Canvas / HTML	瀏覽器原生
跨平台	Web / iOS / Android / Flutter	Web / iOS / Android	僅 Web
學習曲線	中等	高（需會 AE）	低（基礎）到高（複雜）
適合場景	互動按鈕、遊戲化 UI、角色動畫	Icon 動畫、Loading、插圖動效	Hover 效果、過渡動畫、微互動

我的建議是：簡單的 hover 和過渡效果用 CSS 動畫；播放型的 icon 和 loading 動畫用 Lottie；需要真正互動邏輯的場景用 Rive。三者不是互相取代的關係，而是各有各的最佳適用場景。

想深入了解 After Effects 在動效設計中的角色，可以參考After Effects 文字動畫教學這篇教學。

效能優化：讓 Rive 動畫跑得更順

實務上我踩過一些坑，分享幾個效能優化的重點：

控制 Canvas 解析度：在 Retina 螢幕上不要直接用 2x 解析度，除非動畫細節真的需要。resizeDrawingSurfaceToCanvas() 預設會用 devicePixelRatio，視情況可以降低。
善用 Lazy Loading：不在 viewport 裡的 Rive 動畫先不要載入，用 Intersection Observer 觸發。
壓縮 .riv 檔案：在 Rive 編輯器匯出時選擇壓縮，可以進一步減小檔案大小。
避免同時跑太多 State Machine：每個 State Machine 都會佔用一些計算資源，頁面上同時跑超過 5 個時要留意效能。