ejemplos - animaciones javascript para tu web

¿Cómo puedo hacer que una animación de JavaScript se reproduzca a la misma velocidad en todos los navegadores de todos los sistemas?

Question

Tengo una función que calcula el siguiente fotograma en una animación de varios objetos que se mueven en los ejes X e Y [lo llamo frameRender() ] y una función que aplica ese fotograma resultante a los objetos [yo llamo a ese frameDisplay() ]. Los objetos no solo se mueven del punto A al B, sino que se mueven constantemente, recibiendo siempre nuevos coords de objetivo. Uso setInterval() con un intervalo de 1000/frameRate , pero parece que no funciona, ya que los navegadores no tienen tiempos precisos.

La pregunta es: ¿cómo puedo asegurarme de que la animación tenga una velocidad de fotogramas constante, y se ejecutará a la misma velocidad en todos los navegadores, en todos los sistemas? He intentado todo y parece que no puedo obtener un resultado preciso incluso en diferentes navegadores (lo pruebo en Firefox y Chrome, Chrome por lo general muestra mucho más rápido).

El resultado debería ser: cuando se reproduce lento, el intervalo de animación debe disminuir al principio, y luego tratar de saltear algunos fotogramas [omitiendo frameDisplay() ] si el DOM muestra lento, hasta que se reproduce correctamente. Cuando se reproduce rápido, el intervalo de animación debe aumentar, haciendo que la animación se reproduzca a la velocidad correcta.

Pero, ¿cómo se mantiene la coherencia en todo esto, ya que no siempre se puede estar seguro de cuándo los navegadores se vuelven lentos o cuándo funcionarán rápidamente? Por ejemplo, si hay una gran cantidad de movimientos, y disminuimos el intervalo para mantener constante la velocidad de cuadro, y de repente, la mayoría de los objetos en movimiento se detienen o no se mueven mucho, ¡de repente funcionará muy rápido!

¿Algunas ideas?

Answer 1

La pregunta es: ¿cómo puedo asegurarme de que la animación tenga una velocidad de fotogramas constante, y se ejecutará a la misma velocidad en todos los navegadores, en todos los sistemas?

No puedes hacer nada con respecto a la velocidad de fotogramas. Lo único que puede controlar es cómo se actualiza la aplicación en función del tiempo transcurrido. Esto es cierto también fuera de los navegadores, y un tema común en el desarrollo de juegos.

Lo mejor que se puede hacer es rastrear el delta (leer: diferencia de tiempo) entre las actualizaciones.

(function () {
    function getTime() {
        return new Date().getTime();
    }
    var last = getTime();

    function update(delta) {
        // Update your application state on delta (ms of time passed)
    }

    (function loop() {
        update(last = getTime()-last);
        render();
        setTimeout(loop, 20); // 20 = attempt 50fps
    }());
}());

Observe el uso de setTimeout aquí. Esto es para evitar que el loop () se llame fuera de sincronización. setInterval continuará activándolo incluso si una llamada anterior no finalizó.

Answer 2

Puede sincronizar su animación con la hora del sistema.

Ahorre tiempo de sistema actual en variable. En todos los fotogramas, entonces desea volver a dibujar la verificación de imagen si la hora actual - su variable es igual a algún tiempo delta. luego redibuja tu animación. de lo contrario, espera esta diferencia

Answer 3

La respuesta está aquí , un gran artículo de Glenn Fiedler, necesita un pequeño ajuste para convertirlo en Javascript, pero los principios son los mismos. Básicamente, necesita usar un acumulador que suma tiempos delta y ejecuta pasos basados ​​en eso. No es necesario cambiar ninguna matemática física ni nada, la solución es plug and play. También tiene un interesante interpolador que elimina el tartamudeo y también le permite hacer movimientos súper lentos y lentos (para repeticiones, etc.). Es fantástico, funciona para la física y debería funcionar en cualquier movimiento basado en pasos. Básicamente, todo lo que necesitas para un movimiento preciso del juego de cronometraje está ahí.