requestAnimationFrame - Javascript

简介

requestAnimationFrame是浏览器提供的用于优化动画性能的API。通过使用该API，我们可以在每个浏览器重绘且在重绘之前执行js的帧中运行动画。使用该API能够减少动画的掉帧率并提高帧率稳定性。

用法

下面是requestAnimationFrame的一个基本用法示例：

function animate() {
  // ... some animation code ...
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

需要注意的是，requestAnimationFrame()方法需要传入一个函数作为参数，该函数将在下一帧渲染时调用。由于该函数在下一帧之前被执行，所以该函数可以用来更新动画状态，并在下一帧开始之前触发屏幕更新。

兼容性

requestAnimationFrame API 在大多数现代浏览器中得到支持。但是，一些旧版浏览器不支持该API，从而导致过旧的浏览器需要使用 setInterval 或 setTimeout 作为替代方案。

示例代码

下面是一个使用requestAnimationFrame API的示例代码：

(function() {
  var cells = document.querySelectorAll('.cell');
  var width = cells[0].offsetWidth;

  function animateCells() {
    for (var i = 0, len = cells.length; i < len; i++) {
      cells[i].style.transform = 'translateX(' + (Math.random() * width - width/2) + 'px)';
    }
    requestAnimationFrame(animateCells);
  }

  animateCells();
})();

结论

requestAnimationFrame是一个非常有用的API，可以用于优化动画性能，提高浏览器的帧率稳定性。在动画实现时，我们应该优先使用requestAnimationFrame，除非需要控制帧率或需要在某些旧版浏览器中运行。