# Rive 的理論與實務 - 張育維

{%hackmd @JSDC-tw/B1loEcwJZl %}
###### tags: `JSDC2025`

Slido：https://app.sli.do/event/2kapax7ZKjgzGVxuAk4YkG
簡報連結：
https://docs.google.com/presentation/d/1lsx1sW7r_fUsP52n8G8eZlLoK39vlFBw7r7Ad-dHHLE/edit?usp=sharing

> 開始做筆記

Rive 是一個跟動畫有關的 lib

## Rive 解決了什麼問題

- 不用讓前端再寫一次動畫
- 減少溝通成本
- 來回調動畫細節的問題
- 先斬後奏的問題

- https://rive.app/marketplace/25070-46802-tree-state-machine-animation/

## before & after

出設計 出素材 前端刻畫面 -> 設計師出動畫

## Lottie vs. Rive

Lottie 是靜態的動畫
Rive 可以帶參數

## Rive 的優缺點

優點：省時 省力 省溝通
缺點：Canvas 2D 、需要設計師配合、學習曲線較陡峭

## 實務上會遇到的問題

- 不要看官方文件
- 問 AI
- Rive 的收益容易被借走
- 很要求細節的設計師 很有想法的客戶 很注重程式碼品質的工程師

## 怎麼踏出第一步

- 官方找一個喜歡的 riv 玩玩看
- 先用在顯眼又不太需要太多互動的地方

## Q&A
Hi，我是那天的講者，來回復一下 [Slido 上面的問題。](https://app.sli.do/event/2kapax7ZKjgzGVxuAk4YkG)

### Rive 商用有免費版嗎？
沒有，目前我們是用最便宜的方案，一個人一個月九美金，目前用起來很夠用了。
### Rive 如何滿足 RWD 需求？使用多個 riv 檔嗎？
關鍵字 Layouts，或是用 state machine input 改變動畫或是多個 .riv 檔都可以，當然後兩者會讓檔案比較大一點，不會是最好的方案。

### 想請問可以介紹一下 state machine 的部分嗎？好奇的地方是剛剛有 Demo 邊跑邊踢，在想他一次會不只有一個 state 嗎？
不會，一次只會有一個 state，你可以把「邊跑邊踢」當作一種 state。除了可以透過 state machine input 開放給前端控制的 state 以外，也有其他不直接開放給前端控制的 state，類似物件 的 public & private 的概念。可以開開看 Rive Editor，看看他的狀態樹狀圖，可能會更理解我在講什麼。

### Rive 在實務上會有效能的問題嗎？
還好，就我們自己的經驗來說，Rive 的效能跟其他動畫引擎比起來，不會是最好的，但也不會是最差的。當然非常吃效能的東西應該不會想用 Rive 來做啦，畢竟 Rive 還是比較新的技術，要拚效能的話用傳統一點的解決方案比較穩，至少社群的經驗跟分享會更多。再扯遠一點的話，我自己是覺得，所謂的效能問題，問題最終都不會在程式端這邊。

### 跟 PixiJS + Spine 比較起來有什麼優劣嗎，設計師很多是 Adobe 背景，這樣上手 Rive Editor 容易嗎？
跟跟 PixiJS + Spine 比起來，Rive 的優點一樣是減少時間成本 & 情緒勞動成本，如果開發差不多品質的動畫或遊戲的話，用 Rive 花的工時一定少很多。當然缺點一樣也是動畫的品質、細緻度、與效能，如果是很追求以上某幾點的情況的話，可能就不太適合 Rive。至於上手容易嗎......我們家也有一些設計師是 Adobe 背景的，據他們的說法是還好，除了 state machine 的概念以外，其他不算很難，要適應一下就是了。

### 哪些場景適合用 rive? 假設做活動類型小遊戲適合嗎？要怎樣與 Rive 外部溝通 state
像投影片最後說的那樣，Rive 一開始適合用在顯眼，有一點動畫，但又不需要太多互動的地方，例如 hero, banner, button, icon 之類的。活動類型的小遊戲也非常適合，很多團隊都會這樣做，不過小遊戲的互動應該會比較多，比較需要操作 state machine，對新手來說應該需要一點時間，有需要的話可以再問我。至於要怎樣與 Rive 外部溝通 state……我猜你說的是「.riv 檔要怎麼把 state 告訴給外部」嗎？畢竟外部可以透過 state machine 寫 state 進去 .riv 檔，但 .riv 檔沒辦法主動往外把 state 告訴給外部？如果你的問題是這個的話，可以查一下 Rive Events，應該是你想要的東西。如果不是的話，歡迎再寫信來問我，好啦我承認我有時候頻率怪怪的，單從文字不一定真的 get 到你們想講什麼🥹🥹🥹

> 聊天區

---

{%hackmd @JSDC-tw/jsdc2025_sponsor %}