Kurz SVG – animace (časování)

V předchozím článku jsme se začali věnovat deklarativním animacím. V tomto se naučíme řídit spouštění a opakování animací, které jsou jistě jednou z nejpřitažlivějších oblastí 2D grafiky. Na animačních prvcích SVG-SMIL je kouzelná „vrozená“ schopnost reagovat na většinu událostí z uživatelského rozhraní počítače (mobilu) jen s použitím vlastních prostředků, bez dodatečného skriptování… Ale pokud umíte JavaScript, můžete jej samozřejmě použít též.

Atributy pro řízení časového průběhu animací

Možností, jak řídit časování animací, je v SVG tolik a jsou natolik propracované, že jim musíme věnovat celý článek. I když, chtěl-li bych být důsledně systematický, patřil by tento text do bloku, obsahujícího atributy společné všem animačním prvkům.

Atribut begin

Atribut „begin“ definuje počátek animace (norma to někdy nazývá též „aktivace animačního elementu“). Může obsahovat celý seznam možných hodnot navzájem oddělených středníky, z čehož plyne, že jedna animace může být spouštěna ne jednou, nýbrž několika různými akcemi a událostmi:

• offset-value – čas vyjádřený v sekundách, zjednodušeně můžeme říci, že „0s“ je čas načtení SVG dokumentu (pokud vás zajímají detaily, najdete je ve specifikaci SMIL)
• syncbase-value – tento typ hodnot umožňuje synchronizovat animaci s počátkem či koncem jiné animace, zapíše se jako „id“ synchronní animace, následované tečkou a klíčových slůvkem „begin“ či „end“, například begin="id_jine_animace.end", navíc je možné přidat časový posun, například begin="id_jine_animace.start+3s" (posun obdobně funguje i v následujících třech bodech)
• event-value – tento typ je velmi podobný předcházejícímu a umožní reagovat na všechny možné události (events) – ano, z HTML důvěrné známé hodnoty typu „click“ nebo „mouseover“ plus nějaké SVG specialitky – kompletní výpis najdete v normě SVG, příklad: begin="id_jine_animace.repeatEvent"
• repeat-value – analogický k dvěma předcházejícím, ale umožní reakci na určitý počet opakovaných spuštění nějaké cyklické animace, například begin="id_cyklicke_animace.repeat(5)"
• accessKey-value – dává možnost reagovat na stisk klávesy, například begin="id_animace.accessKey('x')"
• wallclock-sync-value – spuštění v přesně definovaný reálný čas, jako třeba 12.00 hod. v poledne a podobně (viz ISO8601)
• indefinite – zajímavé postavení má tato hodnota, která, je-li uvedena v seznamu startovacích hodnot, umožní spouštět danou animaci buď voláním funkce „beginElement()“ anebo klepnutím na hyperlink zacílený na daný animační prvek

Zde se podívejte jak může kód vypadat v praxi (test v SVG prohlížeči):

<?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.8.1 Animace spoustena hyperlinkem</title>
<desc>
  Animaci lze spustit zcela elegantne
  pouhym prostym odkazem na ni. Dale
  se predvadi moznost navazat casovani
  jedne animace na prubeh druhe.
</desc>
<!– povsimnete si nastaveni startu animaci –>
<rect x=“20″ y=“20″
      width=“180″ height=“180″ fill=“white“>
<animate id=“fadein“ attributeName=“fill“
        attributeType=“auto“ from=“white“ to=“orange“
        begin=“indefinite“ dur=“3s“ fill=“freeze“/>
<animate id=“fadeout“ attributeName=“fill“
        attributeType=“auto“ from=“orange“ to=“white“
        begin=“indefinite“ dur=“3s“ fill=“freeze“/>
</rect>
<!– zde start zavisi pocatku animace ‚fadein‘ –>
<circle stroke=“white“ stroke-width=“20″ fill=“none“
        cx=“200″ cy=“110″ r=“80″>
<animate id=“fadein3″ attributeName=“stroke“
        attributeType=“auto“ from=“white“ to=“silver“
        begin=“fadein.begin+5″ dur=“3s“ fill=“freeze“/>
<animate id=“fadeout3″ attributeName=“stroke“
        attributeType=“auto“ from=“silver“ to=“white“
        begin=“fadeout.begin“ dur=“3s“ fill=“freeze“/>
</circle>
<!– tlacitka v prave casti –>
<g id=“buttons“>
  <desc>Ovladaci tlacitka animace</desc>
  <a xlink:href=“#fadein“>
    <rect x=“320″ y=“0″
          width=“160″ height=“180″ fill=“green“/>
    <text fill=“white“ font-size=“30″
          font-weight=“bold“ x=“330″ y=“90″>
      Fade in
    </text>
  </a>
  <a xlink:href=“#fadeout“>
    <rect x=“320″ y=“180″
          width=“160″ height=“180″ fill=“red“/>
    <text fill=“white“ font-size=“30″
          font-weight=“bold“ x=“330″ y=“280″>
      Fade out
    </text>
  </a>
</g>
<!– obrys platna –>
<rect x=“1″ y=“1″ width=“478″ height=“358″
      fill=“none“ stroke-width=“2″ stroke=“blue“/>
</svg>

Při spouštění pomocí hyperlinkových odkazů upozorňuji na drobnost, která je dána normou SMIL a napoprvé může autora SVG-SMIL dokumentu trochu zaskočit. K vyvolání efektu proveďte přesně následující úkony – klepněte na „Fade-in“, poté na „Fade-out“ a znovu na „Fade-in“. Po druhém klepnutí na tlačítko „Fade-in“ sice proběhne předpokládaná nastavená akce, ale poté dojde k „samovolnému“ návratu k výchozímu stavu. Toto chování není chybou SVG přehrávače, nýbrž jsou jeho důvodem pravidla pro chování hyperlinků definovaná ve specifikaci SMIL. Tam vás též prozatím odkazuji, pokud chcete znát detaily.

Atribut dur

Atribut „dur“ určuje dobu trvání animace (například 12min). Hodnota „indefinite“ znamená nekonečně dlouho.

Atribut end

Atribut „end“ určuje čas ukončení animace. Způsoby definování jsou v podstatě shodné s těmi pro startování, jen funkce JavaScriptu ukončující animaci se pochopitelně jmenuje „endElement()“.

Atribut restart

Atribut „restart“ určuje, zda je animaci možno „restartovat“, tedy spustit znovu od začátku. Možné hodnoty jsou:

• always – restart je možný kdykoli (výchozí hodnota)
• whenNotActive – restartovat lze, pokud animace není aktivní (neběží)
• never – restart není možný

Atribut repeatCount

Atribut „repeatCount“ určuje počet opakování animace, hodnota „indefinite“ značí nekonečno. zajímavé přitom je, že počet opakování může být desetinné číslo a poslední cyklus tudíž nemusí proběhnout celý!

Atribut repeatDur

Atribut „repeatDur“ určuje dobu, po kterou se má základní cyklus animace opakovat. Hodnota „indefinite“ opět značí nekonečně dlouho.

Příklady zápisu časových údajů podle SMIL

Není-li u hodnoty udávající délku časového intervalu jednotka, prohlížeč údaj považuje za sekundy.

plný tvar:
  02:30:03
  50:00:10.25 = 50h, 10s a 250ms
zkrácený tvar:
  00:10.5
  02:33 = 0h, 2m a 33s
délka intervalu:
  3.2h
  45min
  30s
  5ms
  12.467 = 12s a 467ms