Skip to main content
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →

類別:互動動作

用於 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

Linear Timeline Software

Trade-offs
  • 嚴格的關鍵影格時間軸必須在重置之前完成播放
  • 沒有使用者速度或彈簧動力學的概念
  • 需要複雜的自訂黏合程式碼來連接真實的應用程式數據
  • 在低階行動裝置上造成高輸入延遲

開發者交接

在您的程式碼中使用它

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.

免費試用