硬件加速动画

WAAPI 相比基于 requestAnimationFrame 的动画，其最大的优势之一在于能够脱离主线程运行动画。这不仅能在 CPU 繁忙时保持动画流畅，还能降低功耗，从而延长电池续航时间。

需要注意的是，并非所有属性都能进行硬件加速。目前在所有浏览器中，只有少数几个属性可以创建新的合成层并脱离主线程运行。

所有主流浏览器均支持硬件加速的属性

opacity
transform
translate
scale
rotate

部分浏览器支持硬件加速的属性

clip-path
filter

如果动画使用了自定义的 'linear()' 缓动函数，Safari（桌面端和移动端）目前不会触发硬件加速。这意味着自定义幂函数缓动（如 'out(3)'、'in(3)'、'inOut(3)'）以及所有传递给 waapi.animate() 的 JavaScript 缓动函数，都会阻止动画进行硬件加速，即使该属性本身支持硬件加速。

硬件加速动画代码示例

import { animate, waapi, createTimer, utils, cubicBezier } from 'animejs';

const [ $block ] = utils.$('.button');

const waapiAnim = waapi.animate('.waapi.square', {
  translate: 270,
  rotate: 180,
  alternate: true,
  loop: true,
  ease: 'cubic-bezier(0, 0, .58, 1)',
});

const jsAnim = animate('.js.square', {
  x: 270,
  rotate: 180,
  ease: cubicBezier(0, 0, .58, 1),
  alternate: true,
  loop: true,
});

const blockCPUTimer = createTimer({
  onUpdate: () => {
    const end = Date.now() + 100;
    while(Date.now() < end) {
      Math.random() * Math.random();
    }
  },
  autoplay: false
});

let isBusy = false;

const toggleCPU = () => {
  blockCPUTimer[isBusy ? 'pause' : 'play']();
  $block.innerText = (isBusy ? 'block' : 'free') + ' CPU';
  isBusy = !isBusy;
}

$block.addEventListener('click', toggleCPU);

<div class="medium row">
  <div class="waapi square"></div>
  <span class="padded label">WAAPI</span>
</div>
<div class="medium row">
  <div class="js square"></div>
  <span class="padded label">JS</span>
</div>
<div class="medium row">
  <fieldset class="controls">
    <button class="button">Block CPU</button>
  </fieldset>
</div>