IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

Introducció

What is requestAnimationFrame?

In your animation work, you’ve used a timer loop to make changes every few milliseconds. Good for us: browser vendors have decided, “hey, why don’t we just give you an API for that, because we can probably optimize some things for you.” So it’s basic API for use with animation, whether that be DOM-based styling changes, canvas or WebGL.

Per que utilitzar-la?

Principalment per que el Navegador pot fer optimitzacions de la execució del loop per aconseguir un millor rendiment de l'animació. Un exemple també és que si l'animació s'executa en un tab el navegador pot aturar l'animació si la tab no està activa (no passa el mateix amb setInterval).

Suport dels navegadors

http://caniuse.com/#feat=requestanimationframe

Sistema antic

function draw() {
    // Drawing code goes here
}
setInterval(draw, 100);

Snippet

// usage:
// instead of setInterval(render, 16) ....

(function animloop(){
  requestAnimFrame(animloop);
  render();
})();

Fixeu-vos que utilitza Javascript Module Pattern

On render és la funció que executem a cada loop (a l'exemple no existeix la heu de posar vosaltres)!


Per a navegador que no suporten, és pot utilitzar un shim (eines com Phaser ho fan automaticament):

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

Establir els FPS

FPS aka Frames per Second

var fps = 15;
function draw() {
    setTimeout(function() {
        requestAnimationFrame(draw);
        // Drawing code goes here
    }, 1000 / fps);
}

By wrapping the requestAnimationFrame in a setTimeout you get to have your cake and eat it. Your code gets the efficiency savings and you can specify a frame rate, up to 60fps.

A more sophisticated technique would be to check the number of milliseconds past since the last draw call and update the animation’s position based on the time difference. For example:

var time;
function draw() {
    requestAnimationFrame(draw);
    var now = new Date().getTime(),
        dt = now - (time || now);
 
    time = now;
 
    // Drawing code goes here... for example updating an 'x' position:
    this.x += 10 * dt; // Increase 'x' by 10 units per millisecond
}

Demos

Exemples

Rellotge amb setInterval

Combinació de multimedia HTML 5 (video tags) amb Canvas

Al exemple de Chroma (Vegeu HTML5 multimedia):

https://github.com/acacha/html5greenscreen/blob/gh-pages/index.html
http://acacha.github.io/html5greenscreen/index.html

El bucle principal de la pàgina és:

function draw() {
            if (window.requestAnimationFrame) window.requestAnimationFrame(draw);
            // IE implementation
            else if (window.msRequestAnimationFrame) window.msRequestAnimationFrame(draw);
            // Firefox implementation
            else if (window.mozRequestAnimationFrame) window.mozRequestAnimationFrame(draw);
            // Chrome implementation
            else if (window.webkitRequestAnimationFrame) window.webkitRequestAnimationFrame(draw);
            // Other browsers that do not yet support feature
            else setTimeout(draw, 16.7);
            DrawVideoOnCanvas();
        }

Vegeu també

Enllaços externs