何时使用 WAAPI

Web 动画 API（WAAPI）相比 JavaScript 的 requestAnimationFrame（RAF）驱动的动画提供了许多优势，但两者都有各自的优点和缺点，并且根据动画的类型或创建动画的上下文，并不总是可能或推荐使用 WAAPI 代替 RAF。

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

Animating during CPU/network load (see the hardware-accelerated animations section)
Initial page load time is critical and every KB counts (3KB gzip vs 10KB for the JavaScript version)
Animating complex CSS values not correctly handled by the JavaScript version, like CSS transform matrixes or CSS color functions.

何时使用 `animate()`：

Animating a large amount of targets (> 500)
Animating JS/canvas/WebGL/WebGPU
Animating SVG, DOM attributes or CSS properties not handled by the Web Animation API
Animating complex timelines and keyframes
You need more control methods
You need more advanced callback functions

何时使用 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()`：