SMIL – animace a prezentační efekty

1. září 2004

•

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:

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):

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“).