SMIL, neboli Synchronized Multimedia Integration Language, umožňuje vytvářet působivé multimediální prezentace obsahující video, hudbu, obrázky i text. V tomto článku se seznámíme s metodami animace objektů ve SMILu a se základními prezentačními efekty, které nám v budoucnu poslouží při tvorbě komplexních prezentací.

Prezentace slouží k předvedení informací a k těmto účelům jsou mnohdy použity prezentační efekty. Kdykoli text zdánlivě spadne, vletí a odsune se, vždy za tímto dějem stojí prezentační efekty. Stejně tak je možné vytvářet prezentace v jazyce SMIL a obdobně lze použít prezentační efekty a animace. V předchozích článcích jsem několikrát teoreticky popisoval tvorbu a možnosti animací, v tomto článku bych je předvedl v praxi.

Animační modul SMILu, který je mimochodem integrován i do SVG, je souborem několika druhů animací a dalších efektů. Co je to ve skutečnosti animace? Na webu se mnohdy setkáváme s animovaným GIFem, animace je výraz zahrnující oživení a pohyb. A tak animace může blikat, animace se může odsouvat z dokumentu nebo může poskakovat přes celé okno. Možnosti animací ve SMILu lze obsáhnout v několika bodech:

  • Přesun objektu po křivce (křivka je vymezena dvěma body a časovým úsekem mezi nimi).
  • Změna atributu – změna barvy, velikosti, polohy a podobně. Změnou atributu lze dosáhnout například plynulé změny barvy z černé na bílou (přes odstíny šedi) nebo postupného zvětšování objektu.
  • Rollover – záměna obrázku po najetí myši, často využíváno na webových stránkách.
  • Střídání několika obrázku (animovaný GIF), ale i jiných prvků.

Animace jsou podporovány až ve SMIL 2.0 a jejich problematika je natolik rozsáhlá, že jsem raději zvolil animace v HTML+TIME, které jsou výrazně jednodušší a momentálně lépe využitelné. Všechny zdrojové kódy jsou proto psány v HTML+TIME a lze je bez problémů zobrazit v Internet Exploreru 5.5 a 6.0. Podívejte se na několik příkladů, připravených ke stažení.

Pohyb, přesun po křivce

