Language简体中文
类别:互动动作
用于 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
Trade-offsLinear Timeline Software
- 严格的关键帧时间线必须在重置之前完成播放
- 没有用户速度或弹簧动力学的概念
- 需要复杂的自定义粘合代码来连接真实的应用程序数据
- 在低端移动设备上造成高输入延迟
开发者交接
在您的代码中使用它
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.