Kurz SVG – není to Flash a přece se točí!

2. září 2004

•

Deklarativní animace umožňují velmi snadné animování grafických objektů bez použití skriptů. Tento způsob se označuje jako „time-based“ – můžete definovat přesně načasovanou změnu vpodstatě jakéhokoli parametru grafiky, počínaje rozměry, polohou a průhledností až třeba po změnu transformačních atributů. To je hlavní rozdíl oproti SWF formátu, kde se časování animací vždy odvíjí od jednotlivých klíčových snímků – anglicky „frame-based“. Další důležitý rozdíl je v tom, že jednotlivé deklarativní animace mohou být na sobě zcela nezávislé a mít jinou dobu trvání nebo počet opakování a podobně.

Deklarativní přístup má také velkou výhodu ve snadném, přesně definovaném přenosu animací napříč celým spektrem softwarových aplikací. Animační prvky SVG byly vyvinuty ve spolupráci s pracovní skupinou W3C Synchronized Multimedia (SYMM), která vytvořila specifikaci Synchronized Multimedia Integration Language 1.0. Technologie SMIL má přitom už dnes poměrně silnou podporu v přehrávačích jako QuickTime nebo RealPlayer.

Odkazy v SVG

Ještě než se ponoříme do animací, povíme si něco málo o tom, jak v SVG vytvářet odkazy. Ty jsou totiž základem interaktivity. Obdoba hyperlinku známého z klasického HTML vypadá takto:

Všechny grafické objekty uvnitř elementu hyperlinku jsou aktivní – reagují jako odkaz. V uvedeném příkladu je to červená elipsa.

Dalšími možnými atributy jsou xlink:title pro pojmenování odkazu a target pro jméno rámu ve kterém se má otevřít cílový dokument.

SVG má ve slovníku i analogii odkazu na konkrétní prvek ve stránce. Jelikož se v případě SVG jedná o grafický objekt – obrázek, je důležité mít možnost adresovat konkrétní výřez kresby, jinak řečeno pohled, anglicky „view“. V zásadě jsou k dispozici dvě možnosti:

kresba.svg#svgView(viewBox(0,200,1000,1000)) – přesným číselným definováním výřezu grafiky
kresba.svg#nejaky_pohled – odkazem na speciální prvek view obsahující předdefinovaný pohled na grafický dokument

Element `view`

Přehled atributů elementu:

viewTarget = (jméno_objektu) – (nepovinný) pokud zadáme identifikátor objektu, přiřazeného ke konkrétnímu pohledu, prohlížeč by jej měl po aktivaci hyperlinku zvýraznit
viewBox = (x y šířka výška) – atribut umožní definovat virtuální okno, kterým se uživatel po aktivaci hyperlinku bude na dokument dívat: x, y nastaví levý horní roh; šířka a výška pak určují rozsah virtuálního pohledu
preserveAspectRatio = (typ_přizpůsobení_rozměrů) – použitím „viewBox“ může dojít i k neproporcionální deformaci pohledu, proto máte k dispozici tento parametr, kterým můžete nastavit chování prohlížeče: „none“ umožní deformaci souřadnic a hodnota, například „xMidYMid“, přizpůsobí grafiku proporcionálně do pohledového okna a navíc ji vycentruje v obou směrech (toto je výchozí hodnota).
zoomAndPan – nastavením na hodnotu „disable“ mohou prvky view (taktéž všechny vnější prvky svg) zakázat uživateli manuálně měnit pohled a zvětšení v prohlížeči SVG (výchozí je „magnify“ – vše povoleno)

Animace

Klíčové pro pochopení je slovíčko deklarativní – to znamená, že tvůrce animace přesně definuje (deklaruje), že daný atribut konkrétního objektu bude animován (čili jeho hodnota se bude měnit) v definovaném rozmezí hodnot v konkrétním čase od-do. SVG norma má obrovskou škálu možností, jak to udělat. Velmi flexibilní je i určování času – animace mohou být například startovány nějakou událostí uživatelského rozhraní (třeba „onmouseover“) nebo navázány na průběh nějaké jiné SVG animace. Možností je tolik, že vystačí na několik článků.

