自从接触 Framer 开始，我的交互设计流程被**弹性动画**（Spring Animation）入侵了。以往我都是以**缓动函数**（Easing Function）设置动效的物理变化，而在使用一段时间的弹性动画后，我的动效设计大部分被它所取代。考虑到网上对弹性动画的解释较少，这次写一篇有关于它解析。

老朋友，缓动函数

我们在设计动画时往往需要调节动画执行期间内的播放速度，例如位移时添加惯性效果，而缓动函数能够非常好的帮助我们完成这些。缓动曲线通过一条贝塞尔曲线（Bézier curve），定义动画执行时参数（位置、大小、角度等）与时间的函数关系。动效设计中常见的 EaseIn（缓入）、EaseOut（缓出）等动画参数都属于缓动曲线，而在一些 UI 软件或后期软件中则能进行更为细微的缓动函数设置。

现在，拿起弹性动画

物体在真实世界的运动模式并不像缓动函数那样的理想。由于惯性、加速度、重力等物理因素的影响，我们需要一种接近真实物理情况的动画模式来创造自然的动画，这便是弹性动画。

要在 Framer 中使用弹性动画，只需在过渡效果面板中选择“Spring”，或在代码中添加“type”为“spring”。

transition={{ type:"spring" }}

Framer 提供了两种设置弹性动画的方式：基于物理学参数的动画和基于时间的动画。

基于物理学的动画

基于物理学的动画包含三个主要设置参数：刚度（stiffness）、阻力（damping）与质量（mass），这三个参数决定了我们能看到什么样的动画效果。

弹性动画涉及到物理学中的胡克定律与牛顿第二定律，人们在电脑中利用公式与已知参数设计出弹性动画模式。如果你对其中的推演过程感兴趣，请参阅末尾的参考文献。

stiffness 刚度

刚度（stiffness）可以理解为元素的弹力强度（实际上它就是胡克定律中的劲度系数）。在其余参数不变的情况下，这个数值越大，物体在发生形变后进行复原时产生的弹力就越大。

https://framer.com/embed/Spring--Animation-Story-7FqjiqVLDtSBFRQ8drDv/SfVZvcYKq?highlights=0

transition={{type:"spring", damping: 10, // stiffness: 100 // default stiffness value. }}

在代码中仅设置 damping 时，stiffness 将以 100 的默认值被设置。

damping 阻力

阻力（damping）是元素运动时反作用力。由于刚度产生的弹力，物体一般会围绕着目标位置反复震荡。为了让物体停下来，我们需要阻力让它逐渐达到平衡状态。也就是说，阻力越大物体停止运动的速度就越快，动画时长越短。

transition={{ type:"spring", stiffness: 100  // damping: 10 // default damping value. }}

在代码中仅设置 stiffness 时，damping 将以 10 的默认值被设置。

mass 质量

质量（mass）与我们现实世界的物理规则类似：

当物体受到外界的干扰不变时（外力不变），如果物体的质量越大，物体的运动状态就越不容易发生改变。 所以说，物体的质量越大，其惯性就越大(来自某一册高中课本)

简单来说，如果我们在保持刚度与阻力不变的情况下，质量越大元素的运动就显得越笨重（速度慢），质量越小元素的运动就显得越轻盈（速度快）。

一般来说，我们在 Framer 中设计的是平面 UI 元素，因此可以只通过调节刚度与阻力来完成理想的动画效果。现在，来试试利用下面的原型来试试不同参数对动画的影响。

弹性动画虽然不能精准设置动画的时长，但这种不确定的动画为屏幕交互带来了更加真实的视觉体验。此外，Framer 也提供了一种基于时间的方式设置弹性动画。

基于时间的动画

使用基于时间的动画，只需要为元素设置弹性（bounce）持续时间（duration）即可。

目前，仅能在代码中使用基于时间的动画效果

bounce 弹性

弹性的设置区间在 0 ～ 1 之间。当 duration 被设置时，bounce 会以 0.25 的默认值被设置。

transition={{ type:"spring",  duration: 100, // bounce: 0.25 // default bounce value. }}

duration 持续时间

此参数与缓动函数一致，设置动画的持续时长。

需要注意的是

当 stiffness、damping、mass 其中某个或多个参数存在时，bounce 与 duration 将会失效。我猜 Framer 应该是利用 bounce 与 duration 来计算另外三个参数的值，本质上与设置三个物理参数是一致的，只不过更加简便。

其他几个参数

此外，Framer 还额外提供了几个参数让我们调节动画的状态。这些参数只有在特殊情况中才会被用到，且目前只能在代码中使用，这里进行简单的说明以供参考。

- velocity: 弹性动画的初始速度。如果为 velocity 设置了一个较大值，那么在元素出现时会有震荡效果（进入初始状态）。

- restSpeed: 当动画的速度低于这个值时结束动画。比如设置为 10 时，当元素的动画速度低于 10，元素会立即跳转到动画结束时的状态（目标关键帧），类似于动画被中途打断的效果。Framer 提供了一种“in units per second（单元/秒”的方式计量动画速度，默认值为 0.01。

- restDelta: 与 restSpeed 类似，只不过是当动画的“距离”小于此值时结束动画。“距离”的计算方式目前尚未得知。

如果你对 restSpeed 与 restDelta 感兴趣，建议直接与官方交流以获得详细的解释因为似乎在使用它们时需要细致的计算。

最后

这里展示了两个利用弹性动画制作的效果，分别是按钮的进入效果与侧边栏弹出效果。

曾经在用缓动函数时，我非常苦恼于如何设计一条真实自然的曲线来设置动画效果。尽管许多网站提供了函数的可视化设计工具，但进行了数次的参数调整后，动画的效果依旧强差人意（也许这于我的强迫症有关）。弹性动画很大程度上缓解了我的强迫症，至少现在无论如何调整参数，最终效果看上去依旧非常舒适。

参考文献

The physics behind spring animations

CSS如何实现弹簧动画效果

A Friendly Introduction to Spring Physics