Javascript -无法调整FrameRate请求动画框架

Question

我开始循环

function gameLoop(){
   update();
   draw();
   requestAnimFrame(gameLoop);
}

var requestAnimFrame =  window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function(callback) {
                        window.setTimeout(callback, 1000 / 1);
                    };

1. 我不能调整帧速率。它总是非常快。为什么我不能把它改成每秒1帧。我想做这个只是为了测试目的。
2. 我每次都要清理画布吗？如果不清理它，它似乎会很好地工作。

谢谢。

以下是完整代码的小提琴链接：完整代码

谢谢

Answer 1

rAF被锁定为监视器的同步，通常为60赫兹，因此我们不能为它自身调整FPS (浏览器可能会在标签处于不活动状态或电池上时减少FPS )。

另外，您试图更改的是poly的回退；也就是说:如果浏览器中不支持rAF，那么它将使用setTimeout。然而，现在大多数浏览器都支持rAF (甚至是无前缀的)，因此永远不会使用setTimeout。

你可以做两件事：

• 直接使用rAF替换循环中的setTimeout (测试时)

示例：

var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}

• 使用计数器控制rAF：

示例：

var framesToSkip = 60,
    counter = 0;

function loop() {

    if (counter < framesToSkip) {
        counter++;
        requestAnimationFrame(loop);
        return;
    }

    /// do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}

改性小提琴

很可能有更好的方法来实现节流，但我只是想展示一下基本原理。这仍然将以全速运行，60 FPS，但您的代码将进行最少的操作，只有当计数器已经达到其计数时，它才会执行主代码。

您不需要每次清除画布，如果您接下来所绘制的内容将涵盖以前绘制的内容，或者您当然希望保留它。如果需要，还可以清除一部分以进一步优化。

Answer 2

派对有点晚了，但是这里是如何在控制帧/秒的同时获得RAF的好处。

注意: requestAnimationFrame现在有一个更好的方法来做事情，而不是在我最初的3岁的原始答案中使用代码模式.有关新的和改进的方法，请参阅下面的更新。

更新: requestAnimationFrame现在有了一种更好的控制的方法

新版本的requestAnimationFrame现在自动发送当前时间戳，您可以使用该时间戳来限制代码的执行。

下面是每1000 is执行一次代码的示例代码：

var nextTime=0;
var delay=1000;

function gameLoop(currentTime){
    if(currentTime<nextTime){requestAnimationFrame(gameLoop); return;}
    nextTime=currentTime+delay;
    // do stuff every 1000ms
    requestAnimationFrame(looper);
}

}

Answer 3

你应该看看这篇文章，这篇文章对这一主题给予了适当的处理。http://creativejs.com/resources/requestanimationframe/

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimFrame(draw);
        // Drawing code goes here
    }, 1000 / fps);
}

这里是我认为您想要的代码，但是在最初的文章中它说使用了requestAnimationFrame，但是这里我使用的是requestAnimFrame。我想也许它改变了，你现在应该使用requestAnimFrame了。requestAnimationFrame没有为我工作，而requestAnimFrame却为我工作。