SVG tvůrce

stručný průvodce SVG grafikou

Animace

SVG s sebou přináší i animační možnosti. Animace realizujeme nejčastěji za pomocí elementu <animate>, který se ve zdrojovém kódu vnořuje dovnitř elementu, jenž chceme animovat. Principem animací je postupná změna hodnoty námi vybraného atributu v zadaném rozsahu. Elementů animate může být vnořeno do daného objektu i více, tudíž lze animovat hodnoty ve více atributech najednou. Každým elementem animate ovládáme jen jeden atribut.

Element <animate> má několik atributů. Jimi určíme co budeme animovat a v jakém rozsahu hodnot, kdy animace začne a co se stane když skončí. Co se bude animovat určíme atributem attributeName, který bude obsahovat název atributu, jehož hodnota se bude postupně měnit (např. width, height, r...). Jaká bude hodnota atributu na začátku a na konci animace a tedy v jakém rozmezí se bude jeho hodnota měnit, to stanovujeme dvěma atributy from a to. From obsahuje počáteční a to koncovou hodnotu. Do atributu begin se vkládá informace o tom, kdy má animace začít. Možnosti určení začátku animace jsou vcelku bohaté, proto si jej později rozebereme podrobněji. Dalším atributem je fill. Jím je dáno, co se stane v okamžiku skončení animace. Zde jsou možné jen dvě varianty a to freeze (obraz bude v poslední poloze zachován), a remove (obraz se vrátí do podoby jakou měl před začátkem animace). To jak dlouho bude animace probíhat stanovíme atributem dur (duration). Četné možnosti zápisu časových údajů budou popsány později. Není-li uvedeno jinak, animace po načtení dokumentu proběhne jen jednou. Pokud požadujeme, aby se opakovala, je třeba využít možností atributu repeatCount. Do něj zadáme číslo vyjadřující počet zopakování animace. Jestliže je naším cílem nekonečně se opakující animace, musíme do tohoto atributu zapsat slovo indefinite.

Použití atributu begin - zápis hodnot

Jak už bylo řečeno výše, atributem begin určíme okamžik začátku animace. Začátkem může být zadaný čas, ale také událost, která na objektu proběhne, např. click. V případě, že bychom zvolili zmíněný click, animace se rozeběhne ihned po kliknutí myší na objektu. Velice přínosné je, že časová data a události můžeme i kombinovat. Pokud tedy kupříkladu bude hodnota atributu begin="click+5s" , animace se spustí pět sekund po kliknutí myší na objekt. Časové údaje můžeme zapsat velice rozmanitým způsobem. Možno je uvádět v sekundách (5s) minutách (5min), milisekundách (500ms), i hodinách (02:30:00), čas se začíná počítat od okamžiku načtení obrázku. Kombinovat čas a události můžeme ještě jinak. Pokud třeba požadujeme, aby animace začala 10 sekund po načtení dokumentu a také i po přejetí myši, oddělíme od sebe oba "spouštěče" animace středníkem. Zápis pak bude mít například takovouto podobu : begin="10s;mouseover".

Ještě bohatší možnosti použití atributu begin se nám otevřou, pokud máme do grafického objektu vnořeno více elementů <animate>. Pak může být čas začátku jedné animace závislý na stavu průběhu druhé animace. Lze pak například nadefinovat, že se animace rozeběhne přesně v okamžiku, kdy jiná animace skončí. Dokonce je možné vytvořit i uzavřenou smyčku, kdy se skupina po sobě jdoucích animací bude opakovat stále dokola. K tomu abychom mohli vytvořit závislost jedné animace na druhé, je nezbytné jim přiřadit atribut id, na který se pak budeme odkazovat. Například zápis begin="prvni.end" zajistí, že se animace spustí přesně v čase, kdy skončí animace s atributem id="prvni"

Čas (pouze čas) můžeme zapisovat ve stejné podobě i v případě atributu dur.

Následující tabulka ukazuje příklady různých hodnot atributu begin

Příklady zápisu hodnot atributu begin
zápispopis
1sanimace se spustí 1 sekundu od načtení obrázku
clickanimace se spustí kliknutím na objekt
click+5sanimace se spustí pět sekund po kliknutí myší na objekt
10s;mouseoveranimace se spustí 10 sekund po načtení obrázku nebo přejetím myši nad objektem
prvni.endanimace se spustí v okamžiku, kdy skončí animace a atributem id="prvni"

A nyní se již podívejme na příklady jednoduchých animací. Na obrázku níže je vykreslen kruh, který poté co na něj klikneme, začne zmenšovat svůj průměr až se zcela ztratí. Animační efekt je způsoben postupným snižovaním hodnoty atributu r, která u kruhu určuje jeho průměr. Hodnota se snižuje z padesáti na nulu, což nakonec vyústí v to, že kruh z obrazu zcela vymizí. Délka celé animace je stanovena na 5 sekund.

alternativni

Takto vypadá zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="80px" cy="80px" r="50px" fill="blue" stroke="black"> <animate begin="click" attributeName="r" dur="5s" from="50" to="0" fill="freeze" /> </circle> </svg>

