Является ли желание контролировать FPS моей анимации хорошей причиной для продолжения использования setTimeout вместо requestAnimationFrame? - PullRequest
Новая
       51

Является ли желание контролировать FPS моей анимации хорошей причиной для продолжения использования setTimeout вместо requestAnimationFrame?

7 голосов
/ 19 ноября 2011

Мне интересно, стоит ли переключать мою игру на requestAnimationFrame. Если даже есть причина для этого, поскольку я прочитал, что setTimeout () теперь также приостанавливается, когда вы переключаете вкладки в основных браузерах.

В любом случае, скажите, что я хочу контролировать FPS моей анимации.

В настоящее время я могу сделать это так: 

k.state.loopinterval = 
window.setInterval(renderLoop(), 1000 / k.settings.engine.fps );

Где k.settings.engine.fps - требуемый fps.

Если я сделаю это requestAnimationFrame способом, я потеряю эту возможность, и он просто даст мне все, что может дать: 

window.requestAnimFrame(k.operations.startLoop);
renderLoop();

Я видел, как некоторые люди предлагают поместить requestAnimFrame в другой цикл: 

setInterval( function () {
    requestAnimationFrame( draw );
}, 1000 / 60 );

Итак ... С чем мне идти? Оставить как есть?

Каковы точные преимущества requestAnimationFrame, теперь, когда setTimeout также приостанавливается при переключении вкладок?

1 Ответ

5 голосов
/ 19 ноября 2011

requestAnimationFrame - это правильный способ создания анимации.

Почему?

Поскольку браузер может оптимизировать рендер для более плавной анимации.Отвечая на вопрос, другой способ таков: 

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

И в ссылке ниже есть другой способ.

Когда вы вызываете requestAnimation, вы заставляете браузер понять, когда наступает момент перерисовкиHTML.Если вы делаете анимацию / переходы в CSS и перемещаете вещи или меняете фон (как спрайты), использование requestAnimation сделает рендеринг работающим, когда вы вызываете requestAnimation.Без него браузер будет рендерить все, за какое время, что может сделать больше перерисовок, чем необходимо.

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

Я нашел эту ссылку , можете добавить еще несколько идей

...