Interval.cz

Kurz SVG - nenφ to Flash a p°ece se toΦφ!

Deklarativnφ animace umo₧≥ujφ velmi snadnΘ animovßnφ grafick²ch objekt∙ bez pou₧itφ skript∙. Tento zp∙sob se oznaΦuje jako "time-based" - m∙₧ete definovat p°esn∞ naΦasovanou zm∞nu vpodstat∞ jakΘhokoli parametru grafiky, poΦφnaje rozm∞ry, polohou a pr∙hlednostφ a₧ t°eba po zm∞nu transformaΦnφch atribut∙. To je hlavnφ rozdφl oproti SWF formßtu, kde se Φasovßnφ animacφ v₧dy odvφjφ od jednotliv²ch klφΦov²ch snφmk∙ - anglicky "frame-based". DalÜφ d∙le₧it² rozdφl je v tom, ₧e jednotlivΘ deklarativnφ animace mohou b²t na sob∞ zcela nezßvislΘ a mφt jinou dobu trvßnφ nebo poΦet opakovßnφ a podobn∞.

Deklarativnφ p°φstup mß takΘ velkou v²hodu ve snadnΘm, p°esn∞ definovanΘm p°enosu animacφ nap°φΦ cel²m spektrem softwarov²ch aplikacφ. AnimaΦnφ prvky SVG byly vyvinuty ve spoluprßci s pracovnφ skupinou W3C Synchronized Multimedia (SYMM), kterß vytvo°ila specifikaci Synchronized Multimedia Integration Language 1.0. Technologie SMIL mß p°itom u₧ dnes pom∞rn∞ silnou podporu v p°ehrßvaΦφch jako QuickTime nebo RealPlayer.

Odkazy v SVG

JeÜt∞ ne₧ se pono°φme do animacφ, povφme si n∞co mßlo o tom, jak v SVG vytvß°et odkazy. Ty jsou toti₧ zßkladem interaktivity. Obdoba hyperlinku znßmΘho z klasickΘho HTML vypadß takto:

VÜechny grafickΘ objekty uvnit° elementu hyperlinku jsou aktivnφ - reagujφ jako odkaz. V uvedenΘm p°φkladu je to Φervenß elipsa.

DalÜφmi mo₧n²mi atributy jsou xlink:title pro pojmenovßnφ odkazu a target pro jmΘno rßmu ve kterΘm se mß otev°φt cφlov² dokument.

SVG mß ve slovnφku i analogii odkazu na konkrΘtnφ prvek ve strßnce. Jeliko₧ se v p°φpad∞ SVG jednß o grafick² objekt - obrßzek, je d∙le₧itΘ mφt mo₧nost adresovat konkrΘtnφ v²°ez kresby, jinak °eΦeno pohled, anglicky "view". V zßsad∞ jsou k dispozici dv∞ mo₧nosti:

Element view

P°ehled atribut∙ elementu:

Animace

KlφΦovΘ pro pochopenφ je slovφΦko deklarativnφ - to znamenß, ₧e tv∙rce animace p°esn∞ definuje (deklaruje), ₧e dan² atribut konkrΘtnφho objektu bude animovßn (Φili jeho hodnota se bude m∞nit) v definovanΘm rozmezφ hodnot v konkrΘtnφm Φase od-do. SVG norma mß obrovskou Ükßlu mo₧nostφ, jak to ud∞lat. Velmi flexibilnφ je i urΦovßnφ Φasu - animace mohou b²t nap°φklad startovßny n∞jakou udßlostφ u₧ivatelskΘho rozhranφ (t°eba "onmouseover") nebo navßzßny na pr∙b∞h n∞jakΘ jinΘ SVG animace. Mo₧nostφ je tolik, ₧e vystaΦφ na n∞kolik Φlßnk∙.

Vztah SVG v∙Φi SMIL

SVG je jazyk odvozen² od W3C normy SMIL ("host language" v terminologii SMIL) a jako takov² tedy obsahuje animaΦnφ prvky v nφ definovanΘ - krom∞ nich ale byly definovßny i n∞kterΘ dalÜφ, aby se dosßhlo pokrytφ celΘ oblasti 2D grafiky.

Prvky definovanΘ ve specifikaci SMIL:

