弹簧动画效果是：欺骗我们的大脑，让我们以为某物真的在移动
本质上是在模拟一个带弹簧和阻尼的物理系统
参数
| 概念 | 含义 | Android | iOS UIKit / SwiftUI | Web / CSS |
|---|---|---|---|---|
| 目标值 | 动画最终要到达的位置或状态 | finalPosition / targetValue | animations block / state 最终值 | CSS 属性最终值，如 transform, opacity |
| 刚度 | 弹簧“硬不硬”，决定拉回目标的力度 | stiffness | stiffness / response | CSS 原生没有；JS spring 库通常有 stiffness |
| 阻尼 | 消耗运动能量，决定是否回弹、震荡多久 | dampingRatio | dampingRatio / dampingFraction / damping | CSS 原生没有；可用 cubic-bezier 模拟 |
| 质量 | 物体惯性大小，质量越大越“沉” | 通常不暴露 | mass | CSS 原生没有；JS spring 库可能有 |
| 初速度 | 动画开始时已有的运动速度 | setStartVelocity() | initialVelocity | CSS 原生没有；JS 动画库可传 velocity |
| 动画时长 | 动画持续多久 | 通常由物理收敛决定 | UIKit 常有 duration；SwiftUI 常用 response | transition-duration / animation-duration |
| 回弹程度 | 超过目标值后再回来的明显程度 | 降低 dampingRatio 会更弹 | 降低 dampingFraction / dampingRatio 会更弹 | 用 overshoot 的 cubic-bezier 或 JS spring |
| 停止阈值 | 小到看不见时就认为动画结束 | minimumVisibleChange / visibilityThreshold | 多数由系统内部处理 | CSS 原生无；JS 库可能有 |
| 常用 API | 平台提供的动画入口 | SpringAnimation / Compose spring() | UIView.animate / UISpringTimingParameters / SwiftUI .spring() | CSS transition / animation / WAAPI / JS 动画库 |
| 设计意图 | 含义 | Android | iOS | Web CSS / JS |
|---|---|---|---|---|
| 更快 | 更快靠近目标状态 | 提高 stiffness | 降低 response 或提高 stiffness | CSS 缩短 duration；JS 提高 stiffness |
| 更软 | 运动更慢、更柔和 | 降低 stiffness | 提高 response 或降低 stiffness | CSS 拉长 duration；JS 降低 stiffness |
| 更弹 | 有明显超调和回弹 | 降低 dampingRatio | 降低 dampingFraction / dampingRatio | CSS 用 overshoot cubic-bezier；JS 降低 damping |
| 不回弹 | 快速到达目标但不明显超调 | dampingRatio ≈ 1 | dampingRatio ≈ 1 | CSS 用 ease-out；JS 提高 damping |
| 更拖沓 | 慢慢靠近目标，像阻力很大 | 提高 dampingRatio 或降低 stiffness | 提高 damping / dampingRatio | CSS 拉长 duration；JS 提高 damping |
| 手势释放自然 | 继承用户拖拽时的速度 | 设置 startVelocity | 设置 initialVelocity | JS 传 velocity；CSS 不适合 |