何时使用 WAAPI

Web Animations API (WAAPI) 与基于 JavaScript requestAnimationFrame (RAF) 的动画相比具有许多优势，但两者各有利弊。根据动画类型或创建动画的上下文环境，并非总是能够使用或推荐使用 WAAPI 来替代 RAF。

在以下情况优先使用 `waapi.animate()`：

在 CPU/网络负载较高时进行动画处理（请参阅硬件加速动画章节）
初始页面加载时间至关重要且每一 KB 都很关键时（3KB gzip 与 JavaScript 版本的 10KB 相比）
动画处理 JavaScript 版本无法正确处理的复杂 CSS 值时，例如 CSS 变换矩阵或 CSS 颜色函数。

在以下情况使用 `animate()`：

动画处理大量目标（> 500 个）
动画处理 JS/canvas/WebGL/WebGPU
动画处理 SVG、DOM 属性或 Web Animation API 未涵盖的 CSS 属性
动画处理复杂的时间轴和关键帧
您需要更多的控制方法
您需要更高级的回调函数

何时使用 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>

何时使用 WAAPI

在以下情况优先使用 waapi.animate()：

在以下情况使用 animate()：

在以下情况优先使用 `waapi.animate()`：

在以下情况使用 `animate()`：