Vztah SVG vůči SMIL

SVG je jazyk odvozený od W3C normy SMIL („host language“ v terminologii SMIL) a jako takový tedy obsahuje animační prvky v ní definované – kromě nich ale byly definovány i některé další, aby se dosáhlo pokrytí celé oblasti 2D grafiky.

Prvky definované ve specifikaci SMIL:

animate – mění hodnoty skalárních atributů v čase
set – zjednodušení prvku animate používané pro změnu (animování) nečíselných atributů typu visibility
animateMotion – pohybuje s prvkem podél zvolené animační křivky určující dráhu pohybu
animateColor – pro změnu barevných hodnot

Prvky vztahující se speciálně k SVG animacím

animateTransform – animuje transformační atributy, velmi silný nástroj – jelikož je možné jednotlivé typy animací kombinovat, lze pohodlně vytvořit libovolné pohybové efekty
mpath element – vektorová cesta, kterou lze umístit do prvku animateMotion a definovat tak přesně dráhu pohybu
keyPoints – tento attribut je dalším rozšířením elementu animateMotion a umožňuje řídit zrychlení, nejčastější použití je evidentní – vytvoření přirozených pohybových efektů
rotate – další atribut pro prvek animateMotion, který řídí směr natočení animovaného objektu (například díváme-li se shora na auto pohybující se po křivce, jeho špička by se samozřejmě měla stále natáčet ve směru jízdy)

Animace prakticky

Abychom stále jen neteoretizovali, vyzkoušíme si nyní malý příklad, ve kterém jsou animovány jednotlivé atributy „width“, „x“ a „fill“ obdélníků:

<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1 Tiny//EN“
„http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd“>
<svg version=“1.1″ baseProfile=“tiny“
     xmlns=“http://www.w3.org/2000/svg“
     xmlns:xlink=“http://www.w3.org/1999/xlink“
     width=“320px“ viewBox=“0 0 480 360″>
<title>9.2 Animace</title>
<desc>Testuje zakladni animacni prvek ‚animate'</desc>
<g font-family=“Helvetica“ font-size=“24″>
  <!– vykresleni souradnic s popisem casu –>
  <line x1=“190″ x2=“190″ y1=“45″ y2=“300″
        stroke=“black“ stroke-width=“4″/>
  <line x1=“460″ x2=“460″ y1=“45″ y2=“300″
        stroke=“black“ stroke-width=“4″/>
  <text x=“156″ y=“32″>0-2 sec.</text>
  <text x=“380″ y=“32″>->5 sec.</text>
  <!– 4 nasledujici animace funguji i v KSVG 3.2 –>
  <!– a ukazuji ze pro stejny efext lze vyuzit   –>
  <!– ruznorode zpusoby nastaveni meznich hodnot.–>
  <g>
  <rect x=“160″ y=“60″ width=“30″ height=“30″
        fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <animate attributeName=“width“ from=“30″ to=“300″
           begin=“2s“ dur=“3s“ fill=“freeze“/>
  </rect>
  <text x=“20″ y=“85″ fill=“red“>from->to</text>
  </g>
  <g>
  <rect x=“160″ y=“100″ width=“30″ height=“30″
        fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <animate attributeName=“width“ from=“30″ by=“270″
           begin=“2s“ dur=“3s“ fill=“freeze“/>
  </rect>
  <text x=“20″ y=“125″ fill=“red“>from->by</text>
  </g>
  <g>
  <rect x=“160″ y=“140″ width=“30″ height=“30″
        fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <animate attributeName=“width“ by=“270″
           begin=“2s“ dur=“3s“ fill=“freeze“/>
  </rect>
  <text x=“20″ y=“165″ fill=“red“>->by</text>
  </g>
  <g>
  <rect x=“160″ y=“180″ width=“30″ height=“30″
       fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <animate attributeName=“width“ to=“300″
          begin=“2s“ dur=“3s“ fill=“freeze“/>
  </rect>
  <text x=“20″ y=“205″ fill=“red“>->to</text>
  </g>
  <g>
  <rect x=“160″ y=“220″ width=“30″ height=“30″
       fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <!– ‚additive=“sum“‚ je IGNOROVAN v KSVG 3.2 –>
  <animate attributeName=“x“ from=“0″ to=“270″
          begin=“2s“ dur=“3s“ fill=“freeze“ additive=“sum“/>
  </rect>
  <text x=“20″ y=“245″ fill=“red“>anim. ‚x'</text>
  </g>
  <g>
  <rect x=“160″ y=“260″ width=“300″ height=“30″
        fill=“#FFAA44″ stroke=“red“ stroke-width=“4″>
  <!– toto nefunguje vubec v KSVG 3.2 –>
  <animate attributeName=“fill“ from=“#FFAA44″ to=“#00AA44″
           begin=“2s“ dur=“3s“ fill=“freeze“/>
  </rect>
  <text x=“20″ y=“285″ fill=“red“>anim. ‚fill'</text>
  </g>
