Kurz SVG – animace (praktické ukázky)

V této porci SVG naleznete směsici různých vyřešených příkladů animací. Mnoho z nich zcela záměrně vychází z reálných „flashových“ vzorů, přičemž samozřejmě není účelem vykrádat cizí nápady, ale pouze demonstrovat schopnosti SVG formátu.

Pokud je mi znám originální autor SWF souborů, uvádím jej, případně odkaz na originální předlohu. Určitě bych také později chtěl přidat ještě další ukázky.

Následující příklady jsou též jednou z mnoha možných odpovědí na – v diskuzi k předcházejícím článkům této série – opětovně otevíranou otázku: „K čemu že je to (SVG) vlastně dobré?“ Znovu bychom se mohli opakovaně přít třeba na věčně zelené téma: „Proč bychom měli používat SVG, když máme Flash?“ Určitě je pravda, že „Flash je víc než SVG protože je to kompletní aplikační platforma“, jak argumentují někteří příznivci Macromedie. Stejně tak se ale nezměnilo nic na faktu, na který jsem už dříve poukazoval, totiž že 90 % všech aplikací SWF jsou 2D grafické prvky a animace sloužící jako reklamní proužky, atraktivní vstupní sekvence při vstupu na konkrétní web, případně efektní hlavičky a nabídky.

Přitom 2D grafika je přesně to k čemu je SVG určeno. Díky XML podstatě SVG se ale otevírá ještě daleko širší pole pro jeho nasazení. Některé možnosti jsou naznačeny i v textu článku o konferenci SVG Open. V tomto okamžiku mne napadá třeba jedna ze zmíněných možností – jak dochází k implementaci XSLT procesorů v hlavních webových browserech a XML ve všech moderních uživatelských aplikacích, získáváme tím mimo jiné možnost vizuálního zobrazování XML dat (finance, statistické, matematické, chemické…) jen pomocí webového browseru a obecného SVG prohlížeče. Můžete se podívat i na některá funkční řešení na stránkách SVG Open nebo třeba také na Adobe SVG Zone.

Tvrdím tedy, že pro průměrného „kodéra“ webových stránek a vývojáře webových aplikací je daleko snazší začít pracovat s XML-SVG. Využije při tom všechny své tvrdě získané znalosti XML (XHTML), DOM, JavaScriptu, PHP, XSLT a dalších technologií a není nucen opětovně nastudovat novou sumu vědomostí sloužících k dosažení stejného cíle alternativní cestou.

Pozn. aut.: V několika dalších příkladech malinko předbíhám teorii dosud probranou v našem kurzu, zejména atribut values, což je seznam hodnot, kterých bude animace postupně nabývat. Potřebné informace naleznete v následujících článcích.

Rolující pozadí

Tento primitivní příklad vytváří kvazinekonečné rolující pozadí. Vzorem byla ukázka ve formátu SWF, nacházející se v instalaci produktu Macromedia Flash MX.

