Zlepšení výkonu animací v JavaScriptu

JavaScript

Pokud jste někdy experimentovali s psaním animací v Javascriptu, možná jste si všimli určitých nevýhod, které s sebou nese použití funkcí setTimeout a podobných. Paul Irish ukazuje, jak lze výhodně použít speciální funkci pro časování animací, která šetří výkon CPU, snižuje odběr energie a pro mobilní zařízení může být zásadní.

Článek je překladem článku „requestAnima­tionFrame for smart animating“, jehož autorem je Paul Irish. Originální článek je k dispozici pod licencí CC-0.

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

Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 2

Přehled komentářů

chleba luxus
sKopheK Není podpora
Zdroj: http://www.zdrojak.cz/?p=3451