Javascript - 无法调整FrameRate - requestanimationframe [英] Javascript - Can't Adjust FrameRate - requestanimationframe

问题描述

我开始循环

  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. 每次我必须清除画布吗？

$ b

感谢。





在这里是完整代码的链接：
完整代码





感谢

解决方案

rAF已锁定监视器的同步功能，通常为60 Hz，因此无法调整FPS （当标签处于非活动状态或电池时，浏览器可能会降低FPS）。





此外，您要更改的是聚合填充的后备也就是：如果浏览器不支持rAF，它将改为使用 setTimeout 。但是，现在大多数浏览器都会 支持rAF（甚至未加前缀），因此 setTimeout 将永远不会使用。





您可以做两件事：






• 使用 setTimeout 直接（测试时）






示例：

  var FPS = 1; 
 
 function testLoop（）{
 
 ...普通代码
 
 setTimeout（testLoop，1000 / FPS）; 
} 
  







• 使用计数器调节rAF： li>
  




示例：

  var framesToSkip = 60，
 counter = 0; 
 
 function loop（）{
 
 if（counter< framesToSkip）{
 counter ++; 
 requestAnimationFrame（loop）; 
 return; 
} 
 
 ///做常规的东西
 
 counter = 0; 
 requestAnimationFrame（loop）; 
} 
  

MODIFIED FIDDLE HERE





有很多更好的方法来实现限制，显示了基本原理。这将仍然以全速（60 FPS）运行，但是您的代码将执行最少的操作，并且只有当计数器达到其计数时，它将执行主代码。





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




I start the loop

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. I can't adjust the frame rate. It is always really fast. Why can't I change it to 1 frame a second. I want to do this just for testing purposes.
2. Do I have to clear the canvas each time? It seems to work good without clearing it.

Thanks.

Here is a link to a fiddle for the complete code: complete code

Thanks

解决方案

rAF is locked to monitor's sync, typically 60 Hz, so we can't adjust the FPS for it in itself (browser may reduce FPS when tab is inactive or on batteries).

Also, what you are trying to change is the fallback for the poly-fill; that is: if rAF is not supported in the browser it will instead use setTimeout. However, most browsers nowadays do support rAF (even un-prefixed) so the setTimeout will never be used.

You can do two things:

• Replace rAF in your loop by using setTimeout directly (when testing)

Example:

var FPS = 1;

function testLoop() {

    ... ordinary code

    setTimeout(testLoop, 1000/FPS);
}

• Throttle rAF by using a counter:

Example:

var framesToSkip = 60,
    counter = 0;

function loop() {

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

    /// do regular stuff

    counter = 0;
    requestAnimationFrame(loop);
}

MODIFIED FIDDLE HERE

There are most likely better ways to implement throttling, but I am trying to just show the basic principle. This will still run at full speed, 60 FPS, but your code will do minimal of operations and only when the counter has reached its count will it execute the main code.

You do not need to clear the canvas each time if what you draw next will cover previously drawn content, or if you want to keep it of course. You can also clear a portion to optimize further, if needed.

这篇关于Javascript - 无法调整FrameRate - requestanimationframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！