javascript - w3schools - requestanimationframe vs setinterval

¿Cómo usar requestAnimationFrame?

Question

Soy nuevo en la animación, pero recientemente creé una animación usando setTimeout . El FPS era demasiado bajo, así que encontré una solución para usar requestAnimationFrame , que se describe en este link .

Hasta ahora, mi código es:

//shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
        return  
            window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function(/* function */ callback){
                window.setTimeout(callback, 1000 / 60);
            };
    })();
    (function animloop(){
        //Get metrics
        var leftCurveEndX = finalLeft - initialLeft;
        var leftCurveEndY = finalTop + finalHeight - initialTop;
        var rightCurveEndX = finalLeft + finalWidth - initialLeft - initialWidth;
        var rightCurveEndY = leftCurveEndY;

        chopElement(0, 0, 0, 0, leftCurveEndX, leftCurveEndY, rightCurveEndX, rightCurveEndY);//Creates a new frame 
        requestAnimFrame(animloop);
    })();

Esto se detiene durante el primer fotograma. Tengo una función de devolución de llamada requestAnimFrame(animloop); en la función chopElement .

Además, ¿hay una guía más completa para usar esta API?

Answer 1

"Regulación inteligente para que el evento no se active más veces de lo que la pantalla puede volver a pintar el cambio:

var requestFrame = window.requestAnimationFrame ||
                   window.webkitRequestAnimationFrame ||
                   // polyfill - throttle fall-back for unsupported browsers
                   (function() {
                       var throttle = false,
                           FPS = 1000 / 60; // 60fps (in ms)
       
                       return function(CB) {
                         if( throttle ) return;
                         throttle = true;
                         setTimeout(function(){ throttle = false }, FPS);
                         CB(); // do your thing
                       }
                    })();

/////////////////////////////
// use case:

function doSomething() {
  console.log(''fired'');
}

window.onscroll = function() {
  requestFrame(doSomething);
};

html, body{ height:300%; }
body::before{ content:''scroll here''; position:fixed; font:2em Arial; }

Answer 2

¡Advertencia! Esta pregunta no es sobre la mejor manera de requestAnimFrame . Si está buscando eso, continúe con cualquier otra respuesta en esta página.

Te engañaron con la inserción automática de un punto y coma. Prueba esto:

window.requestAnimFrame = function(){
    return (
        window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback){
            window.setTimeout(callback, 1000 / 60);
        }
    );
}();

JavaScript coloca automáticamente un punto y coma detrás de su declaración de return . Hace esto porque es seguido por una nueva línea y la siguiente línea es una expresión válida. De hecho, se traduce a:

return;
window.requestAnimationFrame       || 
window.webkitRequestAnimationFrame || 
window.mozRequestAnimationFrame    || 
window.oRequestAnimationFrame      || 
window.msRequestAnimationFrame     || 
function(/* function */ callback){
    window.setTimeout(callback, 1000 / 60);
};

Este código devuelve undefined y nunca ejecuta el código detrás de la declaración de devolución. Entonces window.requestAnimFrame undefined está undefined . Cuando lo llamas en animloop , javascript produce un error y detiene la ejecución. Puede resolver el problema al encerrar la expresión entre paréntesis.

Puedo recomendar las herramientas de desarrollador de Chrome o Firebug para inspeccionar la ejecución de JavaScript. Con estas herramientas, habrías visto el error. Debes seguir depurándolo de la siguiente manera (supongo que Chrome):

1. Ejecute el código (produce resultados inesperados)
2. Abra las herramientas de desarrollador (clic derecho -> Inspeccionar Elemento) Verá una x roja en la barra de estado a la derecha (esto significa que hay un error en la ejecución)
3. Abra la pestaña de la consola
4. Ya verás

   Unkeught TypeError: La propiedad ''requestAnimFrame'' del objeto [object DOMWindow] no es una función

5. Escriba en la consola: window.requestAnimFrame y presione enter, verá que undefined está undefined . Ya sabes que el problema de hecho no está relacionado con requestAnimationFrame y que debes concentrarte en la primera parte de tu código.
6. Ahora se trata de reducir el código hasta el punto en que devuelve algo. Esta es la parte difícil y si aún no lo encuentras en este punto, es posible que desees recurrir a Internet para obtener más ayuda.

Además, mire este video para ver algunas buenas prácticas al escribir javascript. También menciona la inserción incorrecta de punto y coma.

Answer 3

 /*
  Provides requestAnimationFrame in a cross browser way.
  http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */

if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = (function() {

        return window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame || // comment out if FF4 is slow (it caps framerate at ~30fps: https://bugzilla.mozilla.org/show_bug.cgi?id=630127)
        window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {

                window.setTimeout(callback, 1000 / 60);

        };

    })();

}

animate();

function animate() {
    requestAnimationFrame(animate);
    draw();
}

function draw() {
    // Put your code here
}

Eche un vistazo al siguiente ejemplo de jsfiddle; Ilustra claramente lo que quiero decir;

http://jsfiddle.net/XQpzU/4358/light/

¡Espero que esto ayude!