V minulém článku o animacích na webu jsme si představili knihovnu pro animace od Opery. Dnes navážeme představením další animační knihovny.

Facebook je sociální síť patřící stejnojmenné společnosti. Ta vývojářům nabízí k dispozici nástroje pro tvorbu vlastních aplikací běžících v síti Facebook, ale několik menších projektů bylo zveřejněno jako open source. Jedním z nich je Facebook Animation Library, která byla zveřejněna v lednu tohoto roku pod BSD licencí.

Ačkoliv Facebook Animation Library byla původně určena pro tvorbu aplikací pro Facebook, je na této platformě nezávislá a můžete ji použít ve vašich projektech. Funguje v běžných prohlížečích včetně Internet Exploreru. S jednou podmínkou. Vaše stránky musí prohlížeč zobrazovat ve standardním módu; v quirks módu knihovna nemusí fungovat správně.

Facebook Animation Library se hodí hlavně na jednoduché animace. Neobsahuje proto komplikovanější konstrukce (takové v tomto článku nenajdete), na druhou stranu se ji rychle a snadno naučíte používat.

První ukázka

Pro použití knihovny ve vaší aplikaci postačí zahrnout jeden javascriptový soubor.

<script type="text/javascript" src="animation.js"></script> 

Celou knihovnu tvoří jediný objekt Animation, který se stará o registraci a spouštění animací. V naší ukázce budeme chtít schovat zobrazený element.

var animObj = new Animation(box);
animObj.hide();
animObj.go(); 

Nejprve jsme vytvořili objekt Animation s odkazem na schovávaný element (box), zaregistrovali jsme animaci (hide) a následně jsme ji spustili. Stejného výsledku bychom dosáhli i s následujícím zkráceným zápisem:

Animation(box).hide().go(); 

Animace můžeme i řetězit. Pokud chceme, aby náš element nezmizel jednoduše, ale postupně bledl (budeme měnit jeho barvu) a teprve po té zmizel, použijeme:

var animObj = new Animation(box);
animObj.hide();
animObj.to("color", "#fff");
animObj.go(); 

Nebo ve zkrácené podobě:

Animation(box).to("color", "#fff").hide().go(); 

Animace změnou kaskádových stylů

Připomeňme si, co jsme si říkali už posledně: Animace na webu vytváříme změnou kaskádových stylů. V našem případě jsme blednutí elementu vytvořili postupnou změnou barvy textu na bílou (animovaný element obsahoval černý text na bílém pozadí).

Základem všech animací proto jsou metody, které řídí změnu kaskádových stylů. Facebook Animation Library nám nabízí tři:

• to()
• by()
• from()

První metodu to jsme si již předvedli. Říká animační knihovně, jakou vlastnost kaskádových stylů chceme změnit (první argument) na kterou hodnotu (druhý argument), např:  animObj.to("color", "#fff");.

Druhá metoda by slouží k relativnímu zadání. Říká, o kolik se má aktuální hodnota změnit, např. by("padding-top", 20) zvýší horní odsazení o 20 pixelů. Pokud bychom udali zápornou hodnotu, došlo by naopak k jeho snížení.

Metodu from použijeme ve spojení s předchozími metodami, pokud nemá animace začínat z aktuální hodnoty, ale potřebujeme výchozí hodnotu specifikovat. Uvedeme ji hned za metodou to nebo by, např:

Animation(box).to("padding-top", 300).from("padding-top", 200).go(); 

Pokud chcete ovlivnit rychlost animací, použijte metodu duration, jejíž argument nastaví dobu trvání animace v milisekundách, nap­ř:

Animation(box).to("padding-top", 300).from("padding-top", 200).duration(1500).go(); 

Animace pomocí kontrolních bodů

Občas musíme animaci složit z několika částí oddělených kontrolními body (checkpoints). Kupříkladu následující kód neudělá to, co od něj asi očekáváte:

Animation(box).to("background-color", "#ffe970").to("background-color", "#000").go(); 

Pravděpodobně byste čekali, že nejprve dojde ke změně barvy na „#ffe970“ (odstín žluté) a následně na černou. Ve skutečnosti proběhne pouze změna barvy na černou. Pokud chcete, aby proběhla i první změna barvy, musíte vložit kontrolní bod (metoda checkpoint). Následující kód již proběhne podle očekávání:

