Cómo utilizar requestAnimationFrame?

Question

Soy nuevo en la animación, pero recientemente he creado 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 evita que durante la primera trama. 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

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

---

Usted fue engañado por la inserción automática de 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 automáticamente pone un punto y coma detrás de la declaración 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 instrucción de retorno. Entonces window.requestAnimFrame es undefined. Cuando lo llama en animloop, el 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. Hay que ir sobre la depuración de la siguiente manera (estoy asumiendo Chrome):

1. ejecutar el código (que produce resultados inesperados)
2. Abra las herramientas de desarrollo (click derecho -> Inspeccionar elemento) Verá una x roja en la barra de estado en la parte derecha (esto significa que hay un error en la ejecución)
3. Abrir la pestaña de la consola
4. verá

   Uncaught TypeError: Property 'requestAnimFrame' of object [object DOMWindow] is not a function

5. Type en la consola: window.requestAnimFrame y pulse enter, se quiere ver es undefined. Ahora ya sabe que el problema de hecho no está relacionado con requestAnimationFrame y que debe concentrarse en la primera parte de su 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, mira this video para algunas buenas prácticas en la escritura de javascript, También menciona la inserción de punto y coma malvado automático.

Answer 2

/* 
    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 jsfiddle; Ilustra claramente lo que quiero decir;

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

Espero que esto ayude!

Answer 3

"estrangulamiento inteligente por lo que el evento no será despedida más veces que la pantalla se 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; }