Podívejte se do animace škálovatelné vektorové grafiky (SVG)

Dnes budeme pokračovat v diskusi Škálovatelná vektorová grafika (SVG), a tentokrát budeme spolupracovat SVG animace. Nebojte se však, SVG animace je poměrně snadná a vlastně v tomto příspěvku začneme od základů.

Základní implementace

Animace v SVG může být provedena přes živel;

Jak je vidět z útržku kódu výše, přidáme uvnitř prvek, který bude ovlivněn. Tento obsahuje některé z následujících atributů;

attributeName: Tento atribut určuje, který atribut prvku bude ovlivněn animací.

z: Tento atribut je nepovinný, můžeme zadat přesnou hodnotu nebo nechat ji začít od místa, kde byl.

na: Tento atribut určuje směr animace. V závislosti na zadané hodnotě v attributeName, výsledky se mohou lišit. Ale v tomto příkladu to rozšíří výška.

dur: Tento atribut určuje dobu trvání animace. Hodnota tohoto atributu je vyjádřena v Syntaxi hodinové hodnoty. Například, 02:33 představuje 2 minuty a 33 sekund, zatímco 3h je rovna 3 hodinám, ale nepotřebujeme to tak dlouho, takže jsme zadali délku trvání pro just 3s nebo 3 sekundy;

Totéž platí ale tentokrát cílíme na atribut poloměru kruhu (r).

• Základní implementační demo

Pohyblivý Prvek

V pohybujících se prvcích SVG potřebujeme pouze cílit souřadnici prvku X a y;

Ve výše uvedeném příkladu přesuneme obdélník z 0 na 200 za 3 sekundy se obdélník bude pohybovat vodorovně zleva doprava. Pokud se také pozorně podíváte, přidali jsme také další atribut prvek, jmenovitě vyplnit.

vyplnit atribut zde nemá nic společného s barvou pozadí jako v ostatních prvcích SVG. Tento atribut určuje, jak bude animace fungovat po skončení trvání. V tomto příkladu jsme zmrazit tak, aby zůstal tam, kde animace končí.

Funguje to podobně jako elementu, můžeme použít cx nebo cy, jako tak:

• Demonstrace pohyblivého prvku

Animovat více atributů

Zatím se zaměřujeme pouze na jeden atribut, který má být animován, ale je také možné animovat více než jeden atribut najednou. Níže uvedený příklad ukazuje, jak to děláme:

Jak vidíte, funguje to podobně, teprve teď máme dva prvky uvnitř cílit poloměr a šířka zdvihu ovlivněn.

• Demo více atributů

Po cestě

V našem předchozím příspěvku Práce s textem v SVG, ukázali jsme vám, jak text převést na cestu. Je také možné udělat totéž v SVG animace, můžeme animovat prvek, který následuje cestu. Zde je příklad.

Cesta je lépe definována v rámci a jako na obrázku výše. Aby element mohl sledovat cestu, musíme definovat animaci pomocí a propojit cestu id s následující prvek;

To je ono, teď to uvidíme v akci;

• Sledování trasy

Transformace

Můžeme také použít transformaci stupnice, přeložit a točit se pro animaci, a tak učiníme ;

Transformace v SVG sdílejí podobné principy s CSS3 a my jsme se o tom do značné míry zabývali v našem předchozím příspěvku o CSS3 2D Transformation.

• Transformační demo

Závěrečné myšlenky

V závislosti na vaší znalosti o SVG animaci můžete vytvořit něco takového.

Jednou z výhod používání animace SVG přes Flash Animation je, že se nespoléhá na práci s pluginy třetích stran a je také podstatně rychlejší než Flash. Poté, co Adobe zastavil svou podporu Flash v Android, možná budete chtít začít vyzkoušet tento přístup, aby sloužil animaci na vašem dalším webu.

Další odkazy

• Dokumentace SVG Animate
• Pokročilé SVG animační techniky

• Zobrazit ukázku
• Stáhněte si zdroj