Language简体中文
支柱 04 · Visual Studio 与 Code-Only
Framer Motion 替代方案：具有干净 React 输出的 Visual Motion Canvas
停止通过在代码编辑器窗口中反复试验来编码动画关键帧和弹簧参数。在实时画布上进行可视化设计，并在 React 和 Swift 中播放相同的文件。
What is Framer Motion in ExodeUI?
ExodeUI 是设计和工程团队 Framer Motion 的视觉替代品。虽然 Framer Motion 要求开发人员完全通过 JavaScript 代码创作复杂的动画变体、手势和弹簧，但 ExodeUI 提供了一个可视化设计环境，设计人员可以在其中创作交互并导出可用于生产的 React JSX 和 SwiftUI 组件。
核心架构
为什么工程师和设计师选择 ExodeUI
Design, logic and motion in one file that runs inside your app.
视觉变体和状态检查员
立即预览布局变化、弹簧曲线和悬停变体，无需重新加载浏览器或编写 JSON 对象。
跨平台本机导出
Framer Motion 在网络上仅限于 React。 ExodeUI 将相同的物理导出到 React、React Native Reanimated 和 Apple SwiftUI。
连续手势物理
在画布上直观地创作复杂的拖动范围、投射速度和磁性捕捉。
多框架集成
与现有的 Motion (Framer Motion) 代码一起使用：设计组件的 ExodeUI 文件，其余的代码。
客观评价
ExodeUI 相比如何 Framer Motion (Code Library)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 可视化画布创作消除了繁琐的代码试错
- 除了 React Web 之外，还输出到 React Native 和本机 SwiftUI
- 设计师和工程师协作处理同一个视觉运动文件
- 具有零依赖性代码导出选项的轻量级足迹
Framer Motion (Code Library)
- 没有可视化创作画布：开发人员必须从头开始编写代码
- 如果没有工程帮助，设计人员无法检查或调整弹簧曲线
- 仅限 Web React：无法导出到本机 iOS SwiftUI 或 Android Compose
- 捆绑全布局投影引擎时需要较大的捆绑尺寸
开发者交接
在您的代码中使用它
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>
);
}为什么Framer Motion开发者喜欢ExodeUI
Framer Motion 是面向 React 开发人员的优秀代码级动画库。然而，完全用代码创作复杂的动作存在一个主要痛点：编写代码时无法看到动画。开发人员必须调整刚度和阻尼值，重新加载浏览器，测试交互，并重复数十次。
- 试错摩擦：调整代码中的物理参数需要花费数小时的手动实验。
- 跨平台无效：Framer Motion 不能在原生 iOS SwiftUI 或 Android 应用程序中使用。
- 设计师脱节：设计师无法直接修改Framer Motion代码，导致无休止的评审会议。
Topic Cluster Network
探索互联概念和工具
有疑问吗？
常见问题解答
通过真实的运动构建生命组件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.