怎样利用 requestAnimationFrame 控制 fps

在网页动画开发中，控制帧率（fps）至关重要，它直接影响用户体验。过高的帧率会消耗资源，而过低则会导致动画卡顿。requestAnimationFrame 便是解决这一问题的有力工具。

requestAnimationFrame 是浏览器提供的原生 API，它会在浏览器下一次重绘之前执行传入的回调函数。其优势在于它能根据浏览器的刷新频率来优化动画执行，通常浏览器的刷新频率是 60Hz，即每秒重绘 60 次。

要利用 requestAnimationFrame 控制 fps，首先要理解其基本用法。它接受一个回调函数作为参数，这个回调函数会在浏览器下一次重绘前执行。例如：

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
animate();

在上述代码中，animate 函数不断调用自身，形成循环，实现持续动画。

若要控制具体的帧率，比如将帧率控制在 30fps。由于浏览器默认刷新频率是 60Hz，意味着每 16.67 毫秒（1000 毫秒 / 60）重绘一次。要实现 30fps，就需要每 33.33 毫秒（1000 毫秒 / 30）执行一次动画逻辑。可以通过记录时间戳来实现：

let lastTime = 0;
function animate(frameTime) {
    const elapsed = frameTime - lastTime;
    if (elapsed >= 33.33) {
        // 执行动画逻辑
        lastTime = frameTime;
    }
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

在这段代码中，通过计算当前时间与上次执行动画逻辑的时间差 elapsed。当 elapsed 达到 33.33 毫秒时，执行动画逻辑，并更新 lastTime。

除了固定帧率，还可以根据设备性能动态调整帧率。例如，在性能较弱的设备上，适当降低帧率以保证流畅性。可以通过性能检测 API 来获取设备信息，然后根据情况调整帧率。

利用 requestAnimationFrame 控制 fps，能让网页动画在不同设备和场景下都有出色表现。通过合理设置帧率，既能节省资源，又能提供流畅的用户体验。掌握这一技术，能提升网页动画开发的质量和效率。