</g>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“478″ height=“358″
      fill=“none“ stroke-width=“2″ stroke=“blue“/>
</svg>

Na tomto místě musím odbočit a udělat praktickou poznámku týkající se prohlížečů. Bohužel zatím stále platí, nepočítám-li komerční přehrávače pro mobilní zařízení, že většina animací je zcela správně interpretována pouze v programu Adobe SVG Viewer 3 (ASV3). Poměrně slibným vývojem prochází v poslední době prohlížeč KSVG, integrovaný v unixovém grafickém prostředí KDE od verze 3.2. Například předchozí ukázku je možné animovat i v KSVG (viz komentáře v SVG kódu), ale u dalších již budete většinou potřebovat ASV3.

Základní struktura zápisu animačních prvků – atributy

V této části si probereme ty atributy, které naleznou využití ve většině animačních prvků.

Odkaz na animovaný element

Atribut „xlink:href“ obsahuje URI odkazující na cílový element, jenž musí být v aktuálním SVG fragmentu, aby byla zaručena jeho dostupnost. URI musí ukazovat na přesně jeden element. Toto URI lze dokonce vynechat – animován pak bude rodičovský prvek přímo nadřazený danému objektu animate.

Určení animovaného atributu

Atribut „attributeName“ – zde určíte atribut, který byste chtěli v animaci měnit – pro animaci pohybu to může být třeba „x“.

Atribut „attributeType“ – možné hodnoty: „CSS“, „XML“, „auto“. Určení jmenného prostoru XML ve kterém je definován cílový atribut. Výchozí hodnota je „auto“ a v naprosté většině případů nebude vůbec nutné se tímto parametrem zabývat.

Určení rozsahu hodnot

Následující tři atributy umožňují nastavit rozmezí, ve kterém se v průběhu animování budou hodnoty měnit. (V prvku set se uplatní jen posledně jmenovaný.)

from – počáteční hodnota animovaného atributu.
by – změna hodnoty vůči počátečnímu stavu. Pokud nastavíme „by“, nebudeme už nastavovat konečnou hodnotu „to“ a naopak – je-li určena absolutní konečná hodnota, nebudeme nastavovat „by“.
to – konečná hodnota animace.

Zachování výsledku animace

Atributem „fill“ můžete určit, zda pracovní výsledek animace zůstane zachován (freeze) i po jejím skončení nebo bude odstraněn (remove – výchozí hodnota).

Aditivnost a kumulativnost animovaných hodnot

