Language简体中文
支柱08·动画工程
物理 UI 动画：生活数字界面的科学
基于持续时间的动画已经死了。了解为什么 Apple、Google 和世界上最好的产品团队专门使用弹簧物理学进行构建。
What is 物理 UI in ExodeUI?
物理 UI 动画是一种动画工程方法，它使用现实世界的物理定律（主要是二阶谐波弹簧振荡器）而不是任意持续时间计时器来模拟用户界面运动。由于物理弹簧根据用户手势速度动态计算静止位置，因此物理驱动的界面 100% 可中断，并且对于人类触摸来说感觉很自然。
核心架构
为什么工程师和设计师选择 ExodeUI
Design, logic and motion in one file that runs inside your app.
二阶谐波弹簧
使用自然物理方程而不是任意毫秒和贝塞尔手柄来模拟界面运动。
连续速度传输
猛击和拖动手势在释放和突然重定向时保留人类的物理动量。
100% 可中断交互
用户可以在动画播放过程中点击、拖动或重定向动画，而不会出现卡顿或视觉卡顿的情况。
质量、刚度和阻尼控制
通过直观的视觉滑块和实时预览精确调整界面的机械特性。
客观评价
ExodeUI 相比如何 Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 弹簧根据距离和速度自动计算持续时间
- 交互 100% 可中断，无视觉卡顿
- 保留人性化的触摸动力，带来流畅的原生感觉
- 匹配iOS（CoreAnimation）和Android原生动画模型
Duration-Based Animation (Easing Curves)
- 固定持续时间计时器（例如 300 毫秒）在短距离或长距离上感觉不自然
- 中断动画会导致其突然或剧烈重新启动
- 忽略手指弹动速度，感觉迟缓且反应迟钝
- 需要编写复杂的自定义 JavaScript 来处理手势中断
开发者交接
在您的代码中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// A physics-driven expand in React with the Motion library (motion.dev).
// Mass, stiffness and damping replace a fixed duration, and an interrupted
// animation continues from its current velocity.
import { motion } from 'motion/react';
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ height: open ? 240 : 64, opacity: open ? 1 : 0.7 }}
transition={{ type: 'spring', stiffness: 380, damping: 26, mass: 1 }}
style={{ overflow: 'hidden' }}
>
<h3>Physics-driven element</h3>
<p>Settles naturally, with no hard-coded duration</p>
</motion.div>
);
}基于持续时间的动画的谬误
几十年来，网络和数字动画都依赖于基于时间的持续时间曲线：“在 300 毫秒内通过缓出将该模态从 y: 100 动画到 y: 0。”虽然这适用于被动视频播放，但由于三个数学原因，它在触摸驱动的交互式软件中从根本上失败了：
- 距离变化：如果一张纸在 300 毫秒内移动 50 个像素，则它移动缓慢。如果它在 300 毫秒内移动 500 个像素，则移动速度快十倍。固定的持续时间会产生不稳定的速度。
- 中断灾难：如果用户在动画时抓住一个元素，基于持续时间的系统会捕捉或破坏物理曲线。
- 速度失明：当用户以快速的手指速度向上抛动底部薄片时，持续时间曲线会丢弃该速度并从零速度播放其预设动画。
弹簧物理的三个参数
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.