硬件加速动画

WAAPI 相对于由 requestAnimationFrame 驱动的动画的最大优势之一是能够在主线程之外运行动画，从而在 CPU 忙碌时实现更流畅的动画，同时消耗更少的电量，这可以改善电池寿命。

问题在于，并非所有属性都可以硬件加速，目前只有少数属性可以创建新的合成层并在每个浏览器的主线程之外运行。

每个主流浏览器中的硬件加速属性:

opacity
transform
translate
scale
rotate

某些浏览器中的硬件加速属性:

clip-path
filter

Safari（桌面版和移动版）目前如果动画使用自定义的 'linear()' 缓动，将不会触发硬件加速。这意味着像 '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>