前面四篇分別介紹了 State Machine、Listener、View Model、Runtime。
這篇把它們全部串起來。
把全部的概念串起來
現在回頭看第一篇那張圖，你應該能看懂它在說什麼了。
整個系統的中心是 View Model。
左邊是設計端：在 Rive 編輯器裡的 Listener 和 State Machine。
右邊是工程端：在程式碼裡引入的 Runtime。
1) View Model：中心的「合約」
View Model 定義了動畫會用到的「資料」，包括：
．畫面上看得到的資料（如顯示氣溫的數字、顯示城市名稱的字串）
．藏在畫面下看不到的資料（如 State Machine 判斷用的布林、Trigger）。
它就像一份「設計 ↔ 工程」都同意的合約：資料叫什麼、資料類型是什麼。
2) Listener：偵測變化
Listener 的角色是「盯著變化」。這個變化可以來自：
．使用者的行為（如滑鼠移入、移出、點擊）
．View Model 的資料變化（如某數值發生變化、Trigger 被觸發）。
一旦偵測到變化，它通常做的不是直接叫 State Machine 切狀態，而是去改寫 View Model 的某個值。
3) State Machine：切換狀態
State Machine 的角色是「做決策」。
它不需要知道「外面發生什麼事」的細節，它只需要關心 View Model 現在的值是什麼。
它根據這些值，去判斷 Transition 條件是否滿足，決定要不要切換到下一個狀態。
而 State Machine 在切換狀態的過程中，例如當某個狀態開始、結束，或是某段 Transition 開始、結束的時候，你可以設定它去改寫 View Model 的值。
4) Runtime：在使用者的裝置上跑起來
最後，真正讓 .riv 在使用者的裝置上跑起來的是 Runtime。
它一方面負責渲染與播放，另一方面也提供工程師一個入口：在程式裡直接讀寫 View Model 的值。
工程師可以把外部資料寫進 View Model，讓動畫顯示真實的內容；也可以從 View Model 讀取資料，知道使用者在動畫裡做了什麼操作。
總結
最後，再回到第一篇的那句核心概念：
「當發生什麼事時，它就做什麼事。」
現在搭配下面這張圖，你就能把這句話拆解成：
「當 View Model 發生變化時，State Machine 則切換狀態。
而 View Model 的變化來自 Listener、State Machine、Runtime。」
所以，你不只是在「做一段動畫」，你是在設計一個以資料為中心的互動系統。
這就是 Rive。