Question

我有一个精灵表动画，其中我使用requestAnimationFrame方法为工作表设置动画，工作表上只有4个图像这是我的代码： http://hyque.com/ryan/ani-ryan-2.html 问题是它在60 fps下太快了，所以我想减慢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（logic，0）; //尽可能快地运行

OR

setTimer（logic，0）; // logic（）再次运行它（我认为这通常更好）</ p>

尽管渲染应该保持原样，但渲染完成的速度

requestAnimationFrame（render）//每个渲染帧

但是，requestAnimationFrame在计算机之间不稳定，并且大多数情况下每秒运行60帧（取决于用户的硬件）。

在这种情况下，为了保持一致性，您应该将动画基于一致的TIME或setTimeout。

在动画中，您可以使用类似

的内容

var date = new Date（），// date object

毫秒= date.getMilliseconds（），// 0 - 999的第二个

totalSpriteFrames = 4

frame = Math.floor（毫秒/（1000 / totalSpriteFrames））; //将第二个分为四个框架

在动画范围之外创建日期对象以进行优化，这个数学可以很容易地用来选择哪个＆＃34;框架＆＃34;你的精灵正在开启。您也可以将它用于多个精灵，只需更改它们的＆＃34; totalSpriteFrames＆＃34;

这也是可扩展的，以防你最终得到一个框架重的精灵与许多帧。

Javascript - requestAnimationFrame帧率

2 个答案: