Language繁體中文
支柱 07 · 如何運作
從 .exode 到您的應用程式：如何建立和播放 ExodeUI 文件
從設計到生產的一個開放文件。運行時播放它，您的程式碼驅動它。
What is 從 .exode in ExodeUI?
ExodeUI 不會產生 React、Swift 或 Flutter 原始碼。您在打開的 .exode JSON 文件中進行設計；對於生產，它可以編譯成更小的 .bexode 文件，並且框架的運行時包在畫布上播放它。您的程式碼透過設定輸入和監聽事件來控制它。我們生產ExodeUI。
核心架構
為什麼工程師和設計師選擇 [ExodeUI
Design, logic and motion in one file that runs inside your app.
開源檔案
.exode 檔案是 JSON，描述層、狀態、轉換、彈簧、輸入和事件。開發人員可以閱讀它，人工智慧工具可以編輯它。
編譯用於生產
相同的場景可以編譯成更小的 .bexode 檔案以在您的應用程式中發布。
每個框架的運行時間
React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 的運行時套件播放檔案。
Controlled by your code
從應用程式狀態設定布林值、數字和觸發器，並偵聽動畫發回的事件。
客觀評價
ExodeUI 相比如何 Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 設計的文件是交付的文件，因此切換時不會遺失任何內容
- States and logic travel with the animation
- One file works across eight framework runtimes
- 如果輸入和事件保持不變，設計人員可以在不更改程式碼的情況下更改時序
Rebuilding motion by hand
- Developers recreate each transition from a reference
- Every design change needs another code change
- Each platform is rebuilt separately
- 手寫程式碼提供完全控制並且沒有額外的運行時間，這有時是正確的權衡
開發者交接
在您的程式碼中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// Playing an ExodeUI file in React with the exodeui package.
// The animation, its states and springs live in save-button.exode;
// your code only sets inputs and listens for events.
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, onSave }) {
const { setEngine, setInputBool } = useExodeUI();
// Drive the "Loading" state from app data
useEffect(() => {
setInputBool('Loading', saving);
}, [saving, setInputBool]);
return (
<div style={{ width: 220, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => {
if (name === 'Pressed') onSave();
}}
/>
</div>
);
}編輯器和您的應用程式之間會發生什麼
An ExodeUI component goes through four steps:
- 1. 設計：您可以在瀏覽器或桌面編輯器中建立圖層、狀態、轉換、彈簧和邏輯。作品儲存為開啟的 .exode JSON 檔案。
- 2. 編譯（可選）：對於生產，可以將場景編譯成較小的.bexode 檔案。
- 3. 播放：框架的運行時包載入檔案並將其繪製在畫布上。
- 4. 控制：您的程式碼設定輸入，例如載入布林值或成功觸發器，並偵聽動畫發送的事件。
When hand-written code is the better choice
运行时并不总是正确的。對於單一淡入淡出或簡單的懸停，CSS 或 Motion 等函式庫更輕，不需要額外的套件。 ExodeUI 對於設計人員想要繼續編輯的具有多種狀態、實體或邏輯的元件最有用。
Topic Cluster Network
探索互聯概念與工具
有疑問嗎？
常見問題解答
透過真實的運動建構生命組件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.