En los programas de animación del navegador, normalmente utilizamos un temporizador para realizar un ciclo del objeto de destino cada pocos milisegundos para que se mueva. Ahora la buena noticia es que los desarrolladores de navegadores han decidido: oye, ¿por qué no proporcionamos dicha API en el navegador para que podamos optimizar sus animaciones para los usuarios? Por lo tanto, esta función requestAnimationFrame() es una API para efectos de animación. Puede usarla para cambios de estilo en el DOM o la animación del lienzo o WebGL.
El navegador puede optimizar las acciones de animación paralelas, reorganizar la secuencia de acciones de manera más razonable y completar acciones que se pueden combinar en un ciclo de renderizado, presentando así un efecto de animación más suave. Por ejemplo, a través de requestAnimationFrame(), la animación JS puede ocurrir simultáneamente con la animación/transformación CSS o la animación SVG SMIL. Además, si ejecuta una animación en una pestaña del navegador, el navegador la pausará cuando la pestaña no esté visible, lo que reducirá la presión sobre la CPU y la memoria y ahorrará energía de la batería.
Uso de requestAnimationFrame // capa de cuña con setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000/60); };} )();// uso:// en lugar de setInterval(render, 16) ....(función animloop(){ requestAnimFrame(animloop); render();})();// coloque el rAF *antes* de render() para asegurar lo más cercano a // 60 fps con el respaldo setTimeout.Una encapsulación más confiable de requestAnimationFrame
El técnico del navegador Opera, Erik Möller, encapsuló esta función para hacerla mejor compatible con varios navegadores. Puedes leer este artículo, pero básicamente su código decide si usar un retraso de 4 ms o 16 ms para igualar mejor los 60 fps. A continuación se muestra este código, puede usarlo, pero tenga en cuenta que este código utiliza funciones estándar y le he agregado prefijos que son compatibles con varios motores de navegador.
(función() { var lastTime = 0; var proveedores = ['webkit', 'moz']; for(var x = 0; x < proveedores.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = ventana[proveedores[x]+'RequestAnimationFrame']; ventana.cancelAnimationFrame = ventana[proveedores[x]+'CancelAnimationFrame'] || ventana[proveedores[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = función(devolución de llamada, elemento) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; devolver id };Déjame ver el efecto de usar requestAnimationFrame
API requestAnimationFrame window.requestAnimationFrame(function(/* hora */ hora){ // hora ~= +nueva fecha // la hora de Unix});Los parámetros de la función de devolución de llamada se pueden pasar a tiempo.
Soporte de varios navegadores para requestAnimationFrame
Google Chrome, Firefox e IE10+ implementan esta función Incluso si su navegador es muy antiguo, la encapsulación requestAnimationFrame anterior puede hacer que este método esté libre de errores en IE8/9.