第四篇介紹了 View Model,知道它是設計和工程之間的合約。
這篇是最後一個概念:Runtime——讓 .riv 檔真正跑起來的執行環境。
在 After Effects 裡,你的最終產出是一段影片。
影片做好之後,上傳到社群平台,你不需要操心「它怎麼跑起來」。
但在 Rive 裡,你做的不是影片,是一個會互動的產品。
它要能回應使用者的操作、接收即時資料、在不同裝置上運作。這些事情不是按下匯出就自動完成的,它還需要一個「執行環境(Runtime)」來驅動。
Runtime 是什麼?
Runtime 這個詞直譯是「執行的時間點」。
在電腦科學裡,程式的生命週期分成寫程式的時候(Design time)、編譯打包的時候(Compile time)、以及真正跑在使用者裝置上的時候(Run time)等等。
後來這個詞被延伸用來指「讓程式在那個當下,能順利跑起來的整套支援系統」,也就是執行環境。

你還記得以前開網頁,上面的動畫或小遊戲顯示一個灰色區塊,叫你「安裝 Adobe Flash Player」嗎?​​​​​​​
動畫或小遊戲的 .swf 檔案已經在網頁上了,但沒有 Flash Player 這個執行環境,它就跑不起來。Flash Player 負責讀懂 .swf 檔,在瀏覽器裡把它呈現出來。

Rive 也是一樣。
你設計好的 .riv 檔裡面寫著有哪些動畫,但沒有 Rive Runtime 這個執行環境,它就跑不起來。Rive Runtime 負責載入 .riv 檔、建立渲染環境,在使用者的裝置上把它真正跑起來。

打個比方,你的 .riv 檔就像一張遊戲卡帶,裡面裝了所有角色、關卡、規則,但卡帶本身不會自己跑,你還需要一台遊戲主機,才能把它跑起來。Runtime 就是那台主機。​​​​​​​
具體來說,Runtime 是工程師引入專案的程式庫。
因為 Web、iOS、Android 底層的技術完全不同,Rive 針對每個平台分別做了對應的 Runtime:
.Web → JavaScript Runtime
.iOS → Swift Runtime
.Android → Kotlin Runtime
.Flutter → Dart Runtime

每個平台的 Runtime 都是用該平台的原生語言寫成,負責讀取 .riv 檔並把它畫到畫面上。
重點是你的 .riv 檔案只有一份。
設計師只要做一次,工程師在不同平台引入對應的 Runtime 就好,動畫本身不需要重做。​​​​​​​
Rive Runtime 的角色
其實,Rive Runtime 做的不只是讓 .riv 檔跑起來。
它還提供了 API,也就是工程師用來告訴 Runtime 要做什麼的介面。
你可以把這組介面想成遊戲主機上的按鈕:按鈕本身不會跑遊戲,它只是告訴主機要做什麼。

工程師可以透過 API,直接在程式碼裡讀取和修改 View Model 裡的數值。
因為這些 API 本來就是 Runtime 提供的,接下來我就直接說「透過 Runtime」。
Runtime → View Model
透過 Runtime,工程師可以把外部資料寫進 View Model,讓動畫顯示真實的資料。
例如,你在天氣 App 中看到的溫度,就是工程師透過 Runtime,將氣象局回傳的溫度資料寫進 View Model 的。
又比如 App 需要的資料載入完成時,工程師把 View Model 的某個布林從 false 改成 true,接著 State Machine 就能根據這個布林,自動切換到下一個狀態。
View Model → Runtime
透過 Runtime,工程師也可以從 View Model 讀取資料,知道使用者在動畫裡做了什麼操作。
例如,你在購物 App 裡按了「+」,把商品數量從 1 改成 2,這個操作會更新 View Model 裡的數量。工程師就能透過 Runtime 讀到這個值,拿去更新後端資料庫裡的購物車。
作為動態設計師,你不需要深入理解 Runtime 的技術細節。但你需要知道兩件事:

第一,你在 Rive 裡設計的一切,最終都是由 Runtime 在使用者的裝置上執行的。
知道這件事,你就能理解為什麼你的設計能跨平台運作。

第二,工程師可以透過 Runtime 改寫 View Model 裡的資料。
知道這件事,你在設計 View Model 的時候就能預先想好:哪些資料需要留給工程師從外部塞入?這會是你和工程師之間重要的溝通基礎。
下一篇是總結,我們會回頭看開頭那張圖,把 State Machine、Listener、View Model、Runtime 這四個概念全部串起來。
↑Back to Top