像昨天說的那樣，這次鐵人賽假設大家對 Rive 有基本的認識，今天也幫大家快速複習一下 Rive。

Rive 的使用情境

Rive 是一個 JavaScript 的 library，讓設計師可以做完動畫後，輸出檔案，直接跑在瀏覽器上，不需要像傳統的動畫製作流程，前端還要照著設計手刻一次。例如這段 Rive 官網的火箭升空動畫，除了很漂亮精緻以外，還有跟使用者互動的成分，這只要引入一個 Rive 檔案就做得到，類似 img 或 video 那樣，因此前端幾乎不用寫程式碼。

Rive 的優缺點

Rive 的優點非常直覺：降低動畫的製作成本。在 web 前端的世界中，Rive 的競爭對手是其他各種動畫引擎，例如 GSAP, Anime.js, Lottie 等等，所有 Rive 能做到的事情，理論上其他競爭對手都應該要做得到，但是會累死前端，因為這些競品都需要前端手刻，Rive 不用，這在 stateful animation 特別明顯。

同時因為前端不用手刻，所以除了時間成本以外，也降低設計師跟前端的溝通成本。因此通常用 Rive 最開心的是其他團隊成員，因為跟 AI 還有 Vibe Coding 一樣，不用整天被又貴又囂張又看不起人的工程師唸說這個太不好做這個有效能問題這個要多五天吧啦吧啦吧啦吧啦吧啦。

其實 Rive 提供的解決方案跟什麼 functional programming 或是什麼 TDD 差不多，反正就是優雅的把事情往外拋給上一層處理。所以缺點的話，一來需要設計師配合，二來無論是設計師還是工程師，都需要一點學習成本，三來 Rive 是相對新的技術，可以參考的資源不多，問 AI 也是 2266 的。

至於其他你可能聽過的什麼參數的範圍不能太大、不能同時播同一段動畫、不能播非常吃效能或太多特效的動畫等等，在 2026 年都有還可以的解決方案，所以這幾點現在算是還好。總之我個人覺得，Rive 的生態地位有點像 React Native，在最佳化跟成本當中取得一個平衡，不會是最好的，但會是最划算的。

基本語法

剛剛說 Rive 類似 img 或 video 那樣，只要引入一個 Rive 檔案就好，因此語法直接看 codesandbox 比較快。當然這是最簡單的 hello world 版本，比較進階的 low-level API 再去看其他文章，至於比較新的 Data Binding API，接下來幾天會陸續介紹，明天見。