Sincronización precisa con RequestAnimationFrame

Question

No he encontrado mucha documentación sobre este tema hasta el momento. La sensación general que tengo es que al implementar animaciones para el navegador es mejor utilizar RequestAnimationFrame que los temporizadores de JavaScript estándar de pantano. Según tengo entendido, los temporizadores no son confiables y su resolución puede variar según el navegador.

He estado buscando en este GIST: https://gist.github.com/1114293#file_anim_loop_x.js

Pero no me queda claro cómo se puede asegurar que una animación se trasluce a través de una cantidad fija de tiempo. Por ejemplo, podría querer animar algo de izquierda a derecha en 2 segundos. ¿Es esto factible usar RequestAnimationFrame o derrota el propósito?

Answer 1

Sucede que tuve un problema similar no hace mucho tiempo y se me ocurrió un enfoque que combina rAF con performance.now() que funciona muy bien.

Im ahora capaz de hacer temporizadores precisión de aproximadamente 12 cifras decimales:

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

RequestAnimationFrame es mejor en lo siguiente: puede dibujar cuando sea más efectivo. Es decir. RequestAnimationFrame podría dar mejores fps que solo temporizadores, pero el tiempo exacto directo puede ser incluso menos confiable. Debe obtener la hora actual, compararla con el valor del fotograma anterior y calcular las animaciones de acuerdo con la cantidad de tiempo transcurrida desde el último fotograma.

Answer 3

que implementaría una animación basada en el tiempo. En cada iteración de rAF puede medir el lapso de tiempo con respecto a la iteración anterior. Conociendo este tiempo delta y la "distancia" en píxeles, puede calcular la velocidad necesaria para obtener los 2 segundos.

En este artículo de Mozilla Hacks se tratan varias consideraciones al animar a velocidad constante (píxel/seg). Aquí hay un fragmento que explica el concepto básico:

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