интервал между вызовами функций с requestAnimationFrame варьируется

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

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

var start;
var i=0;
var animateLoop = function() {

    if(i>500) {
        return false;
    }
    i++;
    requestAnimFrame(animateLoop);
    var _start = start;
    start = +new Date();
    console.log("Iteration:"+i, "Milliseconds Diff: "+(start-_start));
   }

animateLoop();

Чтобы уточнить, взгляните на эту скрипку: https://jsfiddle.net/bhenqfbw/

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

есть ли способ сделать это постоянным или так и должно быть?


javascript animation requestanimationframe
person Sohail    schedule 08.04.2015    source источник
comment
Ну... вы не работаете в среде реального времени. Это нормально.   -  person Cameron    schedule 08.04.2015

Ответы (2)


arrow_upward
1
arrow_downward

Что ж, смысл requestAnimationFrame в том, чтобы браузер сам решал, когда снова вызывать эту функцию. Он оптимизирован для этого. Поэтому это лучший вариант. Тем не менее, если вы действительно хотите чего-то агрессивного, которому все равно, закончилась ли функция, вызванная setInterval, это ваш друг (я имею в виду враг, потому что это довольно плохо). Или:

function toCall(){
  //do stuff
  setTimeout(toCall); //Place this at the end of your function. And no second parameter needed. It'll be called whenever the stack is empty.
}
person Edwin Reynoso    schedule 08.04.2015
comment
Точнее это тоже не сделает. Недавно провел некоторое тестирование - 30 кадров изображения с зацикленным тайм-аутом 17 мс (аналогично обычной частоте обновления дисплея) составили всего 700+... - person Shikkediel; 08.04.2015
comment
Ну, как я уже сказал, requestAnimationFrame его лучший выбор. Это также зависит от того, сколько работы или как он выполняет работу в своей animateLoop функции. - person Edwin Reynoso; 08.04.2015
comment
Никаких аргументов, просто хотел поделиться недавними выводами. Журнал это довольно интересно. Несколько продолжительностей 200+, но некоторые также менее 10 мс. Без того, чтобы они, казалось бы, были коррелированы. Так что странно встретить время намного быстрее, чем частота обновления дисплея. - person Shikkediel; 08.04.2015

arrow_upward
2
arrow_downward

requestAnimationFrame не зависит от времени. Вы должны делать анимацию на основе времени, а не кадра.

По сути, если вы хотите изменить положение элемента с постоянным значением и у вас нет фиксированной частоты кадров, вы можете использовать разницу во времени между кадрами для расчета расстояния в каждом кадре.

Вот основная идея: (проверьте консоль) https://jsfiddle.net/bhenqfbw/1/

person Ali Gorkem Cicek    schedule 08.04.2015