playbackEase V4 JS

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

与 tween 的 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>