Velmi často je při animaci užitečné mít možnost měnit nějakou hodnotu (polohu, natočení) relativně k počátečnímu, klidovému stavu. Představme si například „roztřesení“ animovaného objektu okolo jeho klidové polohy – užijete-li následujících atributů, nebudete se už muset vůbec zajímat o jeho absolutní polohu. (Pro animace polohy se samozřejmě nabízí ještě alternativní řešení této úlohy pomocí změny souřadnicového systému, ale to nyní není důležité.)

Atribut „additive“ určí, zda aktuální animovaná hodnota nahradí klidovou hodnotu atributu (replace – výchozí hodnota) nebo se k ní bude přičítat (sum).

Atribut „accumulate“ – kumulativnost se uplatní v případě animačních cyklů, které proběhnou více než jednou. Funguje to přesně tak, jak byste čekali – jestliže ji nastavíte na hodnotu „sum“, pak se k aktuální hodnotě animace přičítá hodnota, kterou měl animovaný atribut na konci předcházejícího cyklu.

Příklad použití atributů

Na konci prvního opakování bude hodnota „width“ rovna 30 px, na konci cruhého cyklu 40 px a tak dále. A nyní ještě reálná demonstrace (čtyři animované obdélníky, každý s různou kombinací těchto atributů):

<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1 Tiny//EN“
„http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd“>
<svg version=“1.1″ baseProfile=“tiny“
     xmlns=“http://www.w3.org/2000/svg“
     xmlns:xlink=“http://www.w3.org/1999/xlink“
     width=“320px“ viewBox=“0 -20 480 300″>
<desc>
  Priklad nazorne predvadi animaci rozmeru 4 obdelniku
  funkce atributu ‚additive‘ a ‚accumulate‘.
  Kazdy obdelnik demonstruje jinou kombinaci parametru.
  Cervene ramovani ukazuje velikost po ukonceni
  vsech 3 animacnich cyklu.
</desc>
<title>9.3.5 Atributy ‚additive‘ a ‚accumulate‘ </title>
<!– nastav centrovane pismo      –>
<!– pro vsechny vnorene skupiny  –>
<g font-family=“Helvetica“ font-size=“18″ text-anchor=“middle“>
<!– 4 stejne obd. umistene touto –>
<!– transformaci na ruzne pozice –>
<g transform=“translate(0, 0)“>
<rect x=“60″ y=“20″ width=“50″ height=“20″
      fill=“none“ stroke=“red“ stroke-width=“4″/>
<rect x=“60″ y=“20″ width=“50″ height=“20″ fill=“violet“>
<animate attributeName=“height“ calcMode=“discrete“
  additive=“replace“  accumulate=“none“
  repeatCount=“3″ from=“200″ to=“20″
  begin=“0s“ dur=“4s“ fill=“freeze“/>
</rect>
<text x=“85″ y=“0″ fill=“navy“>replace/none</text>
</g>
<!– 2. obdelnik –>
<g transform=“translate(110, 0)“>
<rect x=“60″ y=“20″ width=“50″ height=“40″
      fill=“none“ stroke=“red“ stroke-width=“4″/>
<rect x=“60″ y=“20″ width=“50″ height=“20″ fill=“violet“ >
<animate attributeName=“height“ calcMode=“discrete“
  additive=“sum“ accumulate=“none“
  repeatCount=“3″ from=“200″ to=“20″
  begin=“0s“ dur=“4s“ fill=“freeze“/>
</rect>
<text x=“85″ y=“0″ fill=“navy“>sum/none</text>
</g>
<!– 3. obdelnik –>
<g transform=“translate(220, 0)“>
<rect x=“60″ y=“20″ width=“50″ height=“60″
      fill=“none“ stroke=“red“ stroke-width=“4″/>
<rect x=“60″ y=“20″ width=“50″ height=“20″ fill=“violet“ >
<animate attributeName=“height“ calcMode=“discrete“
  additive=“replace“ accumulate=“sum“
  repeatCount=“3″ from=“200″ to=“20″
  begin=“0s“ dur=“4s“ fill=“freeze“/>
