Tween 值关键帧 V4

使用 Array 为可动画属性指定多个 Tween 值序列。
每个关键帧之间的持续时间等于总动画持续时间除以每个关键帧之间过渡的数量。
第一个关键帧定义了 tween 的 from 值。

您可以使用此语法快速设置动画的初始 from 值

animate(target: { x: [-100, 100] }); // Animate x from -100 to 100

接受

有效 Tween 值的 Array

Tween 值关键帧代码示例

import { animate } from 'animejs';

animate('.square', {
  translateX: ['0rem', 0, 17, 17, 0, 0],
  translateY: ['0rem', -2.5, -2.5, 2.5, 2.5, 0],
  scale: [1, 1, .5, .5, 1, 1],
  rotate: { to: 360, ease: 'linear' },
  duration: 3000,
  ease: 'inOut', // ease applied between each keyframes if no ease defined
  playbackEase: 'ouIn(5)', // ease applied accross all keyframes
  loop: true,
});

<div class="medium row">
  <div class="square"></div>
</div>

上一个 下一个

关键帧
Tween 参数关键帧