Есть ли решение для заикания анимации холста HTML5?

Я работаю над анимацией холста HTML5 (точнее, слайд-шоу фотографий). До сих пор все мои слайд-шоу были во флэш-памяти, потому что в прошлый раз (март 2010 г.) я смотрел, что частота кадров во флэш-памяти была намного выше в 3-4 раза по сравнению с холстом html5. Сегодня говорят, что современные браузеры догнали флеш, но все образцы холста html5, которые я нашел до сих пор, заикаются в текущих браузерах Firefox и Chrome.

В примере setInterval установлен на 15 мс, что должно давать не менее 60 кадров в секунду. Но на моем ноутбуке анимация сильно тормозит: http://demo.webdevhub.net/canvas/simple/

Существуют ли обходные пути, по крайней мере, для современных браузеров, или мне придется ждать еще год?

С уважением, Марк


canvas animation html frame-rate
person moin moin    schedule 28.06.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, что в FF5 в Windows 7 все нормально. В IE9 также все гладко.

Я думаю, что часть проблемы может заключаться в том, что ваш интервал слишком мал. На более медленных устройствах он может работать со скоростью 66 кадров в секунду, когда может, но затем падает до гораздо меньшего значения, а затем возвращается к 66 кадрам в секунду, создавая эффект заикания.

Давая очень быстрый интервал, вы фактически говорите ему бежать так быстро, как он может, и, по-видимому, ему нужно отдышаться. Может быть, хотя, может быть, есть что-то еще на работе.

Попробуйте использовать интервал 50 мс и посмотрите, что произойдет.

И для удовольствия, вместо использования 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);
    })();
person Simon Sarris    schedule 28.06.2011

arrow_upward
0
arrow_downward

В настоящее время я работаю над HTML5-клоном BomberMan, и сначала я пытался сделать несколько лучших реализаций JavaScript gameLoops (google), но в конце концов я закончил с простым setTimeout(...) gameLoop :).

И, как кажется, он работает довольно красиво и плавно. У меня еще много работы, но вы можете увидеть текущую версию для разработчиков (setTimeout настроен на 30 кадров в секунду, но если я поставлю его на 60 кадров в секунду - никаких проблем) здесь:

(и спасибо, Саймон, за ваши постоянные комментарии по оптимизации рисования здесь, в StackOverflow)

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

person sabiland    schedule 29.06.2011