playbackEase V4 JS
将缓动函数应用于动画的整个播放过程。
与 tween 的 ease
参数不同,后者应用于每个属性关键帧之间,像这样
0 ────────────────────────────────› 1
A ──ease──› B ──ease──› C ──ease──› D
playbackEase
参数是全局应用的,像这样
0 ──────────────ease──────────────› 1
A ────────› B ────────› C ────────› D
接受
默认
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>