Language繁體中文
類別:互動動作
用於 UI 和產品體驗的互動式動畫工具
傳統的動畫工具會回放預先錄製的時間軸。 ExodeUI 為您提供了一個互動式畫布,其中動畫對遊標速度、觸控手勢和應用程式狀態做出動態反應。
What is 用於 UI in ExodeUI?
互動式動畫工具使設計人員和工程師能夠創建即時響應用戶輸入、手勢和系統狀態的動態 UI 元素。 ExodeUI 將視覺動畫設計與可執行互動邏輯連結起來,提供了一個可輸出可用於生產的互動元件的視覺畫布。
核心架構
為什麼工程師和設計師選擇 [ExodeUI
Design, logic and motion in one file that runs inside your app.
手勢優先架構
透過自動動量延續將組件狀態直接綁定到指針速度、觸摸拖曳和拖曳手勢。
Core Architecture
中斷運動
永遠不用擔心動畫重新啟動時斷斷續續的情況。當使用者輸入中斷活動轉換時,彈簧物理特性會自動平滑地重新導向速度。
Core Architecture
Reactive 參數輸入
使用外部變數(如滾動偏移、網路進度、遊標距離或布林屬性)驅動動畫。
Core Architecture
多框架支援
從單一互動式專案匯出適用於 React、Vue、Svelte、React Native 和 SwiftUI 的元件。
Core Architecture
客觀評價
ExodeUI 相比如何 Linear Timeline Software
Where ExodeUI is stronger, and what to weigh before you switch.
The ExodeUI Architecture
優勢ExodeUI
- 完全可中斷性-動畫在中斷時平滑地重定向
- 原生觸控和指針手勢與動量集成
- 直接反應式狀態綁定,無需編寫自訂的 JS 監聽器
- 保留 Core Web Vitals 的小型程式碼包
Compared with
Trade-offsLinear Timeline Software
- 嚴格的關鍵影格時間軸必須在重置之前完成播放
- 沒有使用者速度或彈簧動力學的概念
- 需要複雜的自訂黏合程式碼來連接真實的應用程式數據
- 在低階行動裝置上造成高輸入延遲
開發者交接
在您的程式碼中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
從 'exodeui' 導入 { ExodeUICanvas };
// 彈簧、狀態和計時位於 .exode 檔案中(設計於
// 編輯器)。您的代碼傳遞輸入並聽取事件返回。
導出函數 InteractiveToggle() {
返回(
<ExodeUI畫布
src="/interactive_toggle.bexode"
輸入={{活動}}
onTrigger={(name) => console.log('ExodeUI 事件:', name)}
/>
);
}有疑問嗎?
常見問題解答
透過真實的運動建構生命組件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.