知识库

BetaThis is a live doc! Anyone with edit access can make updates in real time without having to publish.

By Bryan

1 min

动画的特点：自然

easing 最大的问题是有一个固定的 duration，而日常生活中的没有；Spring 动画相比于 easing 动画而言更加自然（更加贴近真实的自然）

Spring Animation 是 SwiftUI 的默认行为，而在前端领域则必须通过 Framer Motion 等 JS 库来使用（CSS 不支持）

定义 Spring 动画的两种方式

纯自然方式：mass 质量, tension 张力, and velocity 速度
- 配置的似乎更多是 Stiffness 刚度 Damping 阻尼 Mass 质量
  - https://chatgpt.com/share/67f81420-d7c0-800d-aed1-d15ee67514f0
  - https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/
简化方式：duration（可感知时间）和 bounce 弹跳【苹果与 Framer Motion】
- 注：这里的 duration 是 perceptual duration 可感知时间，与 easing 的动画时间不同；Spring 动画的实际执行时间通常比定义的 duration 更长（后面会有一些 subtle 微小的动画出现）
- 尽管「弹簧」听起来就要弹跳，但是默认不弹跳通常更好

Spring 动画的另一特点：可打断（而 CSS Transition 则不可，如果一个动画过程中出现另一个动画会直接从前一个动画的结束时刻状态开始第二个动画）

很多动画使用 Easing 和 Spring 可能（几乎）完全感受不到差异

使用 Spring 依赖第三方库（Framer Motion / React Spring 等），会带来百 KB 的开销

非得用 CSS 的话：Safari 支持真实的 Spring，其他的只能利用 linear easing 去模拟 Spring

mass 质量
stiffness 刚度 / tension 张力
- 描述了弹簧存储力的能力，F = -k * x (x 是移动的距离），k 越大，「拽弹簧越费劲」 → 「弹簧回去（弹簧动画）的越快、bounce 越明显」
damping 阻尼 / friction 摩擦
- 摩擦越大，停的越快