Точная синхронизация с RequestAnimationFrame

Question

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

Я искал эту суть: https://gist.github.com/1114293#file_anim_loop_x.js

Но мне не ясно, как вы можете обеспечитьчто анимация происходит в течение определенного периода времени.Например, я могу захотеть анимировать что-то слева направо в течение 2 секунд.Это выполнимо, используя RequestAnimationFrame, или это побеждает цель?

Answer 1

Так получилось, у меня недавно была похожая проблема, и я предложил подход, который сочетает в себе rAF и performance.now (), который работает очень эффективно.

Теперь я могу делать таймеры точнымиприблизительно 12 знаков после запятой:

    window.performance = window.performance || {};
    window.performance.now = (function() {
        return performance.now       ||
            window.performance.mozNow    ||
            window.performance.msNow     ||
            window.performance.oNow      ||
            window.performance.webkitNow ||
                function() {
                    return new Date().getTime(); 
                };
        })();

http://jsfiddle.net/CGWGreen/9pg9L/

Answer 2

Я бы реализовал анимацию на основе времени.В каждой итерации rAF вы можете измерить промежуток времени относительно предыдущей итерации.Зная это дельта-время и «расстояние» в пикселях, вы можете рассчитать необходимую скорость, чтобы получить 2 секунды.

В этой статье из Mozilla Hacks рассматриваются различные соображения при анимации на постоянной скорости(пиксель / сек).Вот фрагмент, объясняющий основную концепцию:

animLoop(function( deltaT ) {
  elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
  if ( left > 400 ) {
    return false;
  }
});

Answer 3

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