Есть ли решение для HTML5 холст анимации холста? - PullRequest
Новая
       43

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

1 голос
/ 29 июня 2011

Я работаю над анимацией холста HTML5 (точнее, слайд-шоу с фотографиями).До сих пор все мои слайд-шоу были во флэш-памяти, потому что в прошлый раз (март 2010 года) я смотрел, что частота кадров для Flash была намного выше 3x - 4x по сравнению с html5 canvas.Сегодня говорят, что текущие браузеры догнали flash, но все образцы холста html5, которые я до сих пор находил, заикались в текущих браузерах Firefox и Chrome.кадров в секунду.Но на моем ноутбуке анимация сильно заикается: http://demo.webdevhub.net/canvas/simple/

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

С наилучшими пожеланиями,Mark

Ответы [ 2 ]

1 голос
/ 29 июня 2011

Кажется, что это нормально в 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);
    })();
0 голосов
/ 29 июня 2011

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

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

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

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

...