合理的默认值
默认情况下,原生 WAAPI 动画需要设置持续时间,不应用任何缓动效果,更麻烦的是,它不会保留其最终值,导致用户必须在动画完成后手动设置最终样式。
Anime.js 简化了这一切,它确保动画在完成后状态得以保留,并且使用与 JS animate()
方法相同的默认持续时间和延迟。
语法比较
Anime.js
waapi.animate('.circle', { translate: '100px' });
WAAPI 等效项
const $el = document.querySelector('.circle');
$el.animate({ translate: '100px' }, {
duration: 1000,
easing: 'ease-out',
}).finished.then(() => {
$el.style.translate = '100px';
});
合理默认值的代码示例
import { waapi } from 'animejs';
waapi.animate('.circle', { translate: '16rem' });
<div class="large row">
<div class="circle"></div>
</div>