昨天整理了 Rive 的 RWD 做法，選擇方案時，除了畫面需求，也要考慮團隊怎麼製作與維護。今天換個角度，聊聊設計師實際上手 Rive Editor 的感想。

這次受訪的設計師原本使用 AE 製作動畫，再輸出成切片圖、GIF 或 MP4。以下整理從上手、製作到前端交付的經驗。

熟悉動畫介面，還是要理解狀態邏輯

對有動畫經驗的人來說，Rive 的圖層配置與 animation timeline 並不陌生。設計師提到，第一個作品，大約花了一到兩週完成；因為熟悉動畫介面，也接觸過其他軟體類似的邏輯串接，一開始就能自行製作。

比較不直覺的地方，是 State Machine 怎麼對接，以及不同 timeline 之間如何互相影響。會做一段動畫之後，還需要理解它在什麼狀態下播放、怎麼切換，以及會不會和其他動畫衝突。

有些效果，沒有 AE 那麼順手

製作時最容易卡住的，是遮罩、漸層、光影與混合樣式。以這位設計師的使用經驗來說，這些操作沒有 AE 那麼方便，最後會改用圖片，或增加節點來完成效果。

熟悉的效果換到另一套工具，做法也可能要跟著調整。這也是實際製作後，才會感受到的差異。

畫面由 UI 掌控，前端串接更集中

過去採用傳統切版，雙方需要反覆確認位置、尺寸、圖層，還有動畫的時間軸與節奏。有些效果能不能實作、效能與檔案大小能不能接受，也要一起討論。

改用 Rive 後，設計師最喜歡的是畫面的還原度：畫面與動畫由 UI 在 Editor 裡完成，再交付 .riv，減少了前端重新還原細節的工作。

當時團隊使用 Inputs 控制動畫，前端主要對好操作方式，需要通知前端時則透過 event 傳遞訊號。動畫節奏也就不用再逐段描述一次。

不過，版本管理仍是設計師覺得麻煩的地方。在當時的協作流程中，多人同時修改同一份檔案、再整合修改，沒有像程式碼分別 commit 那麼順手。

Layout 與互動流程，邊做邊磨合

剛開始使用 Rive 時，除了熟悉工具，也需要和前端一起釐清 Layout 與互動流程。知道畫面要長什麼樣子，不代表馬上就知道區塊怎麼拆、尺寸改變時要怎麼調整，這時可以拿著畫面討論：「這裡會怎麼切？」

狀態切換也是如此，從 A 到 B 的條件、哪些地方需要留控制項給前端，一開始都不容易掌握。把玩家的操作流程一起走過一遍，確認畫面怎麼變、哪一步需要前端通知，再回頭設定 State Machine，就比較有方向。

重新學一次，會先把基礎邏輯弄清楚

設計師給新手的建議，是先理解狀態之間的影響，以及不同 timeline 的關鍵幀是否會互相干擾。跟前端交付時，基礎設定也要說明完整，包含命名。

回到前幾天介紹的 Data Binding，欄位名稱、型別與用途，也是雙方需要先對齊的內容。把交付約定講清楚，才能減少來回確認。

這次訪談讓我更有感的是，Rive 的製作與串接需要雙方一起配合，效能也是如此。明天開始分享實務建議，先聊聊 Virtualization：當 Data Binding List 裡有大量卡片時，怎麼透過 Editor 的設定，減少不必要的渲染。