JS requestAnimationFrame 的使用详解

20 min read

requestAnimationFrame 是 JavaScript 提供的一个内置方法，用于优化执行动画的函数，使得动画效果更加流畅。该方法会告诉浏览器，在下一次重绘之前执行指定的回调函数，以达到动画效果的目的。

使用 requestAnimationFrame 的步骤如下：

  1. 创建一个需要执行动画的元素，比如一个 div，可以通过 document.createElement 方法创建。

  2. 定义一个函数，该函数将在每一帧被执行，用于更新元素的属性或样式，从而产生动画效果。

function animate() {
  // 在此处更新元素的属性或样式
  requestAnimationFrame(animate);  // 递归调用该函数
}

  1. 在递归调用的函数中，使用 requestAnimationFrame 方法再次调用该函数，以便在下一次重绘之前执行。

  2. 在页面加载完成后调用该函数，开始执行动画。

window.onload = function() {
  animate();
}

注意事项：

  • 在使用 requestAnimationFrame 时，不需要手动控制循环的频率。浏览器会自动根据屏幕的刷新频率决定每秒调用的次数。

  • 如果用户切换到了其他的 Tab 页面或最小化了浏览器窗口，requestAnimationFrame 会暂停执行，避免占用过多的计算资源。当用户重新切换到当前页面时，动画会自动继续执行。

  • 如果某个动画效果不再需要，需要手动停止 requestAnimationFrame 的调用。可以通过设置一个标志位来控制该函数的递归调用。

let shouldStop = false;

function animate() {
  // 在此处更新元素的属性或样式
  if (!shouldStop) {
    requestAnimationFrame(animate);
  }
}
  • 在使用 requestAnimationFrame 时，需要注意兼容性问题。在较老的浏览器中可能不支持该方法，可以使用 polyfill 来解决兼容性问题。
if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 1000 / 60);
  };
}