requestAnimationFrame animation

Hay muchas maneras de lograr efectos de animación. En Javascript, se puede lograr a través del temporizador setTimeout, en css3, se puede usar la transición y la animación, y en html5, también se puede lograr el lienzo. Además, html5 también proporciona una API dedicada a solicitar animación, que es requestAnimationFrame, que, como su nombre lo indica, solicita fotogramas de animación.

Ventaja:

Ahorro de energía de la CPU: al usar la animación implementada por setTimeout, cuando la página está oculta o minimizada, setTimeout aún ejecuta la tarea de animación en segundo plano. Dado que la página es invisible o no está disponible en este momento, no tiene sentido actualizar la animación, lo que es una pérdida de recursos de la CPU. . El requestAnimationFrame es completamente diferente. Cuando el procesamiento de la página no está activado, el sistema también suspenderá la tarea de actualización de pantalla de la página, por lo que el requestAnimationFrame que sigue al sistema también dejará de procesarse. Cuando la página esté activada, la animación comience desde la última vez Continúe ejecutándose donde permanece, ahorrando efectivamente la sobrecarga de la CPU.

Limitación de funciones: en eventos de alta frecuencia (cambio de tamaño, desplazamiento, etc.), para evitar ejecuciones múltiples de funciones dentro de un intervalo de actualización, use requestAnimationFrame para asegurarse de que la función solo se ejecute una vez dentro de cada intervalo de actualización, lo que puede garantizar un rendimiento fluido. , y puede ahorrar mejor la sobrecarga de ejecución de la función.

Instrucciones:

    var progress = 0;
    //回调函数
    function render() {
     progress += 1; //修改图像的位置
     if (progress < 100) {
     //在动画没有结束前，递归渲染
     window.requestAnimationFrame(render);
     }
    }
    //第一帧渲染
    window.requestAnimationFrame(render);

Escritura compatible: fuente: https://segmentfault.com/a/1190000013424101?utm_source=index-hottest

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (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);
        };
}());