Prvky vztahujφcφ se specißln∞ k SVG animacφm

Animace prakticky

Abychom stßle jen neteoretizovali, vyzkouÜφme si nynφ mal² p°φklad, ve kterΘm jsou animovßny jednotlivΘ atributy "width", "x" a "fill" obdΘlnφk∙:

Na tomto mφst∞ musφm odboΦit a ud∞lat praktickou poznßmku t²kajφcφ se prohlφ₧eΦ∙. Bohu₧el zatφm stßle platφ, nepoΦφtßm-li komerΦnφ p°ehrßvaΦe pro mobilnφ za°φzenφ, ₧e v∞tÜina animacφ je zcela sprßvn∞ interpretovßna pouze v programu Adobe SVG Viewer 3 (ASV3). Pom∞rn∞ slibn²m v²vojem prochßzφ v poslednφ dob∞ prohlφ₧eΦ KSVG, integrovan² v unixovΘm grafickΘm prost°edφ KDE od verze 3.2. Nap°φklad p°edchozφ ukßzku je mo₧nΘ animovat i v KSVG (viz komentß°e v SVG k≤du), ale u dalÜφch ji₧ budete v∞tÜinou pot°ebovat ASV3.

Zßkladnφ struktura zßpisu animaΦnφch prvk∙ - atributy

V tΘto Φßsti si probereme ty atributy, kterΘ naleznou vyu₧itφ ve v∞tÜin∞ animaΦnφch prvk∙.

Odkaz na animovan² element

Atribut "xlink:href" obsahuje URI odkazujφcφ na cφlov² element, jen₧ musφ b²t v aktußlnφm SVG fragmentu, aby byla zaruΦena jeho dostupnost. URI musφ ukazovat na p°esn∞ jeden element. Toto URI lze dokonce vynechat - animovßn pak bude rodiΦovsk² prvek p°φmo nad°azen² danΘmu objektu animate.

UrΦenφ animovanΘho atributu

Atribut "attributeName" - zde urΦφte atribut, kter² byste cht∞li v animaci m∞nit - pro animaci pohybu to m∙₧e b²t t°eba "x".

Atribut "attributeType" - mo₧nΘ hodnoty: "CSS", "XML", "auto". UrΦenφ jmennΘho prostoru XML ve kterΘm je definovßn cφlov² atribut. V²chozφ hodnota je "auto" a v naprostΘ v∞tÜin∞ p°φpad∙ nebude v∙bec nutnΘ se tφmto parametrem zab²vat.

UrΦenφ rozsahu hodnot

Nßsledujφcφ t°i atributy umo₧≥ujφ nastavit rozmezφ, ve kterΘm se v pr∙b∞hu animovßnφ budou hodnoty m∞nit. (V prvku set se uplatnφ jen posledn∞ jmenovan².)

Zachovßnφ v²sledku animace

Atributem "fill" m∙₧ete urΦit, zda pracovnφ v²sledek animace z∙stane zachovßn (freeze) i po jejφm skonΦenφ nebo bude odstran∞n (remove - v²chozφ hodnota).

Aditivnost a kumulativnost animovan²ch hodnot

Velmi Φasto je p°i animaci u₧iteΦnΘ mφt mo₧nost m∞nit n∞jakou hodnotu (polohu, natoΦenφ) relativn∞ k poΦßteΦnφmu, klidovΘmu stavu. P°edstavme si nap°φklad "rozt°esenφ" animovanΘho objektu okolo jeho klidovΘ polohy - u₧ijete-li nßsledujφcφch atribut∙, nebudete se u₧ muset v∙bec zajφmat o jeho absolutnφ polohu. (Pro animace polohy se samoz°ejm∞ nabφzφ jeÜt∞ alternativnφ °eÜenφ tΘto ·lohy pomocφ zm∞ny sou°adnicovΘho systΘmu, ale to nynφ nenφ d∙le₧itΘ.)

Atribut "additive" urΦφ, zda aktußlnφ animovanß hodnota nahradφ klidovou hodnotu atributu (replace - v²chozφ hodnota) nebo se k nφ bude p°iΦφtat (sum).