Pohyb po křivce je definován počátečním bodem, koncovým bodem a dobou průběhu přesunu. Následuje jednoduchý příklad pohybu shora dolů:

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1252″>
<xml:namespace prefix=“t“/>
<style type=“text/css“>
t\:* { behavior:url(#default#time2); }
#box{width:200; height:200; background-color: #8894fb }
#animace{position:absolute; top:0; left:0;}
</style>
</head>
<body>
<t:par id=“box“ begin=“0s;animace.click“ fill=“hold“>
  <img src=“balon.png“ alt=““ id=“animace“ />
  <t:animateMotion targetElement=“animace“ dur=“1.5s“ fill=“hold“ from=“80,-30″ to=“80,170″ />
</t:par>
</body>
</html>

V příkladu jsme provedli posun z pozice (80,-30) na pozici (80,170) po dobu 1,5s. Důležité je, aby měl animovaný prvek nastavenu absolutní pozici (CSS vlastnost „position: absolute“), jinak by nebylo možné animaci aplikovat, protože prvek by byl pevnou součástí dokumentu. K tomuto účelu slouží element t:animateMotion, který může mít následující atributy:

  • dur – doba animace v sekundách
  • from – počáteční pozice x, y
  • to – konečná pozice x, y
  • fill – možné hodnoty hold|remove a další. Hodnota „remove“ vrátí objekt po animaci na původní místo, hodnota „hold“ objekt podrží na místě, kde byla animace ukončena.
  • targetElement – id elementu, na který se animace vztahuje

V příkladu jsme též použili událost, která reaguje na kliknutí tlačítka. Použití událostí ve SMILu je velmi podobné událostem JavaScriptu, SMIL pouze vypouští počáteční předponu „on“. Jejich syntaxe je identifikátor(id).událost:

  • prvek.click – nastává po kliknutí na prvek
  • prvek.mouseOver – nastává po najetí myši na prvek
  • prvek.mouseOut – nastává po odjetí myši z prvku

Události se nejčastěji používají jako hodnoty časových atributů begin, end a dur. U těchto atributů lze zadat více hodnot, například begin="1;5;10;prvek.onClick" – takový prvek se zobrazí vteřinu po nahrání, pět vteřin po nahrání, deset vteřin po nahrání a vždy po kliknutí na prvek.

Složitějším přesunem může být přesun složený z více cest, takový pohyb je nezbytné rozdělit na několik animací (shora dolů a pak zleva doprava). Příklad:

<div style=“border: 1px solid gray;width:200;height:332;position:absolute; top:0; left:0″>
  <img id=“objekt“ border=“0″ src=“balon.png“ style=“position:absolute;top:0;left:0″>
</div>
<t:seq fill=“freeze“>
  <t:animate dur=“3s“ accelerate=“1″ targetElement=“objekt“ attributeName=“top“ by=“292″ fill=“hold“ />
  <t:animate dur=“2s“ decelerate=“1″ autoReverse=“true“ targetElement=“objekt“ attributeName=“left“ by=“161″ />
</t:seq>

Zde vidíme trochu jinou animaci. Pomocí elementů t:animate měníme hodnoty atributů vybraného objektu (id). Nicméně stejnou animaci bychom mohli provést i s pomocí elementu t:animationMotion. Atributy prvku t:animate jsou obdobné jako atributy prvku t:animateMotion, pouze přibývá atribut „by“ a „atributteName“:

  • attributeName – název měněného atributu. Měnit můžeme pozici, velikosti, barvu a další.
  • by – nová hodnota atributu
  • decelerate – rychlost prvku se postupně snižuje
  • accelerate – rychlost prvku se zvyšuje
  • autoReverse – hodnoty: true|false. Animace se po dokončení zopakuje v opačném směru (objekt se vrátí na původní místo).

Zatímco t:seq vytváří postupné animace – nejdříve pohyb dolů, následně pohyb doprava – s pomocí prvku t:par lze připravit pěkné oblé křivky. Element t:par provádí animace souběžně, proto kdybychom jej použili v předchozím příkladu, tak by na každý bod časové osy připadala jak animace směrem dolů, tak i směrem doprava. Výsledkem by bylo složení obou směrů a protože obě animace neběží stále stejnou rychlostí (zrychlují a zpomalují), výsledný pohyb by byl oblý.

Vše lze krásně demonstrovat na následujícím příkladu, kdy první objekt vykonává sekvenční (t:seq) animaci bez zrychlování a zpomalování, na druhý objekt je použita přímočará souběžná (t:par) animace a třetí objekt se pohybuje po oblé křivce (směrem dolů zpomaluje a směrem doprava zrychluje):

<div style=“border:1px solid gray;width:340;height:340;position:absolute;top:0;left:0″>
  <img id=“objekt“ border=“0″ src=“balon.png“ style=“position:absolute; top:0; left:0″>
  <img id=“objekt2″ border=“0″ src=“balon.png“ style=“position:absolute; top:0; left:0″>
  <img id=“objekt3″ border=“0″ src=“balon.png“ style=“position:absolute; top:0; left:0″>
</div>
<t:seq fill=“hold“ id=animace1″>
  <t:animate dur=“2s“ targetElement=“objekt3″ attributeName=“top“ by=“300″ fill=“hold“ />
  <t:animate dur=“2s“ targetElement=“objekt3″ attributeName=“left“ by=“300″ fill=“hold“ />
</t:seq>
<t:par fill=“hold“ id=“animace2″>
  <t:animate dur=“4s“ targetElement=“objekt2″ attributeName=“top“ by=“300″ fill=“hold“ />
  <t:animate dur=“4s“ targetElement=“objekt2″ attributeName=“left“ by=“300″ fill=“hold“ />
</t:par>
<t:par fill=“hold“ id=“animace3″>
  <t:animate dur=“4s“ decelerate=“1″ targetElement=“objekt“ attributeName=“top“ by=“300″ fill=“hold“ />
  <t:animate dur=“4s“ accelerate=“1″ targetElement=“objekt“ attributeName=“left“ by=“300″ fill=“hold“ />
</t:par>

Animace, změna barvy

Animace barev je velmi specifickou vlastností SMILu, SMIL dokáže vytvářet barevné plynulé přechody z jedné barvy do druhé. Při práci s barvami můžeme použít dva elementy:

  • t:animate – atribut „atributName“ nastavíme na „color“ a následně budeme měnit barvu. Avšak změna barev je jednorázová, barva se nemění postupným zesvětlením či ztmavením, jednoduše skočí z jedné na jinou.
  • t:animateColor – pomocí tohoto elementu lze dosáhnout postupné barevné změny.

Následující příklad vytváří text, který neustále přechází z černé do bílé barvy (přes různé odstíny šedi):

<t:seq id=“text“ style=“font:30px Verdana“>
animace pomocí SMILu
<t:animateColor autoReverse=“true“ targetElement=“text“ dur=“3s“ attributeName=“color“ from=“black“ to=“white“ fill=“hold“ repeatCount=“indefinite“ />
</t:seq>

Atribut „repeatCount“ určuje počet opakování, hodnota „indefinite“ označuje nekonečno. Barva tedy neustále přechází z černé do bílé (po dobu tří vteřin) a z bílé zpět do černé. Barvu je možné měnit závisle na události, třeba po najetí myši (obdoba „:hover“ v CSS). Výhodou SMILu oproti CSS je možnost plynulé změny barvy. Text, který plynule změní barvu po najetí myši, lze vytvořit takto:

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1252″>
<xml:namespace prefix=“t“/>
<style type=“text/css“>
t\:* { behavior:url(#default#time2); }
</style>
</head>
<body>
<p id=“text“ style=“font:30px Verdana“>
animace pomocí SMILu
<t:animateColor targetElement=“text“ dur=“3s“ attributeName=“color“ begin=“text.mouseover“ end=“text.mouseout“ to=“white“ fill=“remove“ />
</p>
</body>
</html>

Skokovou změnu barvy lze vytvořit prostřednictvím prvku t:animate. Výsledek takové animace může být stejý, jako použití CSS a „:hover“, avšak SMIL ještě umožňuje stanovit časovou prodlevu mezi změnou barvy a návratem původní barvy:

<p id=“text“ style=“font:30px Verdana“>
  animace pomocí SMILu
  <t:animate targetElement=“text“ dur=“3s“ attributeName=“color“ begin=“text.mouseover“ to=“blue“ />
</p>

Rovněž zajímavou možností prvku t:animate je animace (změna) velikosti objektu. Tím lze dosáhnout zajímavého efektu postupného zvětšovaní objektu do skutečné velikosti:

<t:par fill=“hold“>
<img src=“balon-velky.png“ width=“10″ height=“10″ id=“text“ />
  <t:animate targetElement=“text“ dur=“3s“ attributeName=“height“to=“300″ fill=“hold“ />
  <t:animate targetElement=“text“ dur=“3s“ attributeName=“width“ to=“300″ fill=“hold“ />
</t:par>

Tvorba „klasických“ webových prvků

Nakonec bych měl ještě zmínit tvorbu obvyklých webových animací, totiž rolloverů, které lze vytvořit pomocí Flashe, JavaScriptu nebo CSS, a animaci dvou a více obrázků (animovaný GIF, JavaScript, Flash). Začneme animací několika obrázků. Samotnou animaci provedeme opakujícím se sekvenčním prvkem:

<t:seq dur=“4s“ repeatDur=“indefinite“>
<t:img dur=“1s“ src=“balon.png“ />
<t:img src=“balon2.png“ dur=“1s“ />
<t:img dur=“1s“ src=“balon3.png“ />
<t:img src=“balon2.png“ dur=“1s“ />
</t:seq>

Animace je tvořena sekvenčním prvkem, který se po uplynutí čtyř vteřin opakuje. V tomto prvku se zobrazují střídavě čtyři obrázky, každý je zobrazen po dobu jedné vteřiny. Nemusíme animovat pouze obrázky, SMIL umožňuje animovat i text, přičemž tento text zůstává textem a je možné ho kopírovat a indexovat.

Druhým oblíbeným prvkem webových stránek je rollover. Opět díky použití SMILu můžete libovolně kombinovat text s obrázky:

<t:par repeatDur=“indefinite“>
<img src=“balon.gif“ id=“obrazek“ />
<t:animate targetElement=“obrazek“ begin=“obrazek.mouseOver“ attributeName=“src“ to=“balon2.png“ end=“obrazek.mouseOut“ />
</t:par>

Nyní jsme využili událostí a prvku t:animate ke změně atributu „src“ (zdroje obrázku). Hodnota atributu se mění vždy po najetí myši na „balon2.png“, po odjetí myši se vše vrátí zpět (není vyplněn atribut „fill“).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

1 Příspěvěk v diskuzi

Odpovědět