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 動效

用於互動介面的 UI 動畫工具

停止傳遞視訊和靜態貝塞爾曲線。設計響應式、實體驅動的 UI 動畫並將相同的檔案傳送到您的應用程式。

What is 用於互動介面的 UI in ExodeUI?

ExodeUI 是一款專為建立生活軟體的產品團隊設計的 UI 動畫工具。與輸出靜態視訊或大量 JSON 資源的工具不同,ExodeUI 將視覺運動畫布與彈簧物理和狀態機配對,並將結果保存為一個打開的 .exode 文件,運行時包可以在React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和Flutter。

核心架構

為什麼工程師和設計師選擇 [ExodeUI

Design, logic and motion in one file that runs inside your app.

即時彈簧物理

將脆性持續時間曲線替換為自然剛度、質量和阻尼物理,對使用者速度做出流暢反應。

Core Architecture

視覺狀態機邏輯

直觀地連接複雜的懸停、活動、拖曳和載入狀態,而無需編寫數千行脆弱的 CSS 過渡。

Core Architecture

原生生產程式碼導出

使用程式碼控制的輸入和事件在 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中播放相同的檔案。

Core Architecture

連續手勢追蹤

一流的拖曳、投擲、捏合和指針跟踪,具有連續動量和邊界碰撞檢測。

Core Architecture

客觀評價

ExodeUI 相比如何 Traditional UI Animation Tools

Where ExodeUI is stronger, and what to weigh before you switch.

The ExodeUI Architecture

ExodeUI

優勢
  • 一個打開的檔案在八個框架運行時運行
  • 具有真實速度和動量的嵌入式實體引擎
  • 用於分支邏輯的可視化狀態機節點圖
  • 您的應用程式碼控制的輸入和事件
Compared with

Traditional UI Animation Tools

Trade-offs
  • 輸出靜態 MP4 視訊、GIF 或重型 After Effects JSON
  • 基於時間的線性關鍵影格會在使用者中斷互動時中斷
  • 開發人員必須在程式碼中手動重建每條動畫曲線
  • 交互狀態通常必須圍繞玩家手動編碼

開發者交接

在您的程式碼中使用它

Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.

從 'exodeui' 導入 { ExodeUICanvas };

// 彈簧、狀態和計時位於 .exode 檔案中(設計於
// 編輯器)。您的代碼傳遞輸入並聽取事件返回。
導出函數InteractiveButton() {
  返回(
    <ExodeUI畫布
      src="/interactive_button.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.

免費試用