requestAnimationFrame: 高效动画的利器

requestAnimationFrame 是一种优化性能的方法，用于在浏览器重绘之前，请求执行指定的函数。它主要用于动画效果和其他需要高性能的视觉变化操作。下面是 requestAnimationFrame 的使用方法：

创建一个函数，用于执行需要重绘的操作。该函数会在浏览器重绘之前执行。

function animate() {
  // 执行需要重绘的操作
  // ...
  requestAnimationFrame(animate);
}

在需要开始动画的地方，调用 requestAnimationFrame，并传入该函数。这会触发第一次重绘。

requestAnimationFrame(animate);

在 animate 函数中，可以使用时间参数来控制动画的进度和速度。可以通过参数传递给 animate 函数，或者使用全局变量来获取时间。

function animate(timestamp) {
  // 计算动画的进度和速度
  var progress = timestamp - startTime;
  var speed = progress / duration;
  
  // 执行需要重绘的操作，根据进度和速度进行相应的变化
  // ...
  
  requestAnimationFrame(animate);
}

如果需要停止动画，可以使用 cancelAnimationFrame 方法取消动画帧的请求。

var requestId = requestAnimationFrame(animate);

// 停止动画
cancelAnimationFrame(requestId);

注意事项：

requestAnimationFrame 的回调函数会传入一个 DOMHighResTimeStamp 参数，表示当前重绘的时间。
requestAnimationFrame 的执行频率通常与浏览器的刷新率保持一致，一般为 60Hz，即每秒重绘 60 次。但是，浏览器可能会根据性能和电池寿命的考虑，调整刷新率。
使用 requestAnimationFrame 可以避免一些常见的性能问题，如过度绘制和卡顿现象。