补间值关键帧

使用Array为可动画属性创建多个补间值序列。
每个关键帧之间的持续时间等于总动画持续时间除以每个关键帧之间的过渡次数。
第一个关键帧定义了补间的起始值。

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

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

接受

一个有效 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>

关键帧
补间参数关键帧