</rect>
<text x=“85″ y=“0″ fill=“navy“>replace/sum</text>
</g>
<!– 4. obdelnik –>
<g transform=“translate(330, 0)“>
<rect x=“60″ y=“20″ width=“50″ height=“80″
      fill=“none“ stroke=“red“ stroke-width=“4″/>
<rect x=“60″ y=“20″ width=“50″ height=“20″ fill=“violet“>
<animate attributeName=“height“ calcMode=“discrete“
  additive=“sum“ accumulate=“sum“
  repeatCount=“3″ from=“200″ to=“20″
  begin=“0s“ dur=“4s“ fill=“freeze“/>
</rect>
<text x=“85″ y=“0″ fill=“navy“>sum/sum</text>
</g>
<!– obrys platna –>
<rect x=“1″ y=“-19″ width=“478″ height=“298″ fill=“none“ stroke-width=“2″ stroke=“blue“ />
</g>
</svg>

Základní struktura zápisu animačních prvků – elementy

V této části si probereme elementy, pomocí nichž budeme provádět animace v SVG.

Element `animate`

Zcela obecný prvek, použitelný k animaci všech číselných hodnot. V dalších částech poznáte specializovanější elementy, určené třeba jen a pouze k animaci pohybu…

Pomocí jednoho animačního prvku lze měnit v čase právě jeden atribut. Ne všechny atributy a ne všechny elementy mohou být zapojeny do deklarativních animací. Nebojte se ale, většinou bude vše velmi intuitivní a případné nejasnosti si můžete ověřit v tabulkových přehledech normy SVG.

Element `set`

Tento prvek provádí přesně to, co naznačuje jeho anglický význam – nastaví daný atribut na danou hodnotu v přesně definovaný časový úsek. Využijete ho většinou při operacích s dvoustavovými proměnnými, například typu viditelnost (skryj či ukaž nějaký prvek) nebo změna textu. Tento animační prvek logicky nemůže pracovat aditivně ani kumulativně.

Atribut „to“ určí hodnotu, která bude nastavena po dobu trvání animace.

Element `animateColor`

Atributy „from“, „by“ a „to“ v tomto případě samozřejmě specifikují hodnoty barev, přičemž je několik povolených způsobů zápisu – analogicky, tak jak je zapisujete když definujete barvy výplní a tahů. Do hry vstupuje též atribut „color-interpolation“ popsaný již dříve v části o vyplňování.

Element `animateTransform` – dynamické 2D transformace

Tento prvek umožňuje animovat transformační atributy normy SVG. A ty dovolují elegantně uskutečnit naprosto libovolné polohové transformace, změnu měřítka, zkosení…

Atributy elementu animateTransform:

attributeName – tento atribut bude vždy nastaven takto: attributeName="transform"
type – určení typu transformace
from, by, to – protože většina transformačních operací má více než jeden parametr, budou v tomto případě obsahem těchto atributů všechny požadované hodnoty. Například rotace s počátečním úhlem 30 stupňů a středem otáčení v bodě [25,25] se zapíše takto:
<animateTransform attributeName=“transform“ type=“rotate“
                  from=“30,25,25″ to=“90,65,65″
                  begin=“click“ dur=“9s“
                  additive=“sum“ fill=“freeze“ />

Typy transformací (hodnoty v hranatých závorkách jsou nepovinné, volitelné podle typu požadované transformace):

„translate“ – posun_x [,posun_y]
„scale“ – měřítko_x [,měřítko_y] – zapíše-li se zde pouze jedna hodnota, bude použita pro změnu měřítka v obou souřadnicových osách, jinak bude násobení pro každou osu rozdílné
„rotate“ – úhel [střed_x střed_y] – pozor, neuvede-li se na tomto místě střed otáčení, bude se dotyčný objekt otáčet nikoli okolo své osy, ale okolo bodu se souřadnicemi (0,0)
„skewX“, „skewY“ – úhel zkosení

