Rive集群10 分鐘閱讀·ExodeUI 團隊
狀態機 UI 架構：超越 Rive WebAssembly
探索狀態機 UI 架構。視覺狀態機、佈局和實體如何從一個檔案傳送到 React、Vue 和本機應用程式。
直接總結與定義
核心要點
雖然 Rive 開創了互動式向量圖形的視覺有限狀態機，但它對獨立 WebGL/Skia 畫布的依賴為生產 Web 應用程式帶來了可訪問性和套件大小瓶頸。現代狀態機 UI 將視覺狀態圖保存在應用程式透過輸入和事件驅動的一個檔案中。
為什麼狀態機改變了運動設計
在狀態機出現之前，互動邏輯是一個由布林變數組成的混亂網路（isHovered、isClicked、isExpanded、isError）。狀態機提供了形式上的數學清晰度：組件具有定義的狀態、離散轉換和確定性觸發器。
生產實施片段
互動組件實現
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function CheckoutButton() {
return (
<ExodeUICanvas
src="/checkout.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}