Pozrite sa do animovanej grafiky vektorovej grafiky (SVG)

Dnes budeme pokračovať v našej diskusii Škálovateľná vektorová grafika (SVG), a tentokrát budeme pracovať s SVG Animácia. Nebojte sa však, SVG Animácia je pomerne jednoduchá a vlastne v tomto príspevku začneme od základov.

Základná implementácia

Animáciu v SVG môžete vykonať cez element;

Ako vidíte z útržku kódu, pridáme ho vnútri prvok, ktorý sa bude týkať. toto obsahuje niektoré z nasledujúcich atribútov;

attributeName: Tento atribút určuje atribút prvku, ktorý bude ovplyvnený v animácii.

z: Tento atribút je nepovinný, môžeme špecifikovať presnú hodnotu alebo ho nechať, aby to začalo odkiaľ to bolo.

na: Tento atribút špecifikuje smer animácie. V závislosti od zadanej hodnoty v attributeName, výsledky sa môžu líšiť. Ale v tomto príklade rozšíri výška.

dur: Tento atribút špecifikuje trvanie animácie. Hodnota tohto atribútu je vyjadrená v Syntaxe hodnôt hodín. Napríklad, 02:33 predstavuje 2 minúty a 33 sekúnd, zatiaľ čo 3h sa rovná 3 hodinám, ale tak dlho nepotrebujeme, takže sme určili trvanie práve 3s alebo 3 sekundy;

To isté platí prvok, ale tentoraz sme zacielili atribút polomeru kruhu (r).

• Základná implementačná demo

Pohyblivý prvok

Pri presúvaní prvkov SVG musíme zacieliť len súradnicu elementu X a y;

V príklade vyššie presunieme obdĺžnik z 0 na 200 za 3 sekundy sa obdĺžnik objaví v horizontálnom smere zľava doprava. Ak sa pozriete pozorne, pridali sme aj ďalší atribút prvok, menovite vyplniť.

vyplniť atribút tu nemá nič spoločné s farbou pozadia ako v ostatných prvkoch SVG. Tento atribút určuje, ako bude animácia fungovať po skončení trvania. V tomto príklade sme my zmraziť postihnutého prvku, takže zostane, kde animácia skončí.

Pracuje tiež podobne ako prvok, môžeme použiť cx alebo cy, ako:

• Demo pohyblivého elementu

Animácia viacerých atribútov

Zatiaľ sa zameriavame iba na jeden atribút, ktorý sa má animovať, ale je tiež možné animovať viac ako jeden atribút naraz. Nižšie uvedený príklad ukazuje, ako to robíme:

Ako môžete vidieť, funguje to podobne, až teraz máme dve prvky vo vnútri na zacielenie na polomer a šírka ťahu byť ovplyvnené.

• Viacnásobné atribúty

Po ceste

V našom predchádzajúcom príspevku Práca s textom v SVG, ukázali sme vám, ako prúdiť text do cesty. Je tiež možné urobiť to isté SVG Animácia, môžeme animovať prvok, ktorý bude nasledovať cestu. Tu je príklad.

Cesta je lepšie definovaná v rámci a element, ako je uvedené vyššie. Aby prvok mohol sledovať cestu, musíme definovať animáciu pomocou a prepojiť cestu id s prvok;

To je všetko, teraz to uvidíme v akcii;

• Nasledujúca demoverzia trasy

transformácia

Môžeme použiť aj transformáciu mierka, preložiť a točiť sa pre animáciu, a to budeme používať ;

Transformácie v SVG zdieľajú podobné princípy s CSS3 a my sme sa o ňom dostali docela komplexne v našom predchádzajúcom príspevku o CSS3 2D Transformation.

• Transformačná demo

Záverečné myšlienky

V závislosti od vašej znalosti SVG Animation môžete vytvoriť niečo také.

Jednou z výhod použitia animácie SVG cez Flash Animation je to, že sa nespolieha na fungovanie doplnkov tretích strán a je to tiež oveľa rýchlejšie ako Flash. Po tom, čo spoločnosť Adobe zastavila svoju podporu vo formáte Flash v systéme Android, možno budete chcieť začať skúšať tento prístup na zobrazovanie animácie na ďalšej webovej stránke.

Ďalšie odkazy

• SVG Animate Documentation
• Pokročilé techniky animácie SVG

• Zobraziť demo
• Stiahnuť zdroj