如何使用 requestAnimationFrame 控制动画中的 FPS？

使用 requestAnimationFrame 控制 FPS

requestAnimationFrame 已成为平滑动画的首选方法，但有时会以不同的速度运行。这里有一个确保帧速率一致的技术：

Throttle requestAnimationFrame to a Specific FPS

此方法使用条件检查仅在指定 FPS 时执行动画代码间隔已过。

实现：

1. 初始化变量：

   • 创建变量用于停止、帧计数、经过时间、开始时间和 FPS 间隔。

2. 开始动画：

   • 初始化这些变量并调用 animate() 函数来启动循环。

3. 动画循环：

   • 计算经过的时间自上次使用 Date.now() 循环以来。
   • 如果 elapsed 大于 fpsInterval，则绘制下一帧。
   • 调整然后以考虑 FPS 间隔与 RAF 默认值之间的差异

4. 绘图代码：

   • 将您的绘图代码放在条件检查中（如果已过去 > fpsInterval） .

示例代码：

<code class="javascript">var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() {
    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

此方法可确保动画以指定的 FPS 运行，无论浏览器的渲染速度。

以上是如何使用 requestAnimationFrame 控制动画中的 FPS？的详细内容。更多信息请关注PHP中文网其他相关文章！