Frecuencia de actualización de pantalla:
La frecuencia de actualización de la pantalla es la velocidad de actualización de la imagen en la pantalla, es decir, el número de actualizaciones de imagen por segundo, y su unidad es Hertz (Hz). El valor de una computadora portátil general es de 60Hz. Este valor se ve afectado por la resolución de la pantalla, el tamaño de la pantalla y la tarjeta gráfica.
Hay dos pantallas comunes en el mercado: XRT (pantalla tradicional) y LCD (pantalla de cristal líquido).
CTR es una pantalla que utiliza un tubo de cátodo de electrones. La imagen en la pantalla está compuesta de puntos fluorescentes que emiten luz debido al impacto del haz de electrones. Dado que el haz de electrones golpea el fósforo en el kinescopio, el tiempo de emisión es muy corto, por lo que el haz de electrones El fósforo debe ser golpeado constantemente para que brille continuamente. El número de veces que el haz de electrones golpea el fósforo por segundo es la frecuencia de actualización de la pantalla.
La pantalla LCD es una pantalla de cristal líquido, por lo que no es necesario actualizarla. Debido a que cada píxel en la pantalla LCD emite luz continuamente, la pantalla LCD no tendrá el fenómeno de parpadeo causado por el haz de electrones que golpea el fósforo.
Por lo tanto, incluso si no hace nada al monitor, el monitor actualizará constantemente la imagen en la pantalla a una frecuencia de 60 veces por segundo.
Principio de animación
La esencia de la animación es permitir que las personas vean el efecto visual de la imagen que se está actualizando y cambiarla de manera uniforme y uniforme.
Anteriormente, ya sabíamos que la pantalla ha estado actualizando la imagen, pero no sentimos el cambio, porque la frecuencia de actualización es tan alta que no podemos sentirla.
Por ejemplo: una pantalla con una frecuencia de actualización de 60Hz se actualiza cada 16.7 ms. Antes de actualizar la pantalla, la posición de la imagen se mueve 1px a la izquierda. En este caso, la posición después de cada actualización de la pantalla es 1px diferente del original, por lo que vemos La imagen se está moviendo. Debido al efecto de permanencia visual del ojo humano, la impresión de que la imagen en la posición actual permanece en el cerebro no ha desaparecido, y luego la imagen se mueve a la siguiente posición, por lo que ver la imagen se mueve suavemente, lo que forma una animación visual .
setTimeout
setTimeout es establecer un intervalo de tiempo para cambiar continuamente la posición de la imagen y lograr el efecto de animación. Pero setTimeout aparecerá atascado y fluctúa en una máquina de gama baja. Los motivos son los siguientes:
- El tiempo de ejecución de setTimeout no está determinado. En javascript, la tarea setTimeout se colocará en la cola asincrónica. Solo después de que se ejecute la tarea en el subproceso principal comprobará si la tarea en la cola asincrónica necesita comenzar la ejecución. El tiempo de ejecución real de setTimeout es generalmente menor que el conjunto Despues
- La frecuencia de actualización se ve afectada por la resolución de la pantalla y el tamaño de la pantalla, por lo que el mismo intervalo de tiempo para diferentes configuraciones de pantalla no es necesariamente el mismo que el tiempo de actualización de la pantalla, y puede producirse la pérdida de cuadros.
La ejecución de setTimeout solo cambia los atributos de imagen en la memoria. Este cambio no debe actualizarse en la pantalla hasta la próxima vez que se actualice la pantalla. Si los dos pasos son inconsistentes, se producirá una pérdida de trama. Suponga que la pantalla se actualiza cada 16.7 ms, y setTimeout configura la imagen para que se mueva 1px a la izquierda cada 10 ms. El proceso de dibujo es el siguiente:
- 0 ms: actualización de pantalla, espera, setTimeout no se ejecuta, espera
- 10 ms: setTimeout comienza a ejecutarse y establece la propiedad de la imagen left = 1px;
- 16.7 ms: la pantalla comienza a actualizarse y la imagen en la pantalla se mueve 1 px a la izquierda;
- El vigésimo ms: setTimeout comienza a ejecutarse y establece la propiedad de la imagen left = 2px
- 30 ms: setTimeout comienza a ejecutarse y establece el atributo de imagen left = 3px;
- 33,4 ms: la pantalla comienza a actualizarse y la imagen en la pantalla se mueve 3 píxeles hacia la izquierda;
- ......
En este caso, la pantalla no actualiza el marco de la izquierda = 2px. La imagen salta directamente de la posición 1px a la posición 3px, este es el fenómeno de caída de cuadros, esta imaginación hará que la animación se congele.
requestAnimationFrame
En comparación con setTimeout, la mayor ventaja de requestAnimationFrame es que el sistema determina el tiempo de ejecución de la función de devolución de llamada. El ritmo de requestAnimationFrame sigue la frecuencia de actualización del sistema. Puede garantizar que la función de devolución de llamada solo se ejecute una vez durante cada intervalo de actualización de la pantalla, para que no pierda fotogramas y no se congele la animación.
Además, hay dos ventajas principales:
- Ahorro de energía de la CPU: cuando se usa setTimeout para lograr la animación, cuando la página está oculta o minimizada, setTimeout todavía realiza tareas de animación en segundo plano, pero actualizar la animación no tiene sentido, porque la página no es visible, lo que es un desperdicio total de recursos de la CPU. RequestAnimationFrame es completamente diferente. Cuando la página se procesa como inactiva, la tarea de actualización de pantalla de la página también será suspendida por el sistema, por lo que requestAnimationFrame que sigue el ritmo del sistema también dejará de representarse. Cuando la página está activada, la animación comenzará desde la parte superior. Continúe ejecutando en el siguiente lugar y ahorre sobrecarga de la CPU.
- Limitación de la función : en eventos de alta frecuencia (cambiar el tamaño, desplazarse), para evitar que un intervalo de actualización ejecute la función varias veces, use requestAnimationFrame para garantizar que cada intervalo de actualización, la función se ejecute solo una vez, lo que garantiza fluidez y mejor Ahorra el costo de ejecución de la función. Las ejecuciones múltiples no tienen sentido, porque la pantalla se actualiza cada 16.7 segundos y los dibujos múltiples no se reflejarán en la pantalla.
requestAnimationFrame definition:
window.requestAnimationFrame (): le dice al navegador que desea realizar una animación, y requiere que el navegador llame a la función de devolución de llamada especificada para actualizar la animación antes de la próxima actualización. Este método necesita pasar una función de devolución de llamada como parámetro, y la función de devolución de llamada se ejecuta antes de la próxima actualización del navegador.
Nota: Si desea continuar actualizando el siguiente cuadro de animación antes de que el navegador vuelva a dibujar, la función de devolución de llamada debe llamar a window.requestAnimationFrame () nuevamente;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#box{
margin: 0 auto;
width: 50px;
height: 50px;
background: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
function animationWidth() {
var div = document.getElementById('box');
div.style.width = parseInt(div.offsetWidth) + 1 + 'px';
if(parseInt(div.style.width) < 200) {
requestAnimationFrame(animationWidth)
}
}
requestAnimationFrame(animationWidth);
</script>
</body>
</html>