playbackEase V4 JS

将缓动函数应用于整个动画的播放。

与补间动画不同，ease 参数是应用于每个属性关键帧之间，如下所示：

0 ────────────────────────────────› 1
A ──ease──› B ──ease──› C ──ease──› D

playbackEase 参数是全局应用的，如下所示：

0 ──────────────ease──────────────› 1
A ────────› B ────────› C ────────› D

接受

ease

默认值

null

要全局更改默认值，请更新 engine.defaults 对象。

import { engine } from 'animejs';
engine.defaults.playbackEase = 'inOut';

playbackEase 代码示例

import { animate } from 'animejs';

animate('.square', {
  keyframes: [
    { y: '-2.5rem', duration: 400 },
    { x: '17rem', rotate: 180, scale: .5 },
    { y: '2.5rem' },
    { x: 0, rotate: 360, scale: 1 },
    { y: 0, duration: 400 }
  ],
  duration: 4000,
  playbackEase: 'inOut(3)', // this ease is applied accross all keyframes
  loop: true,
});

<div class="medium row">
  <div class="square"></div>
</div>