requestAnimationFrame 的使用详解

4 min read

requestAnimationFrame（通常简写为rAF）是一个用来优化动画以减少电池消耗和提高性能的API。

rAF 的原理是在下一次浏览器的渲染前调用指定的回调函数，让浏览器更好地进行性能优化。

rAF 的使用步骤如下：

  1. 定义一个函数作为动画的回调函数
  2. 使用requestAnimationFrame函数来调度动画的下一次绘制
  3. 在回调函数中更新动画状态并重新调用requestAnimationFrame的函数，直到动画结束

下面是一个使用rAF实现动画的例子：

function animate() {
  // 更新动画状态
  // ...

  // 重新调用 requestAnimationFrame 函数
  requestAnimationFrame(animate);
}

// 开始动画
requestAnimationFrame(animate);

在动画过程中，通过不断地调用 requestAnimationFrame 函数来更新动画状态，从而让动画按照一定的速度进行。

需要注意的是，由于requestAnimationFrame函数是一个异步方法，因此在更新动画状态时需要计算每帧动画的时间间隔，以确保动画的速度是恒定的，并且在处理用户的输入事件时，需要停止调用 rAF 即可。