<svg width=“320″ height=“60″>
<title>a01 – Rolovani nekonecneho pozadi</title>
  <!– orezova cesta –>
  <clipPath id=“clip“>
      <path d=“M320,60H0V0h320V60z“/>
  </clipPath>
  <!– cerne pozadi –>
  <path fill=“black“ stroke=“none“ d=“M320,60H0V0h320V60z“/>
  <!– vnitrni objekty jsou orezany –>
  <g clip-path=“url(#clip)“>
    <g id=“bezici_linka“ fill=“none“ stroke=“white“
       transform=“translate(0 0)“>
    <path d=“M659,53.5c-14.3-7.5-31.1-23-30.7-36.3
          c-11.6,1.2-7.1-8.5-13.6-10.6c-4.2,4.1-12.5,
          13-18.9,15.4c-4.1-2.5-7.7-7-13.9-6.9c-1.2,
          6.2-12.3,17.5-21.7,18.9
          c-7.2,1.1-18.8-0.1-25-2c-6.2-1.9-10-5.7-14.9-8.1
          c-15.6-7.7-32.8,2.6-43.9,9.2c-5.9,3.5-34.2,
          20.3-34.2,20.3s-12.6-12.5-18.5-19.4
          c-5.9-7-10.4-13.9-18.3-19.1c-4,3.4-4.5,11.4-10.1,
          13.7c-7.4,3-9-6-16.6-4.7c-7.8,1.4-10.8,12-18.1,15.1
          c-11.5,5-25.7,2.2-39.1,2″/>
    <path d=“M0,41c13.8,0,28.7,3.2,40.7-2c7.2-3.1,10.2-13.7,18.1-15.1
          c7.5-1.3,9.2,7.7,16.6,4.7c5.6-2.3,6.1-10.3,10.1-13.7c8,
          5.1,12.4,12.1,18.3,19.1c5.9,7,18.5,19.4,18.5,19.4
          s28.3-16.8,34.2-20.3c11.1-6.6,28.3-16.8,43.9-9.2c4.8,
          2.4,8.7,6.2,14.9,8.1c6.2,1.9,17.8,3.1,25,2c9.3-1.4,
          20.5-12.8,21.7-18.9c6.1-0.2,9.7,4.4,13.9,6.9c6.4-2.4,
          14.7-11.3,18.9-15.4c6.5,2.2,2.1,11.8,13.6,10.6c-0.3,
          7.9,5.5,16.5,13.3,23.8″/>
    </g>
  </g>
  <animateTransform xlink:href=“#bezici_linka“
    attributeName=“transform“ type=“translate“
    values=“0 0; -320 0″ dur=“6s“ repeatDur=“indefinite“/>
</svg>

Animace masky

Ještě jednodušší, přesto efektní ukázka využívající animaci pohybu masky aplikované na statický obraz, pocházející z cvičení k Adobe Photoshopu. Upozorňuji – věnujte v SVG prohlížeči speciální pozornost tomu, že takto definovaný animační pohyb neprobíhá konstantní rychlostí!

Náhled animace masky (SVG verze, cca 1 kB)

Ukázka může posloužit i jako školní demonstrace tisíckráte opakovaného faktu o výhodách SVG. Velikost náhledu v podobě animovaného GIFu má okolo 22 kilobytů, řešení v SVG má přesně 755 bytů vlastního kódu a dva přilinkované obrázky 12 a 6 kilobytů. Přitom GIF má pouze čtyři animační fáze a počet barev snížený na 32. Kvalita obrázků v SVG animaci není omezena a počet animačních fází je nekonečný…

<svg width=“200″ height=“280″>
<title>a02 – Animace masky</title>
<!– orezova cesta –>
  <clipPath id=“clip“>
  <circle cx=“90″ cy=“128″ r=“50″>
    <!– animace masky – rychlost neni konstantni –>
    <animate attributeName=“cx“ values=“0;80;55;0″
      dur=“1.5s“ additive=“sum“ repeatDur=“indefinite“/>
    <animate attributeName=“cy“ values=“0;70;100;0″
      dur=“1.5s“ additive=“sum“ repeatDur=“indefinite“/>
  </circle>
  </clipPath>
<!– sede pozadi –>
<image width=“200″ height=“280″ xlink:href=“a02-b.gif“/>
<!– obraz s maskou –>
<image width=“200″ height=“280″ xlink:href=“a02-a.gif“
       clip-path=“url(#clip)“/>
<text x=“10″ y=“20″ font-size=“12″ font-weight=“bold“>
  SVG demo pro Interval.cz
</text>
</svg>

Zooming

Zde animujeme nám již dobře známý atribut viewBox základního prvku svg. Úsilí minimální, výsledek efektní.

<svg width=“320″ height=“200″ viewBox=“0 0 640 400″ >
<title>
  a03 – Animuje se plynule zvetseni pohledu na dokument
</title>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“638″ height=“398″
      fill=“none“ stroke=“blue“/>
<circle cx=“100″ cy=“100″ r=“90″ fill=“red“/>
<text x=“250″ y=“180″ font-size=“22″>
  Efekt ZOOM-IN
</text>
<!– tato cast zustane viditelna po animaci –>
<rect x=“250″ y=“180″ width=“320″ height=“200″ fill=“green“/>
<text x=“260″ y=“200″ fill=“white“>
  Po zvetseni pohledu zustane viditelny zeleny box.
</text>
<animate attributeName=“viewBox“ begin=“1s“ dur=“1s“
         values=“0 0 640 400; 250 180 320 200″ fill=“freeze“/>
</svg>

Animace linek

Tato SVG animace byla vytvořena podle Flash originálu, jehož autora bohužel neznám. Hned na začátku SVG kódu si povšimněte atributu shape-rendering="optimizeSpeed", kterým vypneme antialiasing, nejen kvůli optimalizaci výkonu, ale především proto, aby použité jednobodové čáry nebyly rozmazané. Jedna animovaná linka vypadá takto:

<line id=“l1″ x1=“200″ y1=“1″ x2=“200″ y2=“58″
      fill=“none“ stroke=“#eef“/>
<animateTransform xlink:href=“#l1″
  attributeName=“transform“ type=“translate“
  calcMode=“paced“ values=“0 0; -199 0; 119 0; 0 0″
  dur=“11.1s“ repeatDur=“indefinite“/>

Atribut calcMode="paced" zajistí konstantní rychlost pohybu – porovnejte s animací masky. Příklad také demonstruje použití symbolů. Nadefinoval jsem dva, první se čtyřmi animovanými vertikálními linkami a druhý obdobně pro horizontální efekty. Symboly poté lze jednoduše, elegantně a vícenásobně používat – na jiných pozicích, nebo dokonce různě transformované:

<use xlink:href=“#lll“/>
<use xlink:href=“#lll“ x=“-60″/>
<use xlink:href=“#lll“ transform=“rotate(180 160 29.5)“/>

V souboru Flash je navíc ještě kruhový efekt sledující pohyb myši, k tomu ale budeme už potřebovat JavaScript a postup si předvedeme později.

Animovaný text – typ psací stroj

Tento způsob animace textu má hodně společného s tím, o kterém jsme mluvili jako o „frame-based“. Využit je zatím neprobraný textový prvek <tref xlink:href="#id_jineho_prvku_text"/>, který do místa, kde je zapsán, připojí jiný textový prvek. Jak vidíte, v animacích toho můžete vcelku efektně zneužít.

<svg width=“320px“ height=“100px“>
<title>a05 – Animovany text – typ psaci stroj</title>
<defs>
<!– preddefinovane animacni faze –>
<text id=“p0″> </text>
<text id=“p1″>A</text>
<text id=“p2″>An</text>
<text id=“p3″>Ani</text>
<text id=“p4″>Anim</text>
<text id=“p5″>Anima</text>
<text id=“p6″>Animac</text>
<text id=“p7″>Animace</text>
<text id=“p8″>Animace!</text>
</defs>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“318″ height=“98″
      fill=“none“ stroke=“blue“/>
<!– textovy prvek je prazdny –>
<!– obsahuje jen odkaz na textovy retezec –>
<text x=“10″ y=“75″ style=“font-weight:bold;
font-size:48px; font-family:Helvetica; fill:red;“>
  <tref xlink:href=“#p0″>
    <animate id=“a1″ attributeName=“xlink:href“
      values=“#p0;#p1;#p2;#p3;#p4;#p5;#p6;#p7;#p8″
      dur=“2s“ fill=“freeze“ begin=“go.click“/>
  </tref>
</text>
<!– nasledujici ctverec slouzi jako tlacitko –>
<rect id=“go“ x=“2″ y=“2″
  width=“316″ height=“20″ fill=“black“/>
<text x=“5″ y=“15″ style=“font-weight:bold;
font-size:14px; font-family:Helvetica; fill:white;“>
::startovaci tlacitko::
</text>
</svg>

Demonstrována je též jedna z možností spouštění SVG animací – begin="go.click" – klepnutím na obdélník s id="go". Tento způsob startu ale není zcela ideální pro reálné použití – nápis nereaguje, ukazatel by správně navíc měl měnit tvar, aby uživatel od systému získal jasnou zpětnou vazbu…

Animace textu – další efekty

Jednoduché Adobe demo „Nutty“ ukazuje další efekty, které lze snadno dosáhnout šikovným kombinováním různých polohových transformací.

Obarvený automobil

Vzorem této interaktivní animace je opět příklad programu Macromedia Flash MX, který uživateli dovoluje měnit barvu automobilu.

Náhled animace automobilu (originální SVG, cca 16 kB)

Obrázek auta jsem ve Photoshopu ořezal, poté byl PSD soubor otevřen v Illustratoru a exportován do SVG. Pak jsem ručně dodal animační prvky spouštěné klepnutím na hyperlink. Ty dovolují změnit barvu výplně vektorového objektu, určujícího barvu karoserie:

<a xlink:href=“#ye“ xlink:title=“Klepni pro zmenu barvy“>
  <path fill=“#EDC307″ d=“M45,0v16h16V0H45z“/>
</a>
<set id=“ye“ xlink:href=“#obarvi_to“
  attributeName=“fill“ to=“#dc0″ dur=“indefinite“
  fill=“freeze“ begin=“indefinite“/>

Objekt s id="obarvi_to", kolorizující bitmapové autíčko, využívá speciální rozšíření firmy Adobe: a:adobe-blending-mode="color". Je to jeden z několika různých způsobů prolínání vrstev, zavedený Photoshopem – různé režimy slučování barev hodně rozšiřují vaše kreativní možnosti. V současné době si je můžete vyzkoušet ve všech programech Adobe, přesněji v programech Photoshop 3+, Illustrator 9+ a InDesign 2+.

Elipsoidní animace

Další jednoduché Adobe demo „Circle Animation“. Tento příklad vytvoří úchvatné měňavé poloprůhledné elipsy. Znovu je využito primitivní kombinace elementárních animačních prvků, měnících atributy „transform“ – „rotate“ a „scale“.

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

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