Kurz SVG – animace (dynamika změny hodnot)

Máte před sebou další důležitý článek o animování vektorové grafiky v 2D prostoru pomocí formátu SVG, rozebírající řízení dynamiky změn hodnot různých prvků.

Ovládání dynamiky změny hodnot

Dynamika – způsob jak se mění animované hodnoty. I když se velmi často vůbec nebudete muset tímto problémem zaobírat, později, zvláště při modelování realistického pohybu, dojdete k potřebě jemnějšího ovládání rychlosti a zrychlení objektu.

Atribut calcMode – nepovinný atribut určující způsob interpolace hodnot, možné hodnoty jsou:

• discrete – skoková změna hodnoty mezi definovanými klíčovými body animace (vyzkoušejte si názornou demonstraci, zdroj: Adobe).
• linear – aktuální hodnota je v každém okamžiku určena jednoduchou lineární interpolací mezi dvěma definovanými klíčovými body animace (výchozí hodnota).
• paced – konstantní krok (rychlost) po celou dobu trvání animace. Způsob jen zdánlivě shodný s předcházejícím bodem se uplatní pouze pro případy, kdy lze mezi klíčovými body měřit vzdálenost (v matematickém, nejen fyzikálním smyslu). Pokud je nastaven typ „paced“, budou ignorovány atributy keyTimes a keySplines. Tato metoda je výchozí pro prvky animateMotion. K lepšímu pochopení vám může dobře posloužit druhý nebo čtvrtý příklad z předchozího článku (nebojte se změnit typ interpolace a vyzkoušet v ASV).
• spline – časový průběh hodnot je definován pomocí kubické Bézierovy křivky.

Atribut values – seznam hodnot, kterých bude animace postupně nabývat, přičemž jednotlivé animační kroky jsou odděleny středníky. Pokud je tento seznam použit, způsobí ignorování atributů from, to a by – v tomto případě rovněž velice doporučuji přebytečné parametry vůbec neuvádět, aby nedocházelo k nějakým přehmatům.

Atribut keyTimes – seznam časů oddělených středníky umožňuje měnit rychlost změny v průběhu animace. Atribut musí být vždy použit ve spojení s hodnotami values, přičemž každá hodnota ze seznamu values má přiřazen svůj klíčový čas uvedený jako desetinné číslo v rozsahu od 0 (počátek animace) do 1 (konec). A tribut je ignorován, pokud je současně nastaven calcMode="paced".

Atribut keySplines – jejich funkce je doplňková k atributu keyTimes (proto musí být nastaveny oba seznamy současně), s jediným rozdílem, že v seznamu nejsou klíčové časy, nýbrž sady čtyř řídicích bodů x1 y1 x2 y2 v rozsahu 0 až 1, které pomocí kubických Bézierových křivek určují dynamiku změny hodnot mezi dvěma klíčovými časy – proto také tento seznam bude vždy o jednu sadu hodnot kratší než oba předcházející. Pokud není současně nastaven calcMode="spline", je atribut ignorován.

Pro pochopení funkce keySplines je třeba si představit souřadnici x jako časovou osu pro daný úsek animace a y pak jako osu pro výslednou hodnotu animace, přitom y=0 odpovídá počáteční hodnotě animované hodnoty a y=1 je konečná hodnota.

Příklad:

<animate dur=“5s“ attributeName=“cy“
      values=“0;10″ keyTimes=“0;1″
      calcMode=“spline“ keySplines=“0 0 1 1″ />
<animate dur=“5s“ attributeName=“cy“
      values=“0;10″ keyTimes=“0;1″
      calcMode=“spline“ keySplines=“.5 0 .5 1″ />
<animate dur=“5s“ attributeName=“cy“
      values=“0;10″ keyTimes=“0;1″
      calcMode=“spline“ keySplines=“0 .75 .25 1″ />
<animate dur=“5s“ attributeName=“cy“
      values=“0;10″ keyTimes=“0;1″
      calcMode=“spline“ keySplines=“1 0 .25 .25″ />

Tento pohyblivý SVG obrázek (zdroj: Adobe) ilustruje efekt keySplines pro čtyři hodnoty nastavení, uvedené v předcházejícím rámečku.

Element AnimateMotion

Pohyb po předdefinované dvourozměrné křivce.

Atributy:

