Vytváříme animace na webu: knihovna od Opery

Chtěli jste někdy ve svých webových aplikacích použít animace? Nevíte, jak na to? Dnes vám na příkladu javascriptové knihovny od Opera Software ukážeme, jak animace na webu fungují a naznačíme různé možnosti jejich vytváření. Předvedeme vám i několik jednoduchých příkladů.

Webové aplikace používá stále více uživatelů a jejich autoři často mají snahu je udělat co nejhezčí. Proč? Uživatelé jsou na to z desktopového prostředí zvyklí, jsou přímo zhýčkaní. Ani obyčejné minimalizování okna desktopové aplikace neproběhne v mžiku, ale uživateli se zobrazí krátká animace okna mizejícího z obrazovky.

Není proto divu, když i u webových aplikací stále častěji narážíme na animované prvky. Takový nákupní košík se kdysi při zvolení „Vyprázdnit“ jednoduše rovnou vyčistil. Dnes je modernější nechat jeho položky postupně blednout a mizet, až zmizí docela.

Jak použít animace na webu

Existují tři cesty, jak podobných efektů dosáhnout ve vaší webové aplikaci:

  1. Napíšete si javascriptový kód pro animace sami. Jedná se o cestu nejtěžší, proto pokud chcete mít vaši aplikaci co nejdříve hotovou, tak se tomuto způsobu téměř jistě vyhnete.
  2. Použijete javascriptový framework. Jedná se dnes asi o cestu nejobvyklejší. Řada frameworků dnes základní animační funkce obsahuje (např. jQuery, MooTools) nebo mají animační nadstavbu, případně plugin.
  3. Použijete knihovnu určenou pro animace. Tento způsob je méně častý a je to škoda. V našem článku se budeme věnovat právě jemu.

Kdy použít knihovnu pro animace

Pokud ve vaší aplikaci používáte nějaký javascriptový framework, byla by škoda nevyužít již jeho možností a zřejmě nebudete hledat další knihovnu. Ovšem pokud vaše webová stránka nebo aplikace javascriptový framework nepoužívá, je zbytečné jen kvůli tomu, že potřebujete animovat mizející nebo rozbalovací box, použít celý framework. Knihovna pro animace je v takovém případě rozumnou volbou. Bude pravděpodobně menší a rychlejší než framework.

Druhým důvodem k použití knihovny pro animace je případ, kdy potřebujete vytvářet komplikovanější animace. Framework zpravidla obsahuje jen několik funkcí pro základní animace, které stačí pro běžné případy, ale už nám nedovolí animace detailně kontrolovat. To naopak může zajistit specializovaná knihovna, jako ta, kterou si právě předvedeme.

Knihovna od Opera Software

Možnosti animací si ukážeme si na knihovně pro animace, kterou vytvořila Opera Software. Knihovna je volně dostupná pod BSD licencí. Pro použití ve vaší aplikaci stačí, abyste začlenili jeden soubor:

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

Malé varování: Pokud byste chtěli tuto konkrétní knihovnu reálně použít ve svém projektu, přečtěte si napřed článek až do konce!

Co jsou to animace?

Nemám teď na mysli animované obrázky (ale i ty můžete při tvorbě animací využít), ale běžné animace používané ve webových aplikacích. Z pohledu webového prohlížeče je animací dynamická změna některé vlastnosti kaskádových stylů.

Pokud budeme měnit rozměry boxu, může se zvětšovat nebo postupně mizet (zobrazující se a posléze mizející fotografie). Pokud budeme měnit jeho pozici, může se posouvat po obrazovce nebo se zasouvat pod jiný box (např. vysouvací/zasouvací menu). Pokud budeme měnit jeho barvu, může se obyčejný odstavec textu nebo tlačítko plynule proměnit ve zvýrazněný prvek, a v případě periodické změny bude dokonce blikat (blikání pravděpodobně tak často nevyužijete).

