CaiCai9426

使用requestAnimationFrame来提升动画性能

在实际项目中我们经常会遇到生成动画的需求，传统方法是通过使用setTimeout和setInterval进行实现，但是定时器动画有两个弊端：

  • 时间间隔并不好拿捏，设置太短浏览器重绘频率太快会产生性能问题，太慢的话又显得像PPT不够平滑，业界推荐的时间间隔是16.66...（显示器刷新频率是60Hz，1000ms/60）
  • 浏览器UI线程堵塞问题，如果UI线程之中有很多待完成的渲染任务，所要执行的动画就会被搁置。

为了解决这些问题HTML5加入了requestAnimationFrame

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

  • requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

  • 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

  • requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

requestAnimationFrame()接收一个函数作为回调，返回一个ID值，通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

生成一个旋转并逐渐变窄的方块，当窄到一定程度又会复原循环往复

var rotate = 0;
var width = 400;
var element = document.getElementById('box');

function step(timestamp) {
    rotate += 10
    element.style.transform = `rotate(${rotate}deg)`;
    window.requestAnimationFrame(step);
}

function small(timestamp) {
    width = width - 1
    element.style.width = width + 'px';
    if (width <= 50) {
        window.requestAnimationFrame(big);
    } else {
        window.requestAnimationFrame(small);
    }
}
function big() {
    width = width + 1
    element.style.width = width + 'px';
    if (width >= 400) {
        window.requestAnimationFrame(small);
    } else {
        window.requestAnimationFrame(big);
    }
}

window.requestAnimationFrame(step);
window.requestAnimationFrame(small);

← 防抖-节流-requestAnimationFrame →