Question

我正在研究HTML5画布动画（更准确地说是照片幻灯片）。到目前为止，我所有的幻灯片都是闪存，因为上次（2010年3月）我看起来我的帧速率比html5画布高3倍到4倍。今天据说目前的浏览器已经赶上了闪存，但到目前为止我发现的所有html5画布样本在当前的Firefox和Chrome浏览器中都很不稳定。

在示例中，setInterval设置为15ms，这应该至少为60 fps。但在我的笔记本电脑上，动画口吃很多： http://demo.webdevhub.net/canvas/simple/

至少是最新浏览器的解决方法还是我需要再等一年？

最诚挚的问候，标记

Answer 1

在Windows 7上的FF5似乎没问题。在IE9上看起来也很顺利。

我认为部分问题可能是您的间隔太小。在较慢的设备上，它可以达到每秒66帧，但随后可以下降到更少，然后再回到66fps，从而产生口吃效果。

通过给出一个非常快的间隔，你有效地告诉它尽可能快地跑，并且它显然需要屏住呼吸。也许不是，也许还有别的东西在起作用。

尝试使用50ms的间隔，看看会发生什么。

对于踢，而不是使用setInterval，看看使用requestAnimFrame是否可以帮助您解决问题。它可能与快速间隔有相同的问题。

// shim for requestAnimFrame with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 60);
              };
    })();


    // usage: 
    // instead of setInterval(render, 16) ....

    (function animloop(){
      render();
      requestAnimFrame(animloop, element);
    })();

Answer 2

我目前正在开发一个HTML5 BomberMan克隆，起初我试图制作一些JavaScript gameLoops（谷歌）的最佳实现，但最后我以一个简单的setTimeout（...）gameLoop结束:)

而且看起来它的工作非常顺畅。我还有很多工作要做，但你可以看到current-dev-version（setTimeout设置为30 FPS - 但如果我将它设置为60 FPS - 完全没有问题）：

（感谢Simon在StackOverflow上的绘图优化注释）

http://sabiland.net/Testing/BomberMan_Dev/BomberMan.aspx

是否有HTML5画布动画口吃的解决方案？

2 个答案: