html - 如何使用 requestAnimationFrame 锁定 FPS？

我使用了 Paul Irish 的脚本
https://gist.github.com/paulirish/1579671
在 html 站点内创建动画循环。

尽管它在全屏模式下比在浏览器窗口中更快，但它仍然有效。
此外，我观察到不同的速度取决于 Canvas 大小和我使用的浏览器。

问题:如何使用脚本确保稳定的帧率？

代码可在此处获得(Beginning WebGL，Brian Danchilla 的第 1 章):
https://github.com/bdanchilla/beginningwebgl/blob/master/01/2D_movement.html

最佳答案

像这样的事情应该有效。如果两帧之间的时间增量小于您的 FPS 限制，则更新函数返回并等待下一帧。但这只会限制更新发生得太快；就像 emackey 说的那样，更新循环总是有可能运行得更慢。

var updateId,
    previousDelta = 0,
    fpsLimit = 30;

function update(currentDelta) {
    updateId = requestAnimationFrame(update);

    var delta = currentDelta - previousDelta;

    if (fpsLimit && delta < 1000 / fpsLimit) {
        return;
    }

    /* your code here */

    previousDelta = currentDelta;
}

关于html - 如何使用 requestAnimationFrame 锁定 FPS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34766476/