硬件加速动画

WAAPI 相对于 requestAnimationFrame 驱动的动画的最大优势之一是能够在主线程之外运行动画，从而在 CPU 繁忙时实现更流畅的动画，同时降低功耗，从而延长电池寿命。

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

所有主流浏览器中的硬件加速属性

opacity
transform
translate
scale
rotate

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

clip-path
filter

如果动画使用自定义的 'linear()' 缓动，Safari（桌面和移动设备）目前不会触发硬件加速。这意味着像 'out(3)'、'in(3)'、'inOut(3)' 这样的自定义 power 缓动，以及传递给 waapi.animate() 的每个 JavaScript 缓动，都会阻止动画被硬件加速，即使该属性支持它。

硬件加速动画代码示例

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

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

const waapiAnim = waapi.animate('.waapi.square', {
  translate: 270,
  rotate: 180,
  alternate: true,
  loop: true,
  ease: 'cubicBezier(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>

上一个 下一个