Přejít k navigační liště

Zdroják » JavaScript » Zlepšení výkonu animací v JavaScriptu

Zlepšení výkonu animací v JavaScriptu

Články JavaScript, Různé

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

Komentáře

Subscribe
Upozornit na
guest
2 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
chleba

Luxusni, todle sem potreboval :) Diky

sKopheK

=> není důvod, proč to používat u webových aplikací, pokud si teda neděláme vlastní web, který sleduje moderní trendy.

Je to určitě zajímavý nápad, který se snad v budoucnu dočká „použitelné“ podpory, do té doby však nemá šanci se prosadit – na nových verzích moderních prohlížečůjsou animace rychlé i tak a spíš by to potřeboval IE.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.