上一篇透過 Spinwheel Interaction，我們拆解了 Rive 如何利用 State Machine 管理一段完整的互動流程。這次想換個方向，不看流程，而是來看看另一個我很喜歡的 Marketplace 案例——Interactive Aquarium。
第一次看到這個作品時，我原本以為它只是個展示動畫的魚缸，想說：「嗯，就是魚在游泳而已吧。」結果玩了幾分鐘後才發現，其實沒有這麼簡單。
魚不是一直沿著固定路徑游來游去，而是會追著食物跑、眼睛會跟著滑鼠移動，甚至連水草也會因為你的操作產生反應。整個畫面給人的感覺，不像是在播放一段動畫，而比較像是在觀察一個真的會運作的小型生態系。
我覺得這也是這個案例最有趣的地方，它不是想展示動畫做得多漂亮，而是在展示動畫如何與使用者互動。
平常我們看到的大部分動畫，其實都是預先安排好的。
角色待機、播放攻擊、Loading 不停循環……不管畫面多精緻，本質上都是照著 Timeline 一直播放。
但 Interactive Aquarium 不太一樣。
魚並沒有固定的路徑，也沒有一套固定流程。當你沒有操作時，它們會自然地在魚缸中游動；當你餵食時，又會立刻改變方向追著食物跑；滑鼠靠近時，眼睛還會跟著你的游標移動，就連水草也會因為互動產生不同反應。
這些細節單獨看都不算特別，但全部放在一起之後，就會讓人開始忘記自己是在看動畫，而是真的有一群魚生活在魚缸裡。
我覺得這就是這個案例最成功的地方，它設計的不是一段動畫，而是一個「有生命感」的互動場景。
看到這裡，我第一個想到的是：「如果今天要自己做這個效果，前端到底要寫多少東西？」
魚要知道滑鼠在哪裡、食物丟到哪裡、現在是不是正在追食物、眼睛要不要轉向、水草要不要晃動……這些都代表著不同的互動狀態。
如果全部交給程式控制，事件、判斷與動畫切換很快就會變得越來越複雜。
而 Interactive Aquarium 的做法則是把不少互動放進 Rive 裡。
前端比較像是在提供外部資訊，例如滑鼠位置、點擊事件或餵食動作，而動畫則根據這些資訊，自行決定接下來應該呈現什麼效果。
這也是我覺得 Rive 很有趣的一點。
它不只是播放動畫，而是開始讓動畫自己回應使用者。
Interactive Aquarium 最吸引我的地方，不是魚游得多自然，而是它讓畫面中的每一個元素都像是在「活著」。使用者每一次操作，都可能改變畫面接下來的反應，也讓動畫從原本單向播放，變成了一種持續互動的體驗。
如果上一篇 Spinwheel Interaction 展示的是「動畫如何管理流程」，那 Interactive Aquarium 展示的，就是「動畫如何回應世界」。
我覺得這也是 Rive 很迷人的地方。它不只是讓動畫變得更流暢，而是讓動畫開始擁有自己的行為。
iThome鐵人賽
看影片追技術