如今,大多數 UI 動畫都是在一種工具中設計並在另一種工具中再次建立的。設計人員在 Figma 或 After Effects 中製作過渡動畫,然後開發人員在程式碼中重新建立它。細節會遺失,每次更改都會重複這個循環。
我們使用「運動開發環境」一詞來表示刪除第二步驟的工具。輸出不是視訊或參考原型,而是一個描述互動行為本身的文件:元件可以處於的狀態、它們之間的轉換、更改它的輸入以及它發送回應用程式的事件。
ExodeUI就是這樣建構的。它是一個瀏覽器和桌面工具,您可以在其中使用狀態機、彈簧物理、輸入和事件設計互動式 UI 和動畫。作品儲存為一個開啟的 .exode JSON 文件,並由 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 的運行時包進行播放。您的程式碼設定輸入,例如「載入」的布林值或「成功」的觸發器,並偵聽事件。
由於該檔案是純JSON,因此開發人員可以讀取它,而AI編碼工具也可以對其進行編輯。 ExodeUI 有一個 MCP 伺服器,因此 Claude Code、Cursor 和類似工具可以根據簡單語言提示建立和變更動畫。
Rive 是最著名的工具,具有類似的視覺化編輯器加運行時的概念。 After Effects 等時間軸工具仍然更適合影片和插圖。正確的選擇取決於您的動作是否需要響應用戶或僅播放。