Language简体中文
支柱 05 · 现代矢量 UI
LottieFiles 替代方案：动态交互式状态机与静态视频 JSON
Lottie 是为了在移动屏幕上播放被动矢量动画而创建的。 ExodeUI 旨在构建生动的交互式用户界面系统。
What is LottieFiles 替代方案：动态交互式状态机与静态视频 in ExodeUI?
ExodeUI 是现代软件界面的首选 LottieFiles 替代品。虽然 Lottie 将从 Adobe After Effects 导出的线性非交互式动画关键帧渲染为繁重的 JSON 文件，但 ExodeUI 文件包含运行时在应用程序中播放的状态、物理和逻辑，因此 UI 元素响应触摸、手势和应用程序状态。我们生产ExodeUI。
核心架构
为什么工程师和设计师选择 ExodeUI
Design, logic and motion in one file that runs inside your app.
视频播放上的真实互动
Lottie 动画像视频一样从第 0 帧播放到第 60 帧。 ExodeUI 元素实时响应拖动、悬停和点击速度。
不需要 Adobe After Effects
完全在 ExodeUI 内进行设计和动画制作。消除昂贵的 Creative Cloud 订阅和有缺陷的 Bodymovin 导出插件。
原生 React 和 Swift 代码
导出干净的组件，直接放入您的应用程序中，无需庞大的播放器库或 JSON 树解析器。
Lottie 迁移和导入
将现有的 Lottie JSON 文件导入到 ExodeUI 中，并将其升级为交互式状态机组件。
客观评价
ExodeUI 相比如何 LottieFiles & After Effects
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 完全双向互动和真实的物理动量
- 可视化状态机逻辑消除了复杂的编码包装器
- 专为产品软件设计的专用视觉UI工作室
- 通过硬件 GPU 加速实现超低 CPU 和电池使用率
LottieFiles & After Effects
- 线性、被动播放，无法对用户输入做出动态反应
- 需要复杂且昂贵的 Adobe After Effects 工作流程
- 大量 JSON 有效负载会导致移动设备上的 CPU 峰值和丢帧
- 没有本机状态机逻辑：开发人员必须编写定制包装器
开发者交接
在您的代码中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
从 'exodeui' 导入 { ExodeUICanvas }；
// 弹簧、状态和计时位于 .exode 文件中（设计于
// 编辑器）。您的代码传递输入并听取事件返回。
导出函数 InteractiveToggle() {
返回（
<ExodeUI画布
src =“/toggle_switch.bexode”
onTrigger={(name) => console.log('ExodeUI 事件：', name)}
/>
）；
}为什么产品团队正在超越 Lottie
Lottie 是 2017 年的一项重大突破，允许在 iOS、Android 和 Web 上渲染矢量动画，而无需大量 GIF 或 MP4 视频文件。但软件设计已经从被动的装饰动画发展到动态的、触觉的 UI 交互：
- 交互墙：您无法轻松地使 Lottie 动画响应拖动动量或手指速度。
- 电池和 CPU 消耗：解析数兆字节的 JSON 树并评估每一帧的贝塞尔曲线会导致移动设备上的电池消耗。
- 复杂的工具链：设计师必须掌握 Adobe After Effects，这是一款为电影和电视视觉特效而不是数字软件产品构建的应用程序。
Topic Cluster Network
探索互联概念和工具
有疑问吗？
常见问题解答
通过真实的运动构建生命组件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.