Language简体中文
类别:制作 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.
实时弹簧物理
将脆性持续时间曲线替换为自然刚度、质量和阻尼物理,对用户速度做出流畅反应。
视觉状态机逻辑
直观地连接复杂的悬停、活动、拖动和加载状态,而无需编写数千行脆弱的 CSS 过渡。
原生生产代码导出
使用代码控制的输入和事件在 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中播放相同的文件。
连续手势追踪
一流的拖动、投掷、捏合和指针跟踪,具有连续动量和边界碰撞检测。
客观评价
ExodeUI 相比如何 Traditional UI Animation Tools
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 一个打开的文件在八个框架运行时运行
- 具有真实速度和动量的嵌入式物理引擎
- 用于分支逻辑的可视化状态机节点图
- 您的应用代码控制的输入和事件
Traditional UI Animation Tools
- 输出静态 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.