Atribut "accumulate" - kumulativnost se uplatnφ v p°φpad∞ animaΦnφch cykl∙, kterΘ prob∞hnou vφce ne₧ jednou. Funguje to p°esn∞ tak, jak byste Φekali - jestli₧e ji nastavφte na hodnotu "sum", pak se k aktußlnφ hodnot∞ animace p°iΦφtß hodnota, kterou m∞l animovan² atribut na konci p°edchßzejφcφho cyklu.

P°φklad pou₧itφ atribut∙

Na konci prvnφho opakovßnφ bude hodnota "width" rovna 30 px, na konci cruhΘho cyklu 40 px a tak dßle. A nynφ jeÜt∞ reßlnß demonstrace (Φty°i animovanΘ obdΘlnφky, ka₧d² s r∙znou kombinacφ t∞chto atribut∙):

Zßkladnφ struktura zßpisu animaΦnφch prvk∙ - elementy

V tΘto Φßsti si probereme elementy, pomocφ nich₧ budeme provßd∞t animace v SVG.

Element animate

Zcela obecn² prvek, pou₧iteln² k animaci vÜech Φφseln²ch hodnot. V dalÜφch Φßstech poznßte specializovan∞jÜφ elementy, urΦenΘ t°eba jen a pouze k animaci pohybu...

Pomocφ jednoho animaΦnφho prvku lze m∞nit v Φase prßv∞ jeden atribut. Ne vÜechny atributy a ne vÜechny elementy mohou b²t zapojeny do deklarativnφch animacφ. Nebojte se ale, v∞tÜinou bude vÜe velmi intuitivnφ a p°φpadnΘ nejasnosti si m∙₧ete ov∞°it v tabulkov²ch p°ehledech normy SVG.

Element set

Tento prvek provßdφ p°esn∞ to, co naznaΦuje jeho anglick² v²znam - nastavφ dan² atribut na danou hodnotu v p°esn∞ definovan² Φasov² ·sek. Vyu₧ijete ho v∞tÜinou p°i operacφch s dvoustavov²mi prom∞nn²mi, nap°φklad typu viditelnost (skryj Φi uka₧ n∞jak² prvek) nebo zm∞na textu. Tento animaΦnφ prvek logicky nem∙₧e pracovat aditivn∞ ani kumulativn∞.

Atribut "to" urΦφ hodnotu, kterß bude nastavena po dobu trvßnφ animace.

Element animateColor

Atributy "from", "by" a "to" v tomto p°φpad∞ samoz°ejm∞ specifikujφ hodnoty barev, p°iΦem₧ je n∞kolik povolen²ch zp∙sob∙ zßpisu - analogicky, tak jak je zapisujete kdy₧ definujete barvy v²plnφ a tah∙. Do hry vstupuje tΘ₧ atribut "color-interpolation" popsan² ji₧ d°φve v Φßsti o vypl≥ovßnφ.

Element animateTransform - dynamickΘ 2D transformace

Tento prvek umo₧≥uje animovat transformaΦnφ atributy normy SVG. A ty dovolujφ elegantn∞ uskuteΦnit naprosto libovolnΘ polohovΘ transformace, zm∞nu m∞°φtka, zkosenφ...

Atributy elementu animateTransform:

Typy transformacφ (hodnoty v hranat²ch zßvorkßch jsou nepovinnΘ, volitelnΘ podle typu po₧adovanΘ transformace):

• "translate" - posun_x [,posun_y]
• "scale" - m∞°φtko_x [,m∞°φtko_y] - zapφÜe-li se zde pouze jedna hodnota, bude pou₧ita pro zm∞nu m∞°φtka v obou sou°adnicov²ch osßch, jinak bude nßsobenφ pro ka₧dou osu rozdφlnΘ
• "rotate" - ·hel [st°ed_x st°ed_y] - pozor, neuvede-li se na tomto mφst∞ st°ed otßΦenφ, bude se dotyΦn² objekt otßΦet nikoli okolo svΘ osy, ale okolo bodu se sou°adnicemi (0,0)
• "skewX", "skewY" - ·hel zkosenφ

P°φklad pou₧itφ animaΦnφch element∙

PraktickΘ demonstrace kombinovßnφ animaΦnφch prvk∙ na pohybliv²ch objektech a na textu°e:

Vyhledßvßnφ