requestAnimationFrame 是一个浏览器提供的 JavaScript 方法，用于优化动画的性能。它会在浏览器下一次重绘之前调用指定的函数，从而使动画在刷新率（通常为每秒 60 次）下更加流畅。
在动画中使用 requestAnimationFrame 可以替代传统的 setTimeout 或 setInterval 来触发动画更新。与 setTimeout 或 setInterval 相比，requestAnimationFrame 具有以下优势：
-
更好的性能：
requestAnimationFrame能够利用浏览器的垂直同步（VSync），确保动画在每次刷新间隔内更新。这样可以减少资源消耗，使动画更加流畅。 -
自动适应：
requestAnimationFrame会根据浏览器的刷新率自动调整执行频率，避免不必要的计算和渲染。 -
在后台标签暂停：当用户切换到其他标签或最小化浏览器时，
requestAnimationFrame会自动暂停，节省 CPU 使用，提高电池寿命。
使用 requestAnimationFrame 的基本用法如下：
function animate() {
// 在此处执行动画更新逻辑
// ...
// 请求下一次动画帧
requestAnimationFrame(animate);
}
// 启动动画循环
requestAnimationFrame(animate);
在上面的示例中，animate 函数会在每次浏览器准备渲染新的帧时被调用。这样就可以确保动画在最佳的时间点进行更新，保持流畅性和性能。
总结：requestAnimationFrame 提供了更优雅的方式来执行动画，并可以获得更好的性能和更低的资源消耗。它是现代 Web 动画的推荐方法，并在大多数情况下应优先使用。
