Introducido
Los temporizadores siempre han sido la tecnología central de la animación de JavaScript. La clave para escribir un bucle de animación es saber cuánto tiempo es apropiado el retraso. Por un lado, el intervalo de bucle debe ser lo suficientemente corto como para que diferentes efectos de animación puedan parecer suaves y suaves; Por otro lado, el intervalo de bucle debe ser lo suficientemente largo como para que el navegador pueda generar cambios.
La frecuencia de actualización de la mayoría de los monitores de computadora es de 60Hz, que es aproximadamente equivalente a volver a pintar 60 veces por segundo. La mayoría de los navegadores limitarán la operación de redRAW para que no exceda la frecuencia de redibujado del monitor, porque incluso si excede esa frecuencia, la experiencia del usuario no mejorará. Por lo tanto, el intervalo de bucle óptimo para la animación más suave es 1000 ms/60, que es aproximadamente igual a 16.6 ms
Y el problema con SetTimeout y SetInterval es que ni son precisos. Su mecanismo de ejecución intrínseco determina que los parámetros de intervalo de tiempo en realidad solo especifican cuánto tiempo agregar el código de animación a la cola de subproceso de interfaz de usuario del navegador para esperar la ejecución. Si se han agregado otras tareas a la cola, el código de animación debe esperar hasta que se completen las tareas anteriores antes de ejecutarlas.
SoldingAnimationFrame utiliza intervalos de tiempo del sistema para mantener la mejor eficiencia de dibujo, y no se sobregustará debido al tiempo de intervalo corto, lo que aumentará la sobrecarga; El uso de animaciones tampoco será atascado y no suave porque el tiempo de intervalo es demasiado largo, por lo que varios efectos de animación web pueden tener un mecanismo de actualización unificado, ahorrando así los recursos del sistema, mejorando el rendimiento del sistema y mejorando los efectos visuales
Características
【1】 El requestanimationFrame concentrará todas las operaciones DOM en cada cuadro, completado en una sola repinte o reflujo, y el intervalo de tiempo de repintado o reflujo es seguido de cerca por la frecuencia de actualización del navegador
【2】 En elementos ocultos o invisibles, el requestanimationFrame no será repintado ni reflexionado, lo que, por supuesto, significa menos CPU, GPU y uso de memoria
【3】 SoldingAnimationFrame es una API proporcionada por el navegador específicamente para la animación. Cuando se ejecuta, el navegador optimizará automáticamente la llamada del método. Si la página no se activa, la animación se detendrá automáticamente, guardando efectivamente la sobrecarga de la CPU
usar
El uso de requestanimationFrame es muy similar al setTimeOut, excepto que no es necesario establecer el intervalo de tiempo. El requestanimationFrame utiliza una función de devolución de llamada como parámetro, que se llama antes del repinte del navegador. Devuelve un entero que representa el número del temporizador, que se puede pasar a CancelAnimationFrame para cancelar la ejecución de esta función
requestiD = requestAnimationFrame (devolución de llamada); // Salidas de consola 1 y 0VAR Timer = requestAnimationFrame (function () {console.log (0);}); console.log (temporizador); // 1 El método de CancelAnimationFrame se utiliza para cancelar el temporizador // salidas de consola nada var Timer = requestAnimationFrame (function () {console.log (0);}); cancelAnimationFrame (temporizador);También puede usar el valor de retorno para cancelarlo directamente
var timer = requestAnimationFrame (function () {console.log (0);}); cancelAnimationFrame (1);compatible
IE9-Browser no admite este método, puede usar SetTimeout para la compatibilidad
if (! Window.RequestanimationFrame) {var LastTime = 0; Window.RequestanimationFrame = function (Callback) {var Currtime = new Date (). getTime (); var timetOcall = math.max (0,16.7- (Currtime - LastTime)); var id = window.setTimeOut (function () {Callback (Currtime + + + + + + + + + + + + + + + TIMETOCALL);}, TIMETOCALL); LastTime = Currtime + TIMETOCALL; return id;}} if (! Window.CancelanimationFrame) {Window.CancelanimationFrame = function (id) {ClearTimeOut (id);};}solicitud
Ahora use los tres métodos de SetInterval, SetTimeout y SoldAnimationFrame para crear un efecto de sistema simple.
【1】 setInterval
<div id = "myDiv" style = "de fondo: lightblue; ancho: 0; altura: 20px; línea-height: 20px;"> 0%</div> <botón id = "btn"> run </button> <script> var temporizador; btn.onClick = function () {clearVal (Timer); mydiv.style.width = '0'; setInterval (function () {if (parseInt (mydiv.style.width) <500) {myDiv.style.width = parseInt (myDiv.style.width) + 5 + 'px'; myDiv.innerhtml = parseInt (mydiv.style.widh) }, 16);} </script>【2】 setTimeOut
<div id = "myDiv" style = "de fondo de fondo: lightblue; width: 0; altura: 20px; línea-height: 20px;"> 0%</div> <botón id = "btn"> run </boton> <script> var timer; btn.onclick = function () {cleartimerout (temporizador); mydiv.style.width = 0 '; fn () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseInt (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + '%'; timer = = = setTimeout (fn, 16);} else {ClearTimeOut (temporizador);}}, 16);} </script>【3】 requestAnimationFrame
<div id = "myDiv" style = "de fondo: lightBlue; ancho: 0; altura: 20px; línea-height: 20px;"> 0%</div> <button id = "btn"> ejecutar </boton> <script> var timer; btn.onclick = function () {mydiv.stiv.width = '0'; cancelanimationFrame (temporal (temporal (temporal; requestAnimationFrame (function fn () {if (parseInt (mydiv.style.width) <500) {myDiv.style.width = parseInt (myDiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (myDiv.style.width)/5 + '%; requestAnimationFrame (fn);} else {cancelAnimationFrame (temporizador);}});} </script>De acuerdo, el código está aquí para introducir la aplicación del tercer temporizador en la serie Bom (reloj, cuenta regresiva, cronómetro y despertador)
Lo anterior es el segundo temporizador requestAnimationFrame de la serie BOM presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!