是否有HTML5画布动画口吃的解决方案？ [英] Is there a solution for HTML5 canvas animation stutter?

问题描述

我在HTML5画布动画工作（更precisely照片幻灯片）。到目前为止，我所有的幻灯片都在闪光，因为上一次（2010年3月），我看了IHE帧率闪存高得多的3倍 - 相比，HTML5画布4倍。今天，它是说，现在的浏览器逮住了闪光灯，但所有的HTML5画布样品我在当前的Firefox和Chrome浏览器迄今为止发现口吃。

I am working on a HTML5 canvas animation (to be more precisely a photo slideshow). So far all my slideshows are in flash because last time (March 2010) I looked ihe framerate for Flash was much higher 3x - 4x compared to html5 canvas. Today it is said that current browsers catched up with flash but all the html5 canvas samples I have found so far stutter in current Firefox and Chrome browsers.

在样品的setInterval设置为15毫秒这应该给ALT至少60帧。但在我的笔记本电脑动画口吃了很多：
http://demo.webdevhub.net/canvas/simple/

IN the sample setInterval is set to 15ms which should give alt least 60 fps. But at on my laptop the animation stutters a lot: http://demo.webdevhub.net/canvas/simple/

是否有变通方法，至少在最新的浏览器或我必须再等一年？

Are there workarounds for at least the up to date browsers or do I have to wait for another year?

最好的问候，
马克

Best Regards, Mark

推荐答案

这似乎是罚款，FF5在Windows 7似乎也是光滑IE9。

It seems to be fine in FF5 on Windows 7. Also seems smooth on IE9.

我认为问题的一部分可能是您的间隔太小。在速度较慢的设备，它可能会为每秒66帧时，它可以但随后下降到少得多，然后再返回到66fps，给人一种口吃的效果。

I think part of the problem may be that your interval is too small. On slower devices, it may go 66 frames per second when it can but then drop down to far fewer, then go back up to 66fps, giving a stutter effect.

通过给一个非常快的时间，你就相当于告诉它一样快，它可以运行，而且它显然需要喘息。也许不是，虽然，也许有在工作中别的东西。

By giving a very fast interval, you're effectively telling it to run as fast as it can, and it apparently needs to catch its breath. Maybe not though, maybe there's something else at work.

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

Try using an interval of 50ms and see what happens.

和踢，而不是使用setInterval的，看看是否使用requestAnimFrame帮助您的问题都没有。它可具有相同的问题，因为快的时间间隔，虽然

And for kicks, instead of using setInterval, see if using requestAnimFrame helps your problem at all. It may have the same problems as the fast interval though.

// 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);
    })();

这篇关于是否有HTML5画布动画口吃的解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！