• calcMode – možné hodnoty: discrete, linear, paced, spline – popis viz výše.
• path – prvek obsahuje data pro vektorovou cestu určující pohyb animovaného objektu, „motion path“ se zapisuje zcela stejně jak již dříve vysvětlený atribut „d“ v prvku path.
• keyPoints – obsahuje středníky oddělený seznam desetinných čísel (klíčových bodů) v rozsahu od 0 do 1 a určuje, jak daleko na cestě se má pohybující se objekt nacházet v příslušném čase, uloženém v seznamu klíčových bodů animace keyTimes, viz výše.
• rotate – určuje způsob natáčení objektu ve vztahu k cestě po které se pohybuje:
  • auto – objekt se natáčí ve směru tečny pohybové křivky (tedy v již zmíněném příkladu s autem animovaným na silnici v pohledu shora se bude automobil správně otáčet přídí ve směru jízdy)
  • auto-reverse – stejně jako „auto“, ale objekt je navíc otočen o 180 stupňů
  • „úhlová_hodnota“ – pokud zadáte úhel měřený od osy x, animovaný objekt bude stále zachovávat toto natočení; výchozí hodnota je 0

Animaci podél Möbiovy křivky a různá nastavení „rotate“ ukazuje tento SVG kód:

<svg width=“320″ height=“240″ viewBox=“0 0 400 300″>
<title>
9.10 Ukazuje funkci ‚animateMotion‘ a atr. ‚rotate‘
</title>
<defs>
  <desc>
    Diky pouziti teto cesty jako knihovniho symbolu
    v prvcich ‚use‘ a ‚mpath‘ lze usetrit velmi
    dlouhy kod, jelikoz cesty nakreslene v graf.
    programech mohou obsahovat mnoho bodu.
  </desc>
  <path id=“cesta1″ style=“fill:none; stroke:silver;
    stroke-width:2; stroke-dasharray:4,4;“
     d=“M115.015,88.229c85.714,0,85.714,125,
       171.429,125c85.714,0,85.714-125,0-125
       c-85.715,0-85.715,125-171.429,125
       c-85.715,0-85.715-125,0-125z“/>
</defs>
<g id=“platno“>
  <path style=“fill:none;stroke:blue;“
    d=“M399,299h-398v-298h398v298z“/>
</g>
<use xlink:href=“#cesta1″/>
<text style=“fill:red;font-size:24;“>
  auto
  <animateMotion dur=“5s“ repeatCount=“indefinite“
      rotate=“auto-reverse“>
    <mpath xlink:href=“#cesta1″/>
  </animateMotion>
</text>
<text style=“fill:purple;font-size:24;“>
  45st
  <animateMotion dur=“5s“ repeatCount=“indefinite“
      rotate=“45″>
    <mpath xlink:href=“#cesta1″/>
  </animateMotion>
</text>
</svg>

Směr pohybu lze zadávat i jednodušeji, pomocí obligátních atributů „from“, „by“, „to“, jejich hodnoty jsou v tomto případě tvořeny páry hodnot oddělených mezerou nebo čárkou, například from="33,15". Další možnost pomocí již známého atributu „values“ může vypadat nějak takto values="10,20;30,20;30,40" nebo values="10mm,20mm;30mm,20mm;30mm,40mm".

I když teoreticky mohou být nastaveny „values“ současně s „keyPoints“ nebo dokonce i s „from/by/to“, silně nedoporučuji jakékoli duplicitní definice – nejen, že to zbytečně zvětšuje výsledný soubor, ale snadno to může vést k zákeřným omylům při editaci.

Alternativní definice pohybové křivky – mpath

Tento prvek musí být vnořen uvnitř elementu animateMotion.

Atributy:

• xlink:href – URI odkaz na prvek path, pokud je tento odkaz definován, má přednost před atributem path v rodičovském elementu animateMotion.

Vzdálenost podél cesty

Nejenom při pohybu po křivce, ale i při některých dalších grafických operacích (jako třeba umísťování textu na křivku) je potřeba vypočítat délku měřenou podél konkrétní křivky. Matematická věda to samozřejmě umí, ale jelikož se v žádném případě nejedná o jednoduché výpočty, norma nenutí prohlížeče implementovat absolutně přesné řešení.

Místo toho je nabídnuta alternativní možnost použít dodatečný atribut „pathLength“, ve kterém autor prohlížeči sdělí skutečnou délku dotyčné křivky, která pak bude zpětně prohlížečem použita pro umísťování objektů podél křivky. Použitím tohoto atributu by se měly zcela eliminovat možné drobné rozdíly mezi prohlížeči od různých výrobců.

Kreslicí příkazy „moveto“ mají pro účely výpočtu délky křivky délku 0!

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

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