Animation(box).to("background-color", "#ffe970").checkpoint().to("background-color", "#000").go(); 

Metoda checkpoint má volitelný parametr, který určuje, jak rychle po sobě jednotlivé animace následují. Pokud je menší než jedna, začne další animace již během animace předcházející. Pokud bychom chtěli, aby přechod na černou barvu nastal již v polovině přechodu na žlutou, použijeme hodnotu  0.5:

Animation(box).to("background-color", "#ffe970").checkpoint(.5).to("background-color", "#000").go(); 

Pokud naopak použijeme větší hodnotu než jedna, vložíme mezi jednotlivé kroky pauzu.

Metoda checkpoint podporuje i druhý parametr. Tomu můžeme předat funkci, která bude v kontrolním bodu zavolána.

Animation(box).to("background-color", "#ffe970").checkpoint(1, function () { /* some code */ } ).to("background-color", "#000").go(); 

Tímto způsobem můžete vytvářet vnořené animace, měnit mezi jednotlivými kroky animace kód stránky apod.

Shrnutí

To je k základnímu použití Facebook Animation Library vše. Jedná se o jednoduchou knihovnu, kterou snadno začleníte do vaší aplikace. Dobře vám poslouží k jednoduchým úkonům jako je např. efektní zobrazování a skrývání dialogů a informačních boxů. Pokud potřebujete vytvářet animace složitějšího charakteru, vyhledejte raději nějaký mocnější nástroj. I s Facebook Animation Library byste je možná vytvořili, ale nemuselo by se jednat o nejsnazší způsob.

Na závěr uvedeme ještě několik poznámek.

Omezení

Facebook Animation Library nepodporuje změnu všech vlastností kaskádových stylů, ale jen několika vybraných. Jedná se o barvu písma, barvu pozadí, průhlednost, velikost písma a dále všechny vlastnosti ovlivňující rozměry elementů a jejich pozicování (pro přehled všech podporovaných vlastností nahlédněte do zdrojového kódu knihovny). Seznam podporovaných vlastností je ovšem dobře zvolený a pravděpodobně nebudete potřebovat animovat vlastnost, která v něm není obsažena.

Pokud budete pomocí knihovny měnit průhlednost (vlastnost opacity), nebude se průhlednost měnit v zatím rozšířených verzích Internet Exploreru.

Ačkoliv je Facebook Animation Library běžně používaná při tvorbě aplikací pro Facebook, není bez chyb (autor tohoto článku při používání na některé chyby narazil). Proto nezapomeňte vytvořený kód pečlivě testovat.

Tipy a triky

Knihovna je nabízena v nekomprimované a lehce komprimované podobě. Koprimovaná podoba má odstraněny bílé znaky, knihovna proto zabírá necelých 11 kB (které můžou být dále zmenšeny např. gzipováním), jedná se o vhodnou podobu pro nasazení na produkční server. Problém nastane, pokud se objeví javascriptová chyba uvnitř kódu knihovny. Jelikož se komprimovaná podoba nachází na jediném řádku, může být komplikované chybu lokalizovat. V takovém případě využijete nekomprimovanou podobu knihovny.

Opravdu efektního mizení a zobrazování objektů docílíte spojením několika animací (např. změna barvy a rozměrů). Pro inspiraci vám můžou posloužit některé ukázkové příklady, které najdete v dokumentaci knihovny.

Nenechte se zmást tím, že v našich příkladech jednou vytváříme Animation jako zvláštní objekt var animObj = new Animation(box); a podruhé jej voláme jako funkci Animation(box).hide().go();. Nový objekt je totiž vytvořen v obou případech. Toho je docíleno pomocí jednoduchého triku, který se používá, pokud nechcete explicitně volat operátor new při vytváření každého objektu. Kód ve funkci Animation ověří, zda je volán jako funkce nebo jako konstruktor, pokud je volán jako obyčejná funkce, zavolá z ní konstruktor sám. Zájemci, nechť se podívají do zdrojového kódu knihovny.

Odkazy

• Facebook Animation Library
• Dokumentace ke knihovně
• Konzole na testování knihovny