Další obrázek demonstruje použití více elementů animate v jednom grafickém objektu. Příklad je podobný tomu předchozímu, jen s tím rozdílem, že kruh se po vymizení z obrazu opět objeví a vrátí svůj průměr na původní hodnotu. Právě návrat do původního stavu zajištuje druhý element animate, který spustí animaci zvětšující průměr kruhu za dvě sekundy po kliknutí, tedy právě v okamžiku, kdy skončí první animace.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="80px" cy="80px" r="50px" fill="blue" stroke="black"> <animate begin="click" attributeName="r" dur="2s" from="50" to="0" fill="freeze" /> <animate begin="click+2s" attributeName="r" dur="2s" from="0" to="50" fill="freeze" /> </circle> </svg>

Použití několika elementů animate v jednom objektu, kde jsou navíc běhy animací závislé jedna na druhé, ukazuje další obrázek. Podstatou animace jsou opět změny průměru kruhu, kdy první animace řídí zmenšování a druhá animace zvětšování průměru kruhu. V tomto případě je ale čas začátku druhé animace dán časem ukončení první animace. První animace se pak spustí v okamžiku ukončení té druhé, tudíž vzniká uzavřená smyčka. Animace se opakuje stále dokola a vytváří se tím efekt stále pulsujícího kruhu. Celá animace se automaticky spustí 1 sekundu po načtení dokumentu.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="80px" cy="80px" r="50px" fill="goldenrod" stroke="black"> <animate id="prvni" begin="druha.end;1s" attributeName="r" from="50" to="0" dur="2s" fill="freeze" /> <animate id="druha" begin="prvni.end" attributeName="r" from="0" to="50" dur="2s" fill="freeze" /> </circle> </svg>

Ve specifikaci formátu SVG se dočtete, které atributy jsou animovatelné a které nikoli. Jsou též atributy, jenž animovatelné jsou, avšak formát hodnot v těchto atributech je natolik specifický, že musely být vytvořeny pro jejich animaci speciální varianty elementu animate. Jde o elementy <animateColor> a <animateTransform>.

Za pomocí elementu <animateTransform> se animují transformace, tedy všechny změny obrazu vytvářené atributem transform, jako jsou přesuny(translate), rotace(rotate), změny velikosti(scale) či zkosení(skew). Způsob použití elementu <animateTransform> je téměř shodný s elementem <animate>, jen se navíc musí prostřednictvím atributu type vyjádřit druh transformace(translate,rotate,scale,skew). K samotné funkci tohoto druhu animace není potřeba, aby měl animovaný objekt přiřazen atribut transform.

Na obrázku níže vidíte příklad použití elementu <animateTransform>, kdy je animována transformace typu translate, tedy přesun. Animace se rozběhne kliknutím na zelený čtverec.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <rect x="40px" y="40px" width="80px" height="80px" fill="green" stroke="black"> <animateTransform begin="click" attributeName="transform" dur="2s" from="0" to="150" fill="freeze" type="translate" /> </rect> </svg>

Animovaný přechod z jedné barvy do druhé se realizuje pomocí elementu <animateColor>. K určení počáteční a koncové barvy se používají atributy from a to. Zápis barev lze provést s využitím syntaxe CSS (např. rgb(128,64,128)). Prohlížeč Mozilla Firefox má s animací barev problémy a to i ve verzi 10. Obrázek pod odstavcem je příkladem animace přechodu barvy. Kliknutím na kolečko dojde k postupné změně jeho barvy z červené na modrou.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <circle cx="80px" cy="80px" r="50px" fill="red" stroke="black"> <animateColor begin="click" attributeName="fill" dur="2s" from="rgb(255,0,0)" to="rgb(0,0,255)" fill="freeze" /> </circle> </svg>

Primárně pro animaci pohybu objektů po ploše obrázku je určen element <animateMotion>. Při tomto typu animace se grafický objekt pohybuje po dráze, která je cestou (path). Je tedy možno sestavit i poměrně komplikovaný pohyb, kdy se objekt pohybuje po složitých křivkách. U elementu <animateMotion> se celá definice cesty vkládá do atributu path, přičemž musíme pamatovat na to, že souřadnice jsou odvozeny od počáteční polohy animovaného objektu, nikoliv od horního levého rohu obrázku.

Následující obrázek je ukázkou použití elementu <animateMotion>. Drobné modré kolečko se během animace pohybuje po cestě ve tvaru vlnovky. Animace se spustí kliknutím na kolečko.

alternativni

Zdrojový kód obrázku:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- tato cesta jen zviditelnuje trasu pohybu pro funkci animace neni nutna --> <path fill="none" stroke="black" stroke-width="3px" d="M30,50 Q80,100 130,50 T230,50" /> <circle cx="30px" cy="50" r="8px" fill="blue" stroke="black"> <animateMotion begin="click" dur="5s" path="M0,0 Q50,50 100,0 T200,0" /> </circle> </svg>

 

xhtml_valid_icon css_valid_icon
texty, webdesign, programování: Jakub Kosek