基于持续时间的关键帧 JS

按顺序执行多个可动画属性。

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

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

keyframes: [
  { y: 50, ease: 'out', duration: 400 },
  { x: 75, scale: .5, duration: 800 },
]

接受

一个包含一个可动画属性和补间参数的 Object（对象）Array（数组）。

基于持续时间的关键帧代码示例

import { animate } from 'animejs';

animate('.square', {
  keyframes: [
    { y: '-2.5rem', ease: 'out', duration: 400 },
    { x: '17rem', scale: .5, duration: 800 },
    { y: '2.5rem' }, // The duration here is 3000 / 5 = 600ms
    { x: 0, scale: 1, duration: 800 },
    { y: 0, ease: 'in', duration: 400 }
  ],
  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>