Příklad použití animačních elementů

Praktické demonstrace kombinování animačních prvků na pohyblivých objektech a na textuře:

<?xml version=“1.0″ encoding=“UTF-8″?>
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1 Basic//EN“
„http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd“>
<svg xmlns=“http://www.w3.org/2000/svg“
     xmlns:xlink=“http://www.w3.org/1999/xlink“
     viewBox=“0 0 480 240″ width=“240px“
     version=“1.1″ baseProfile=“basic“>
<title>9.7.2 Animace</title>
<desc>
  Priklad animuje transformaci vyplnoveho vzoru
  a ukazuje jak snadno muzete v SVG vyrobit
  i relativne slozite graficke hracky.
</desc>
  <!– definice textury slozene ze 4 ctvercu –>
  <!– navic zdeformovanych transformacnim atr. –>
  <pattern patternUnits=“userSpaceOnUse“ id=“Pat3″
           x=“0″ y=“0″ width=“20″ height=“20″
           patternTransform=“translate(25 215) scale(2) skewX(45)“>
    <rect x=“0″ y=“0″ width=“10″ height=“10″ fill=“red“/>
    <rect x=“10″ y=“0″ width=“10″ height=“10″ fill=“green“/>
    <rect x=“0″ y=“10″ width=“10″ height=“10″ fill=“blue“/>
    <rect x=“10″ y=“10″ width=“10″ height=“10″ fill=“yellow“/>
    <!– toto vytvari dojem nekonecneho beziciho pasu –>
    <animateTransform attributeName=“patternTransform“
      type=“translate“ from=“0,0″ to=“40,0″ dur=“1s“
      fill=“freeze“ additive=“sum“ repeatCount=“indefinite“ />
  </pattern>
  <!– textura se aplikuje na objekty –>
  <rect x=“20″ y=“30″ width=“440″ height=“50″ fill=“url(#Pat3)“/>
  <circle cx=“400″ cy=“120″ r=“40″ fill=“url(#Pat3)“ />
  <rect x=“20″ y=“100″ width=“100″ height=“50″ fill=“url(#Pat3)“>
    <!– vytvari efekt smrstovani a natahovani –>
    <animateTransform attributeName=“transform“
      type=“scale“ values=“1,1;3,1;1,1″ keyTimes=“0 85% 1″ dur=“8s“
      fill=“freeze“ additive=“sum“ repeatCount=“indefinite“ />
  </rect>
  <text font-family=“Helvetica“ font-size=“32″ x=“20″ y=“220″>
    Vzorky jsou animovany.
  </text>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“478″ height=“238″
      fill=“none“ stroke-width=“2″ stroke=“blue“ />
</svg>

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

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

Předchozí článek SMIL - animace a prezentační efekty

Další článek Zaklínadla na spam

Martin Hejral

Mohlo by vás také zajímat

Jak začít s programováním: Tipy pro úspěšný vstup do světa programování

4. ledna 2024

•

Vojtěch Tomášek
10 nejpopulárnějších programovacích jazyků a jejich využití

9. listopadu 2023

•

Vojtěch Tomášek
Netcat a Ncat

8. prosince 2022

•

Zbyněk Výboh
Optimalizace a zlepšení výkonu kódu: tipy a triky

14. srpna 2023

•

Tomáš Procházka

Nejnovější

Představení designového (UX) procesu: Co je to model Double Diamond?

17. dubna 2024

•

Jessica Nováková
Nepodceňte UX na vašem webu: Proč na něm záleží?

10. dubna 2024

•

Jessica Nováková
WOLED vs. QD-OLED: Potřeba nových metrik pro měření jasu (část 2)

5. dubna 2024

•

Vojtěch Tomášek
WOLED vs. QD-OLED: Potřeba nových metrik pro měření jasu (část 1)

2. dubna 2024

•

Vojtěch Tomášek

Kurz SVG – není to Flash a přece se točí!

Obsah

Související