Tween 参数关键帧 JS

为可动画属性指定多个 Tween 参数序列。

此语法允许通过为每个单独的关键帧提供 ease、delay、duration 和 modifier 参数，从而对动画进行精细控制。

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

接受

Tween 参数数组

Tween 参数关键帧代码示例

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>

上一个 下一个