第四篇介紹了 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 這四個概念全部串起來。