Animace nejsou žádná věda. Pokud umíte základy HTML a kaskádových stylů a dokážete měnit jejich vlastnosti (kupříkladu pomocí knihovny od Opery), zvládnete základní animace na jedničku.

V tomto článku se nebudeme zabývat složitějšími animacemi, které ve webových aplikacích nejspíš stejně nepoužijete (např. pohyb pulzujícího objektu po Bézierově křivce).

Jednoduché animace

Mějme box absolutně pozicovaný a pokusme se jej trochu rozhýbat. Vytvoříme si k tomu objekt animace, který definuje knihovna od Opery:

var animOjb = document.getElementById("box").createAnimation():
animObj.addAnimation("top", "0px", "100px"); 

V našem příkladu budeme měnit vlastnost top (svislou souřadnici objektu) z nuly na 100 pixelů. Zatím se ale na obrazovce nic nehýbe, animaci jsme jen zaregistrovali, ale nespustili. K tomu musíme zavolat:

animObj.run(); 

Až teď animace proběhla.

Byla snad příliš pomalá? Stačí před spuštěním nastavit animOjb.speed = 10; a nestihnete se divit.

V našem příkladu jsme měnili pouze jednu vlastnost kaskádových stylů, ale my můžeme měnit více vlastností současně:

animObj.addAnimation("top", "0px", "100px");
animObj.addAnimation("left", "0px", "100px");
animObj.run(); 

V tomto případě se náš box nebude pohybovat shora dolů, ale po úhlopříčce doprava dolů.

Volání můžeme i řetězit:

animObj.addAnimation("top", "0px", "100px").addAnimation("left", "0px", "100px").run(); 

Pokud přidáme změnu rozměrů, bude se při pohybu zvětšovat:

animOjb.addAnimation('width', '10px', '200px');
animOjb.addAnimation('height', '10px', '200px'); 

Pokud budeme měnit průhlednost, bude objekt mizet:

animOjb.addAnimation('opacity', '1.0', '0.0' ); 

Jak animace fungují?

Knihovna při spuštění animace zaregistruje pomocí funkce setInterval() periodické volání. Každé jedno zavolání funkce je jako jeden snímek ve filmu. Knihovna pro každý snímek dopočítá, o kolik má kterou vlastnost změnit, a změnu provede. Postup je univerzální a funguje bez problémů i při několika souběžně spuštěných animacích na stránce najednou (každá animace si zaregistruje své vlastní volání pomocí  setInterval()).

Zatím to možná není zřejmé, ale všechny měněné vlastnosti musíme zapsat v jejich javascriptové podobě. U jednoslovných vlastností nepoznáme rozdíl (top, width, opacity), ale u složených vlastností na to pamatujte, protože zápis animObj.addAnimation("margin-top", "0px", "100px") nebude fungovat. Je nutné použít  animObj.addAnimation("marginTop", "0px", "100px").

Proč? Protože marginTop je javascriptová vlastnost pro přístup k vlastnosti margin-top z kaskádových stylů. Všechny takové vlastnosti definuje specifikace DOM2 Style, ale nemusíte si je pamatovat. Postačí vám jednoduché pravidlo: Tam, kde je v názvu vlastnosti kaskádových stylů pomlčka, tuto pomlčku vynechte a následující písmeno zapište jako velké.

Změna rychlosti

Dosud všechny naše animace probíhaly za konstantní rychlosti. Vlastnost accelerationPro­file nastaví průběh změny rychlosti animace. Pokud jej nastavíte na accelerate, bude se rychlost zvyšovat, při decelerate snižovat, hodnota sine znamená animaci zpočátku pomalou zrychlující a v závěru opět zpomalující.

Nestačí? Pokud vlastnosti accelerationPro­file přiřadíte funkci, bude podle ní zrychlující faktor vypočítáván průběžně během animace a je na zcela vás, jak bude výsledný rychlostní profil vypadat. Ale to jsme už zaběhli k pokročilým animacím.

