¿Los navegadores reproducen animaciones incluso después de que el componente se sale del área de visualización cuando la página se desplaza hacia abajo?

¿Qué quieres decir con animaciones de juego? Los navegadores no reproducen tanto animaciones como la información de procesamiento recibida del servidor o calculada en el lado del cliente.

La animación es básicamente el elemento de visualización “de un cambio de estado”. Si tiene una aplicación ejecutándose en el navegador, ya sea una aplicación de JavaScript o un reproductor de películas, la computadora todavía está procesando el cambio de estado. La animación continuará cambiando de estado (a menos que estar fuera del puerto de visualización provoque una pausa como lo hacen ahora los videos de YouTube).

Las aplicaciones menos complicadas simplemente se ejecutarán hasta que lleguen a un punto de interrupción o el script finalice independientemente de si están en el puerto de vista o no.

Entonces la respuesta es sí y no. Depende de lo que hizo el codificador al hacer su aplicación y si está pausando el script cuando focus () cambia a otro elemento dom o la animación ya no está en el puerto de vista visible. El estado puede continuar cambiando mientras está fuera de la vista o esperar a que regrese. El valor predeterminado es continuar.

El navegador definitivamente no “reproduce” la animación que está fuera del puerto de vista de ninguna manera. El navegador simplemente rastrea el estado de la aplicación pero solo “reproduce” / muestra lo que está en el puerto de visualización. No hay animación jugando invisible fuera de la pantalla de ninguna manera. Los píxeles fuera de la pantalla no existen, pero el navegador puede ejecutar una aplicación que tiene muchas más áreas que el puerto de visualización.

Piensa en google. Google Maps no carga todo el mundo en su navegador cada vez que lo visita. Realiza un seguimiento de su nivel de zoom y el tamaño y el centro del mapa que está viendo y dibuja solo la cantidad que necesita para llenar el cuadro. A nuestro cerebro le parece (porque pensamos en 3d) que hay un mapa debajo de una ventana y podemos moverlo para ver diferentes áreas, pero en realidad ese mapa simplemente se redibuja una y otra vez, probablemente alrededor de 30 veces por segundo cuando te estás moviendo eso. Los únicos datos en el navegador son el marco actual, cada movimiento obtiene nuevos datos basados ​​en la nueva posición y / o zoom. Una película típica es de 24 fotogramas por segundo, por lo que para el ojo humano parece que el mapa está ahí solo esperando que lo arrastremos. JavaScript asíncrono permite que el navegador obtenga constantemente más información del servidor según sea necesario, en este caso onDrag () y debido a que las computadoras e Internet son relativamente rápidas en 2017, parece básicamente transparente porque a menos que Internet se retrase, es más rápido que una película.

Sí, lo hacen, a menos que se hayan desactivado explícitamente cuando el elemento ya no sea visible.

Puede experimentar usando JSFiddle o CodePen animando un elemento fuera de la página y rastreando su cuadro delimitador usando un intervalo:

setInterval (function () {
console.log (myAnimatedElement.getBoundingClientRect ());
}, 50);

Cada 50 milisegundos registrará la información de posición de su elemento, independientemente de dónde se desplace en la página.

Las animaciones deben deshabilitarse explícitamente, ya sea que su ventana gráfica muestre el elemento que se está animando, o si el elemento ya no es visible dentro de su ventana gráfica (por ejemplo, animada a la izquierda o derecha de su pantalla).