Zlepšení výkonu animací v JavaScriptu

Co je to requestAnimati­onFrame?

Pokud vytváříte animaci, používáte časovací smyčku, která vždy po několika milisekundách překreslí scénu. Tvůrci prohlížečů se rozhodli vyjít vstříc právě tomuto případu použití časovače a nabídnout API, protože jde o činnost, kterou lze poměrně dobře optimalizovat. requestAnimati­onFrame je tedy základní stavební kámen animačního API; vlastní animace může být pak buď pomocí DOM, v canvasu nebo třeba ve WebGL.

Proč bych to měl používat?

Browser může optimalizovat různé součásti animací do jednoho cyklu překreslování, což zlepší jejich kvalitu. Kupříkladu může synchronizovat JS animaci s CSS přechody nebo SVG SMIL. Navíc browser může přestat vykonávat animaci (resp animační smyčku) v panelu, který není vidět na obrazovce – to s sebou nese snížení zátěže CPU, GPU i paměti, což pomáhá šetřit energii a prodloužit např. dobu výdrže přenosných zařízení.

Tyjo! Takže se můžu chlubit, že mám na stránce animaci, co šetří baterie?

Jasně, kámo. Tutáč!

Jak to použít?

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


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

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

Poznámka: používám jméno ‚requestAnimFra­me‘, protožespecifi­kaceje stále ve vývoji a já nechci zatím vytvářet nějakýpolyfill.

Jak to vypadá v akci?

API requestAnimati­onFrame

window.requestAnimationFrame(function(time){
    // time ~= +new Date // the unix time
}, /* volitelný element */ elem);

Callback je volán s jedním parametrem, kterým je aktuální čas, pokud jej k něčemu potřebujete.

Můžete si všimnout i druhého nepovinného parametru. Jde o element, který obsahuje celou animaci. Pokud použijete canvas nebo WebGL, bude jím právě dotyčný <canvas>. Pokud připravujete animaci založenou na DOM, můžete nechat parametr prázdný, nebo předat nějaký kontejner (div), což pomůže prohlížeči při optimalizaci.

Je to použitelné?

Teď existují implementace ve Webkitu (vNightly Safari aChrome Dev Channel) a v jádru Mozillu  (v prohlížeči FF4), které se drobně liší. Mozilla má implementačníbug, který omezuje framerate na hodnotu 1000/(16+N) fps, kde N je čas, který zabere vykonání callbacku. Chrome 10 nepředává parametr time (až od verze m11), Firefox zase ignoruje argument element.

Řekněte svoje!

Pokud vyvíjíte animace, budou vývojáři WebKitu a Gecka rádi, když jim řeknete, jak se vám s tímto API pracuje. Podívejte se nanávrh specifikace requestAnimati­onFrame. V současnosti je navrženo podle setTimeout – dával by návrh podle setInterval větší smysl? Pozorujete nějaké problémy při více animacích spuštěných najednou? Funguje vám parametr „element“? A vůbec: řeší tato funkce problémy s animacemi?

Další zdroje

• Draft spec (authored by heycam and jamesr),předchozí specifikace
• Chromium design doc
• Základní příklad
• Složitější příklad
• MDC docs on mozRequestAni­mationFrame
• Implementace v YUI (yui anim loop), three.js, li­mejs — ticket for jQuery's imple­mentation
• Demo by Louis-Rémi Babé (Sledujte vytížení CPU při přepnutí panelů).
• Nokarma's coverage of requestAnimati­onFrame
• Mozilla's Robert O'Callhan early post on rAF