SetTimeout или setInterval или requestAnimationFrame

Для игр HTML5 с анимацией холста для мобильных устройств.

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

requestAnimationFrame ускоряет анимацию игры в соответствии со скоростью устройства.
setInterval шокировал меня, что есть задержка с устройства на другое.
setTimeout также замедляет рисование на холсте.

Кто имел предыдущий опыт работы с мобильными играми HTML5, может помочь мне бросить лучший способ из трех из них (или других методов, если он доступен) для разработки анимации на холсте, быть стабильным на разных мобильных устройствах?

Ответ 1

Всегда используйте requestAnimationFrame, когда это возможно, так как это означает. Лучше использовать прокладку для поддержки, когда это не так, поэтому вам не нужно иметь дело с конкретными деталями.

Для того, чтобы анимационная или игровая логика выполнялась с одинаковой скоростью, несмотря на используемый фактический метод, вы должны использовать анимацию, основанную на времени, и вычисления на основе времени для физики или такие.

Ответ 2

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ draw1){
            window.setTimeout(draw1, 1000 / 60);
        }
    );
}();
   window.requestAnimFrame(draw);
})();

используйте эту функцию для всех случаев