基于持续时间的关键帧 JS

按顺序排列多个可动画属性。

此语法允许通过为每个单独的关键帧提供 ease、delay、duration 和 modifier 参数来非常精细地控制动画。

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

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

接受

包含一个可动画属性和 Tween 参数的 对象 数组

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

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>

上一个 下一个