弹簧

一个弹簧曲线生成器，返回一个带有相应持续时间的缓动函数，用于创建基于物理的动画。

spring() 方法可以直接传递给 ease 参数，作为 animate() 方法的一部分。

import { animate, spring } from 'animejs';

animate(target, { x: 100, ease: spring({ bounce: .5 }) });

动画的 duration 参数会被弹簧计算出的稳定持续时间覆盖。

感知参数

这些参数为生成的曲线提供了更直观和可预测的控制，侧重于视觉上的感觉而非底层的物理特性。
当使用感知参数时，物理值会根据 Apple 的 SwiftUI 弹簧模型自动计算。

animate(target, { x: 100, ease: spring({ bounce: .5, duration: 350 }) });

名称	类型	信息
`弹性`	`数字`	控制动画的“弹性”。范围：`-1` 到 `1`。默认值：`0.5`。从 `0` 到 `1` 的值会产生有弹性的曲线，小于 `0` 的值会产生过阻尼曲线。建议将 `bounce` 值保持在 `-.5` 和 `.5` 之间，否则超出此范围的值会创建非常极端的曲线，并且与 `duration` 参数配合不佳。
`持续时间`	`数字`	动画在视觉上感觉完成时的感知持续时间（毫秒）。范围：`10` 到 `10000`。默认值：`628`。

物理参数

直接控制底层的弹簧物理模型。当您需要对物理模拟进行更精确的控制时，请使用这些参数。

animate(target, { x: 100, ease: spring({ stiffness: 95, damping: 13 }) });

名称	类型	信息
`质量`	`数字`	连接到弹簧的物体的质量。范围：`1` 到 `10000`。默认值：`1`。更高的值会产生更大的惯性，导致更慢、更重的运动。
`刚度`	`数字`	弹簧刚度系数。范围：`0` 到 `10000`。默认值：`100`。更高的值会产生更紧的弹簧，响应更快、更剧烈。
`阻尼`	`数字`	抵抗运动的阻尼系数。范围：`0` 到 `10000`。默认值：`10`。控制振荡衰减的速度。更高的值会减少弹性。
`velocity`	`数字`	动画的初始速度。范围：`-10000` 到 `10000`。默认值：`0`。正值使动画在目标方向上获得“启动”。

感知 `onComplete` 回调

这仅适用于 animate() 的 JS 版本。

动画的 onComplete 回调是根据弹簧的稳定持续时间调用的，这会在动画感觉完成的时刻与实际回调调用之间产生视觉上的脱节。
为了解决这个问题，可以在弹簧参数对象上定义一个单独的 onComplete 回调，当弹簧的感知 duration 达到时，该回调将被调用。

animate(target, {
  x: 100,
  onCompete: () => console.log('called when the setting duration is reached'),
  ease: spring({ 
    bounce: .25,
    duration: 350,
    onCompete: () => console.log('called when the spring perceived duration is reached'),
  })
});

名称	类型	信息
`onComplete`	`函数`	当弹簧达到其感知持续时间（而非稳定持续时间）时触发的回调。这会在动画在观看者看来完成时触发。

示例

名称	编辑器链接
默认弹簧	在编辑器中打开
灵敏弹簧	在编辑器中打开
弹性弹簧	在编辑器中打开
强力弹簧	在编辑器中打开

弹簧代码示例

import { animate, spring, utils } from 'animejs';

const [ $square1, $square2, $square3 ] = utils.$('.square');

utils.set('.square', { color: 'var(--hex-red-1)' })

animate($square1, {
  x: '17rem',
  rotate: 360,
  onComplete: () => utils.set($square1, { color: 'var(--hex-green-1)' }),
  ease: spring({
    bounce: .15,
    duration: 500,
    onComplete: () => utils.set($square1, { color: 'var(--hex-yellow-1)' }),
  })
});

animate($square2, {
  x: '17rem',
  rotate: 360,
  onComplete: () => utils.set($square2, { color: 'var(--hex-green-1)' }),
  ease: spring({
    bounce: .3,
    duration: 500,
    onComplete: () => utils.set($square2, { color: 'var(--hex-yellow-1)' }),
  })
});

animate($square3, {
  x: '17rem',
  rotate: 360,
  onComplete: () => utils.set($square3, { color: 'var(--hex-green-1)' }),
  ease: spring({
    stiffness: 90,
    damping: 14,
    onComplete: () => utils.set($square3, { color: 'var(--hex-yellow-1)' }),
  })
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">{ bounce: .15, duration: 500 }</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">{ bounce: .3, duration: 500 }</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">{ stiffness: 90, damping: 14 }</div>
</div>

弹簧

感知参数

物理参数

感知 onComplete 回调

示例

感知 `onComplete` 回调