Spring Animation 弹性动画

简介

一种在 UI 设计动画系统中比较常见的动画效果。它使用弹簧模型来模拟物理弹性，从而实现逼真的弹动效果。

Spring Animation 通过模拟物理力学原理，可以让动画更加平滑、自然，这与用户日常生活中的物理弹性相符，从而提高交互的体验度。

使用 Spring Animation 制作的动画可以使界面元素运动轨迹变得更加生动，更加有趣。

动画参数

可以设置动画元素的 质量 Mass、张力 Tension、摩擦力 Friction等参数，模拟自然、物理的效果。

表格视图查看

Property	属性	Default 默认	Description 描述	Origami 支持
mass	质量	`1`	质量，决定物体的惯性大小，值越大，惯性越大。	是
tension	张力	`170`	弹簧能量的负载。	是
friction	摩擦力	`26`	弹簧的阻力。	是
clamp	夹紧	`false`	当为真时，一旦弹簧超过其边界就停止弹簧。	是
precision	精确	`0.01`	在我们认为动画值“存在”之前，动画值与最终结果的接近程度，这对于 spring 弹簧和 decay 衰减动画很重要。	是
velocity	速度	`0`	初始速度。	是
easing	缓动	`t => t`	默认情况下是线性的，你可以使用任何你想要的缓动。	是
damping	阻尼	`1`	阻尼比，它决定了弹簧如何减速。仅在`frequency`定义时有效。默认为`1`。	是
progress	进度	`0`	当与一起使用时`duration`，它决定了从缓动函数开始的距离。持续时间本身不受影响。	是
duration	持续时间	`undefined`	如果 > 大于 0 将切换到基于持续时间的动画而不是弹簧物理，值应以毫秒为单位表示（例如`duration: 250`持续时间为 250 毫秒）。	是
decay	衰减	`undefined`	`number`的衰减率。如果通过`true`默认为 0.998。	是
frequency	频率	`undefined`	频率（以秒为单位），它规定了在没有阻尼存在时每秒的反弹次数，即控制弹簧的震动频率，值越大表示频率越高。定义时, `tension` 从这里派生, `friction` 从 `tension` 和 `damping`派生。	是
round	四舍五入	`undefined`	当动画进行时，四舍五入到该数字的最接近的倍数。`from`和`to`的值永远不会四舍五入，传递给动画值的`set`方法的任何值也是如此。	是
bounce	反弹力	`undefined`	当高于`0`时，弹簧将反弹而不是超过目标值。	是
restVelocity	初始速度	`undefined`	动画开始时物体的初始速度，通常情况下，restVelocity 被设置为零，这意味着物体是静止的，动画会从静止状态开始。但是，如果想要模拟更加复杂的动态效果，也可以将 restVelocity 设置为非零值。	是

Mass 质量

默认值：1 | Origami 支持：是

描述：代表物理系统中的质量，也就是动画元素在运动时的质量值。也决定物体的惯性大小，值越大，惯性越大。

这个参数用来影响动画运动的速度，当质量增加时，动画速度就会减缓；当质量减少时，动画速度就会加快。

通过控制质量，可以使动画元素运动呈现出更加真实的物理效果。

Tension 张力

默认值：170 | Origami 支持：是

描述：代表了动画弹簧的紧度。Tension 越大，弹簧的紧度就越高，弹性就越强；反之，Tension 越小，弹簧的紧度就越低，弹性就越弱。

Tension 决定了弹簧动画的弹力大小，也就决定了弹性动画的长度和速度。

因此，如果要制作出具有特定弹性的动画效果，通常需要通过调整 Tension 参数来实现。

Friction 摩擦力

默认值：26 | Origami 支持：是

描述：Friction 参数控制动画的摩擦力，它代表动画的摩擦力。较大的 Friction 值会导致动画速度减缓，较小的 Friction 值会导致动画速度加快。

Clamp 夹紧

默认值：false | Origami 支持：是

描述：当为真时，一旦弹簧超过其边界就停止。用于限制动画的结果值在一个特定的范围内。它的作用是防止某些动画的结果值过大或过小，从而影响整体用户体验。

在使用 clamp 参数时，您可以指定动画的结果值的最小值和最大值。如果动画的结果值超出了这个范围，那么它将被限制在范围内。

Precision 精确值

默认值：0.01 | Origami 支持：是

描述：precision 参数是用来控制动画计算精度的。它表示动画每帧更新的次数，设置的数值越高，计算精度就越高，动画就越流畅，但是也会消耗更多的处理资源。

一般来说，precision 的默认值就能满足大多数场景的需求，除非特殊情况需要，否则不需要更改它的值。

Velocity 速度

默认值：0 | Origami 支持：是

描述：velocity 参数指定了动画开始的初始速度。这个参数用于控制动画的快慢程度，并且决定了动画是否需要弹跳。

如果 velocity 参数设置的值较大，动画将以更快的速度完成，如果设置的值较小，动画将以更慢的速度完成。

Easing 缓动

默认值：t => t | Origami 支持：是

描述：默认情况下是线性的，你可以使用任何你想要的缓动。

easing 参数是一个可选参数，它控制了动画的时间复杂度，可以影响动画的表现。一般来说，easing 参数可以让动画看起来更自然，使其表现更真实。

不同的 easing 参数可以模拟不同的物理效果，例如弹簧的形态，重力，惯性等。通过选择适当的 easing 函数，可以让动画看起来更有趣，更有吸引力。

Damping 阻尼

默认值：1 | Origami 支持：是

描述：指的是振动的阻尼系数。它决定了弹簧如何减速，它越高，振动就越快消失。

仅在 frequency定义时有效。默认为 1。

这个参数用于控制动画中物体的振动，从而影响动画的效果和感觉。

它与其他参数，如 Tension 和 Friction，一起决定了动画的表现方式。适当的调整 damping 参数可以让动画更逼真和有趣。

Progress 进度

默认值：0 | Origami 支持：是

描述：动画当前的进度状态。通常情况下，进度范围为 0 到 1，其中 0 表示动画的起始位置，1 表示动画的结束位置。

通过跟踪进度的变化，研发人员可以对动画的每一帧进行更细致的控制。