何时使用 WAAPI
Web Animations API (WAAPI) 相对于 JavaScript requestAnimationFrame (RAF) 驱动的动画有很多优势，但两者都有优点和缺点。根据动画类型或创建动画的上下文，使用 WAAPI 代替 RAF 并非总是可行甚至推荐。
在以下情况下优先使用 waapi.animate()：
- 在 CPU/网络负载期间进行动画处理（请参阅硬件加速动画部分）
- 初始页面加载时间至关重要，每一 KB 都很重要（3KB gzip vs JavaScript 版本的 10KB）
- 动画处理 JavaScript 版本无法正确处理的复杂 CSS 值，例如 CSS 变换矩阵或 CSS 颜色函数。
在以下情况下使用 animate()：
何时使用 WAAPI 代码示例
import { animate, waapi, utils } from 'animejs';
// WAAPI Animation
waapi.animate('.waapi.square', {
x: '17rem',
rotate: 180,
loop: 3,
alternate: true,
});
// JS Animation
const data = { x: '0rem', rotate: '0deg' }
const [ $log ] = utils.$('code');
animate(data, {
x: 17,
rotate: 180,
modifier: utils.round(0),
loop: 3,
alternate: true,
onRender: () => $log.innerHTML = JSON.stringify(data)
});<div class="medium row">
<div class="square waapi"></div>
</div>
<div class="small row"></div>
<pre class="medium centered row">
<code>{"x": '0rem',"rotate":"0deg"}</code>
</pre>