基于物理的运动8 分钟阅读·ExodeUI 团队
Spring 动画：自然 UI 运动的物理原理
了解 Spring 动画在 UI 设计中的工作原理。了解刚度、阻尼、质量和速度。为 React 和 SwiftUI 构建基于自然物理的动画。
直接总结和定义
核心要点
弹簧动画使用质量-弹簧-阻尼器系统的物理行为对 UI 运动进行建模，其中组件的运动由刚度（其拉向静止的强度）、阻尼（其失去能量的速度）和质量（其承载的惯性大小）控制。与基于持续时间的动画不同，弹簧会自动响应用户速度，并且可以在任何点中断，而不会导致视觉不连续。
为什么弹簧感觉比持续时间曲线更自然
物理世界没有“ease-in-out”或“cubic-bezier(0.4, 0, 0.2, 1)”之类的概念。物理物体因力而加速，因摩擦而减速。当抽屉滑开时，它有动力；当您释放它时，摩擦力会使它静止。 Spring 物理学在软件中复制了这种物理现实，这就是为什么 iOS UIKit、Android Motion Compose 和 ExodeUI 都是 Spring 优先的动画系统。
弹簧参数解释
了解每个参数可以让您准确地设计出您想要的物理感觉。
刚度（张力）
弹簧拉向其静止值的强度有多大。高刚度 (600+) 创建快速、响应灵敏的 UI，如按钮按下反馈。低刚度 (100–200) 可创建缓慢、浮动的运动，适合页面过渡或环境浮动元素。
阻尼（摩擦）
弹簧每个周期损失多少能量。在临界阻尼下，弹簧达到静止状态而不会振荡。欠阻尼弹簧（低摩擦）会超调并弹跳。阻尼比 / (2 × sqrt(刚度 × 质量)) 决定是否欠阻尼、临界阻尼或过阻尼。
大量的
动画元素具有多少惯性。质量越大，动画感觉越重，并且需要更长的时间来改变方向。大多数 UI 动画将质量保持在 1.0，并通过刚度和阻尼控制感觉。
初始速度
如果用户滑动或甩动某个元素，则可以使用该手势速度来初始化弹簧，从而在手势和弹簧沉降之间创建无缝连续性。
UI 组件的实用 Spring 预设
这些预设涵盖了最常见的 UI 交互模式。
- 按钮点击：刚度 500，阻尼 30 — 即时、快速、最小弹跳
- 卡扩展：刚度 280，阻尼 24，质量 1.2 — 平滑、加权扩展
- 抽屉/床单：刚度 340，阻尼 28 — 决定性，轻微沉降
- 弹力通知：刚度 400，阻尼 18 — 俏皮的超调
- 页面过渡：刚度 220、阻尼 22、质量 1.4 — 电影、加权
生产实施片段
交互组件实现
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}