补间参数关键帧 JS

这种语法允许通过为每个单独的关键帧提供对 ease（缓动）、delay（延迟）、duration（持续时间）和 modifier（修改器）参数的访问权限，从而实现对动画的精细控制。

关键帧的默认 duration（持续时间）等于总动画持续时间除以关键帧的总数。

接受

一个包含补间参数的 Array（数组）

补间参数关键帧代码示例

import { animate } from 'animejs';

animate('.square', {
  x: [
    { to: '17rem', duration: 700, delay: 400 },
    { to: 0, duration: 700, delay: 800 },
  ],
  y: [
    { to: '-2.5rem', ease: 'out', duration: 400 },
    { to: '2.5rem', duration: 800, delay: 700 },
    { to: 0, ease: 'in', duration: 400, delay: 700 },
  ],
  scale: [
    { to: .5, duration: 700, delay: 400 },
    { to: 1, duration: 700, delay: 800 },
  ],
  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>