Navazující animace

Pokud se animace skládá z několika kroků (např. chcete sbalit rozevřené vnořené menu, ovšem tak, aby se nejprve sbalilo vnitřní menu, následně se sbalilo menu o úroveň výš atd.), využijete události, které objekt animace generuje.

V našem případě vnořených menu bychom použili navázání animací:

anim1.onfinish = function() {
  anim2.run()
}; 

Po skončení první animace se tak automaticky zavolá animace druhá.

Objekt animace generuje i další události, např. událost OAnimationFrame, která je vyvolána při každém zobrazovaném snímku. Pokud by vaše animace zobrazovala progressbar, můžete událost OAnimationFrame použít k průběžnému generování pomocného textu („Operace je hotova z 30%“, „Operace je hotova z 40%“ …). Více najdete v dokumentaci.

Animujeme na úrovni celých efektů

Celá knihovna od Opery je nízkoúrovňová. Definujeme v ní totiž animace na úrovni změny jednotlivých vlastností kaskádových stylů (čili na nízké úrovni). Nevýhodou je, že i nejjednodušší animace se skládají z několika javascriptových příkazů. To není vždy pohodlné.

Vedle knihovny je proto k dispozici i její nadstavba animationExten­sion.js, která obsahuje vysokoúrovňové funkce. Ty umožňují volat přímo jednotlivé efekty (změna šířky boxu z 0 na 100px, zmizení boxu apod.):

div.animateWidth("0px", "100px");
p.fade(1, 0, 10); 

Všimněte si, že nyní již postačí jeden příkaz na každý efekt. Každá z metod kompletně zapouzdří probíhající animaci (při jejím používání nevidíme, co přesně se uvnitř metody děje, zatímco v předchozích případech jsme to nejen viděli, ale dokázali i ovlivnit).

Kterou cestu použít?

Pokud pouze potřebujete obohatit vaši aplikaci o několik jednoduchých animací, sáhnete celkem jistě po druhém, jednoduchém řešení (toho řešení je podobné přístupu, jaký mají k animacím javascriptové frameworky). Pokud ale potřebujete vytvořit animaci složitější, např. zmíněné postupné sbalování jednotlivých úrovní menu, nezbude než použít první, nízkoúrovňový přístup.

Online ukázka

Připravili jsme pro vás jednoduchou ukázku použití této knihovny. Další pěkné ukázky najdete přibalené ke knihovně.

Podpora prohlížečů

Knihovna od Opery má ovšem jeden závažný problém. Ačkoliv funguje v prohlížečích Opera, Firefox, Safari nebo Google Chrome, nefunguje v Internet Exploreru (v žádné verzi, ani v připravované osmičce).

Je to proto, že Opera Software danou knihovnu nabízí zejména pro použití v Opera Widgetech, kde problémy nekompatibility nevadí. Ovšem je to škoda. Napsat podobný kód fungující i v Internet Exploreru není problém a knihovna by se mohla dočkat širšího použití. Pokud by se vám knihovna přesto líbila, upravit ji i pro IE by pro zběhlého javascriptaře neměl být velký problém.

S další knihovnou příště

Pokud jste dočetli až sem, neměl by pro vás být problém zvládnout animace na webu. Příště si ukážeme další javascriptovou knihovnu pro animace, a tentokrát už takovou, která funguje ve všech prohlížečích. Základy jste se naučili už dnes, takže to příště půjde jako po másle.

Odkazy

Použili jste někdy ve své aplikaci animace?

Vystudoval jsem biochemii. Vymyslel a založil Zdroják. Aktuálně ho vedu. Nejsem váš hodný tatínek, který vás bude brát za ručičku, ale zlý moderátor diskusí. Smiřte se s tí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ářů

piXus Zlozitejsie animacie
Martin Hassman Re: Zlozitejsie animacie
Zdroj: https://www.zdrojak.cz/?p=2817