通常我们都会使用 requestAnimationFrame 去实现动画。为什么呢？

requestAnimationFrame

requestAnimationFrame 这是一个 JavaScript API，它用于创建平滑动画。这个 API 告诉浏览器你希望执行一个动画，让浏览器在下一次重绘之前调用你指定的回调函数更新动画。这通常是在浏览器下一次重绘之间发生的，大约是每秒 60 次。

60fps

fps 代表“每秒帧数”(frames per second)。60fps 就意味着在一秒内，屏幕上的图像可以更新 60 次。高的帧率可以使动画或者视频看起来更加流畅。

60fps 和 requestAnimationFrareme 的关系

requestAnimationFrame 会尽量保持 60fps 的刷新频率。也就是说，当你使用 requestAnimationFrame 来运行动画时，浏览器会尽量每 16.66 毫秒（这就是 1 秒钟 60 帧的时间间隔）刷新一次屏幕，以实现流畅的动画效果。

使用 requestAnimationFrame 的好处在于它可以智能地对动画帧率进行限制，避免不必要的刷新，从而节省 CPU 和 GPU 的计算资源，减少电能消耗。

如果动画复杂，或系统资源繁忙等情况，可能无法实现稳定的 60fps，这时候 requestAnimationFrame 也可以智能地降低刷新频率，以确保系统的正常运行。

总的来说，requestAnimationFrame 和 60fps 是实现流畅、高效动画的重要工具和目标。

requestAnimationFrareme 的 ployfill

使用 settimeout 实现

window.requestAnimFrame = (function () {
  return (
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {
      window.setTimeout(callback, 1000 / 60);
    }
  );
})();
if (!window.cancelAnimationFrame)
  window.cancelAnimationFrame = (id) => clearTimeout(id);