Javascript - requestAnimationFrame帧率

Question

我有一个精灵工作表动画，我正在使用requestAnimationFrame方法在工作表上只有4个图像的精灵工作表动画这是我的代码：http://hyque.com/ryan/ani-ryan-2.html问题是它在60fps太快了，所以我想减慢fps。我已经阅读了几篇关于使用setInterval或Date()的不同方法的文章。我似乎不能让代码正常工作。有没有人能帮帮忙。下面是我尝试合并到代码中的一篇文章：http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

Answer 1

所以我喜欢用来控制动画，而不是“游戏循环”。

var lastRender = 0;
var counter = 0;
function render(time)
{
    //checks to see if enough time has passed
    if(time - lastRender<16){requestAnimationFrame(render);return;}
    lastRender = time;
    counter++;
    if(counter %20 && counter != 0)
       animation();
    if(counter >= 60)
         counter=0;
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

这让你可以更好地控制你的精灵，所以你现在可以在不同的速度下使用它们，并且你的逻辑保持在60fps。

Answer 2

通常，对于游戏引擎，您希望渲染速度与逻辑速度不同。

逻辑速度应该尽可能快

setInterval(逻辑，0 )；//越快越好

或

setTimer( logic，0 )；// logic()再运行一次(我觉得这样更好)

而渲染应该保持原样，只要渲染完成就可以了

requestAnimationFrame(渲染) //每渲染帧

然而，requestAnimationFrame在机器之间是不稳定的，并且大多数情况下将运行60帧/秒(取决于用户的硬件)。

在这种情况下，为了保持一致性，应使动画基于一致的时间或setTimeout。

在你的动画中你可以使用像这样的东西

var date =新日期()，//日期对象

毫秒= date.getMilliseconds()，// 0- 999秒

totalSpriteFrames =4

frame = Math.floor(毫秒/( 1000 / totalSpriteFrames ) )；//将第二帧拆成四帧

在动画范围之外创建date对象进行优化，这个数学模型可以很容易地用来选择精灵所在的“帧”。您也可以对多个sprites使用它，只需更改它们的“totalSpriteFrames”即可。

这也是可伸缩的，如果你最终得到一个有很多帧的框架重的精灵。