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 的运行时包播放文件。
由您的代码控制
从应用程序状态设置布尔值、数字和触发器，并侦听动画发回的事件。
客观评价
ExodeUI 相比如何 Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 设计的文件是交付的文件，因此切换时不会丢失任何内容
- 状态和逻辑随动画一起移动
- 一个文件可跨八个框架运行时运行
- 如果输入和事件保持不变，设计人员可以在不更改代码的情况下更改时序
Rebuilding motion by hand
- 开发人员根据参考重新创建每个转换
- 每个设计更改都需要另一个代码更改
- 每个平台单独重建
- 手写代码提供完全控制并且没有额外的运行时间，这有时是正确的权衡
开发者交接
在您的代码中使用它
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>
);
}编辑器和您的应用程序之间会发生什么
ExodeUI 组件经历四个步骤：
- 1. 设计：您可以在浏览器或桌面编辑器中构建层、状态、转换、弹簧和逻辑。作品保存为打开的 .exode JSON 文件。
- 2. 编译（可选）：对于生产，可以将场景编译成较小的.bexode 文件。
- 3. 播放：框架的运行时包加载文件并将其绘制在画布上。
- 4. 控制：您的代码设置输入，例如加载布尔值或成功触发器，并侦听动画发送的事件。
当手写代码是更好的选择时
运行时并不总是正确的。对于单个淡入淡出或简单的悬停，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.