基于时长的关键帧 JS

此语法允许通过访问 ease、delay、duration 和 modifier 参数，来对每个单独的关键帧进行非常精细的控制。

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

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

接受

一个包含一个可动画属性和缓动参数的 Object 数组。

基于时长的关键帧代码示例

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>