requestAnimationFrame替代定时器

requestAnimationFrame是一种用于在浏览器中执行动画的API，它可以替代setInterval和setTimeout来实现动画效果。相比于定时器，requestAnimationFrame有以下优点：
1. 更加平滑：requestAnimationFrame会根据浏览器的刷新频率来执行动画，因此可以保证动画的流畅性。
2. 更加节省资源：requestAnimationFrame只会在页面处于激活状态时才会执行动画，因此可以节省CPU和GPU资源。
3. 自动适应：requestAnimationFrame会自动适应不同的设备和浏览器，因此可以保证在不同的环境下都能够正常运行。

使用requestAnimationFrame替代定时器的方法如下：
1. 定义一个step函数，用于执行动画的每一帧。
2. 使用window.requestAnimationFrame方法来调用step函数，以便在下一帧时执行动画。
3. 在step函数中更新动画的状态，并在需要停止动画时使用window.cancelAnimationFrame方法来取消动画。

代码示例：

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

  // 在下一帧时执行step函数
  window.requestAnimationFrame(step);
}

// 开始执行动画
window.requestAnimationFrame(step);

// 停止动画
window.cancelAnimationFrame(requestId);