Interval.cz

Kurz SVG - DOM a JavaScript p°i programovßnφ animacφ

V tomto Φlßnku vßs Φekß prvnφ pomoc p°i programovßnφ (alias skriptovßnφ) v prost°edφ SVG. ZφskanΘ znalosti si hned vyzkouÜφme v n∞kolika zajφmav²ch praktick²ch p°φkladech. Myslφte si nap°φklad, ₧e znßte vÜechny v²hody, kterΘ majφ vektorovΘ mapy v SVG formßtu? Mo₧nß ano, ale i tak se vßs pokusφm p°esv∞dΦit, ₧e SVG mapy toho dovedou jeÜt∞ vφce, ne₧ jste Φekali.

Jeliko₧ ne vÜechny ·lohy lze zvlßdnout jen s animaΦnφmi prvky SVG specifikace, podφvßme se na mo₧nosti, kterΘ nßm nabφzφ skriptovßnφ. U₧ d°φve jsem v tomto kurzu n∞kolikrßte zmi≥oval, ₧e zvlßdßte-li techniku DHTML, jako byste ji₧ um∞li programovat i SVG. V nßsledujφcφm textu tΘto podobnosti tak trochu zneu₧iji a upozornφm vßs spφÜe na odliÜnosti a specifika SVG, ne₧ abych vysv∞tloval vÜe od zßkladu.

Pozor, nßsledujφcφ text p°edpoklßdß, ₧e s JavaScriptem ji₧ n∞jakΘ zkuÜenosti mßte a ₧e rovn∞₧ mßte p°edstavu o objektovΘ datovΘ struktu°e HTML (XML) strßnek. V p°φpad∞ pot°eby odkazuji na n∞kterΘ z nesΦetn²ch text∙ o DOM (Document Object Model) a DHTML, z nich₧ °ada je dostupnß i zde na Intervalu. V tomto textu nynφ zmφnφm jen n∞kterΘ zßkladnφ a nejΦast∞ji pou₧φvanΘ konstrukce. Detaily SVG-DOM bez problΘmu dohledßte v dokumentaci k ASV3.

Test aktivnφho SVG prohlφ₧eΦe

Hned ze zaΦßtku sΘrie text∙ o SVG jste se o Adobe SVG3 prohlφ₧eΦi mohli dozv∞d∞t, ₧e jednφm z hlavnφch rozdφl∙ oproti p°edchozφ verzi je implementace plnohodnotnΘho interpreteru JavaScriptu. Tato informace je pro nßs nynφ klφΦovß. Programßto°i firmy Adobe tφm v²razn∞ zv²Üili kompatibilitu prohlφ₧eΦe nap°φΦ vÜemi platformami a r∙zn²mi webov²mi prohlφ₧eΦi. Osobn∞ siln∞ doporuΦuji jako prvnφ krok p°i spouÜt∞nφ jak²chkoli skript∙ v SVG prost°edφ provΘst test verze prohlφ₧eΦe. Dovoluji si vßm nabφdnout svΘ odlad∞nΘ °eÜenφ:

A hned mohu dodat, ₧e zßpis k≤du uvnit° SVG souboru se °φdφ obecn²mi XML pravidly, proto je nutnΘ programovΘ k≤dy v₧dy uzav°φt do sekce CDATA, jak jste si vÜichni urΦit∞ povÜimli v p°edchßzejφcφm v²pisu.

Nejd∙le₧it∞jÜφ p°φkazy a postupy

Toto je notoricky znßmß konstrukce, kterou zaΦφnß tΘm∞° ka₧d² DHTML (a SVG) skript, kter² pracuje s DOM. Zjistφme takto ukazatel na objekt, se kter²m pot°ebujeme pracovat - a¥ u₧ Φφst jeho atributy, nebo n∞co modifikovat.

Adobe doporuΦuje ke stejnΘmu ·Φelu o n∞co slo₧it∞jÜφ postup. Ten vznikl p°edevÜφm k zamezenφ mo₧n²ch problΘm∙ v p°φpadech, kdy skript provßd∞l webov² prohlφ₧eΦ (v ASV2) a v HTML strßnce bylo souΦasn∞ vlo₧eno n∞kolik SVG prvk∙.

Vidφte, ₧e namφsto toho, aby se vyu₧il standardnφ objekt document, je zjiÜ¥ovßn objekt "vlastnφcφ" ty konkrΘtnφ SVG prvky, se kter²mi zrovna pot°ebujeme pracovat. (Abych byl zcela p°esn², hledßme vlastnφka objektu, kter² byl zdrojem udßlosti onload, tedy prvku svg.) Pro ka₧d² vlo₧en² SVG soubor se toti₧ vytvo°φ jeden dalÜφ objekt document.

Pom∞rn∞ hojn∞ vyu₧φvanΘ jsou i nßsledujφcφ p°φkazy, rovn∞₧ znßmΘ z DHTML:

V²znamnΘ usnadn∞nφ prßce p°i programovßnφ vßm poskytnou funkce zjednoduÜujφcφ prßci s atributy SVG element∙ - jejich slu₧eb vyu₧ijete p°i prßci s SVG velmi Φasto:

Nßsledujφcφ v²pis ukazuje, jak modifikovat a Φφst obsah atributu style. Prozatφm p°φliÜ nedoporuΦuji pou₧φvßnφ style z d∙vod∙ kompatibility, jeliko₧ prohlφ₧eΦe mΘn∞ vysp∞lΘ ne₧ ASV2 v∞tÜinou CSS zatφm uspokojiv∞ nepodporujφ.

K hodnotßm atribut∙ uvnit° struktury SVG-DOM se m∙₧eme dostat alternativn∞ takΘ nßsledujφcφm zßpisem:

ZvlßÜt∞ v p°φpad∞ animacφ jsou Φasto pou₧itelnΘ obecnΘ funkce JavaScriptu pro prßci s p°eruÜenφm a Φasovßnφm:

Obsluha udßlostφ

DalÜφ oblφbenou Φinnostφ, kterou jist∞ budete chtφt provozovat takΘ, je obsluha udßlostφ u₧ivatelskΘho rozhranφ - tu velmi Φasto vyu₧ijete p°i vytvß°enφ interaktivnφch grafick²ch prezentacφ. Dovolφm si shrnout nejd∙le₧it∞jÜφ praktickΘ informace, kterΘ k tomu budete pot°ebovat.

SVG p°i obsluze udßlostφ pou₧φvß model shodn² s dob°e znßmou normou DOM2-Events, pou₧φvan² v prohlφ₧eΦφch Netscape a Mozilla (MSIE se trochu odchyluje). Ka₧dß obslu₧nß rutina toti₧ dostane jako parametr specißlnφ objekt event, kter² nese informace pot°ebnΘ k reakci na konkrΘtnφ udßlost. Pozor, zßvazn² nßzev tohoto specißlnφho objektu v ASV je evt (na rozdφl od klasick²ch WWW browser∙)!

JednotlivΘ polo₧ky ve struktu°e objektu evt pak jsou ji₧ shodnΘ. Ty nejzajφmav∞jÜφ si nynφ vyjmenujeme:

Animace s vyu₧itφm DOM a JavaScriptu

A vzh∙ru do praxe...

Fyzikßlnφ pokus - koule a pru₧iny

Nynφ si vyzkouÜφme realizaci znßmΘho fyzikßlnφho pokusu, kdy koule, zav∞Üenß na pru₧in∞, po jejφm napnutφ a uvoln∞nφ kmitß s klesajφcφ amplitudou okolo rovnovß₧nΘ polohy.

Fyzikßlnφ pokus - koule a pru₧iny (originßlnφ SVG, cca 5 kB)

V prvnφ fßzi jsem si v Illustratoru nakreslil jednoduchΘ ztvßrn∞nφ pru₧iny (skupina s id="spring") a koule (skupina s id="sphere"). Dovnit° ka₧dΘ skupiny jsem pak dodal animaΦnφ prvky. Musφ b²t dva, proto₧e v p°φpad∞ pru₧iny pot°ebujeme animovat smrÜ¥ovßnφ, naproti tomu koule jen m∞nφ polohu...

Definice pohybu pomocφ values ovÜem ve v²chozφm (lineßrnφm) interpolaΦnφm re₧imu vede k fyzikßln∞ nesprßvnΘmu ΦasovΘmu °φzenφ animovan²ch hodnot. Abych dosßhl realistickΘ zm∞ny zrychlenφ, kterß p°i tomto fyzikßlnφm procesu probφhß, nastavil jsem v²poΦetnφ re₧im na calcMode="spline" a p°idal dv∞ °φdicφ k°ivky do atributu keySplines=".5 0 .5 1;.5 0 .5 1". Navφc byly v druhΘ fßzi koule a pru₧ina definovßny jako symboly, abychom je mohli "rozmno₧it":

Stßle ale z∙stßvß opominut jeden fyzikßlnφ aspekt - v reßlnΘm sv∞t∞ bude v₧dy dochßzet ke ztrßt∞ energie kmitajφcφ soustavy a kmity se budou utlumovat. Mohli bychom to ud∞lat zp∙sobem, kter² pou₧il v podobnΘm p°φkladu s kostkami Antoine Quint, ale ten je nep°esn² a nßroΦn² na vypisovßnφ mno₧stvφ polohov²ch ·daj∙.

Proto si nynφ ukß₧eme p°φm² v²poΦet animaΦnφch fßzφ pomocφ JavaScriptu. Prosφm ct∞nΘ Φtenß°e, nekamenujte mne za nep°esnosti a zjednoduÜovßnφ ve fyzikßlnφ strßnce v∞ci, st°edem zßjmu stßle z∙stßvß vektorovß grafika:

Uveden² k≤d vykonßvß zhruba nßsledujφcφ. Ihned potΘ, co zjistφ ukazatele na animovanΘ objekty, pou₧ije funkci cos() k v²poΦtu animovan²ch hodnot: y - aktußlnφ poloha koule, s - aktußlnφ nata₧enφ pru₧iny. Jeliko₧ byla pru₧ina nakreslena v pln∞ nata₧enΘ poloze, byl jsem nßsledn∞ donucen do v²poΦtu p°idat mo₧nß pon∞kud zßhadnΘ konstanty (50, 0.34, 0.32). Pak se posuneme po ΦasovΘ ose zv²Üenφm prom∞nnΘ time, utlumφme amplitudu a aplikujeme vypoΦtenΘ hodnoty na SVG objekty (setAttribute).

Nakonec nastavφme ΦasovaΦ, kter² rutinu fade() spustφ znovu po 50 ms.

Äivot brouka

Tato animace op∞t vychßzφ z p°φkladu firmy Macromedia, ve kterΘm je beruÜka ovlßdßna virtußlnφm joystickem.

Op∞t jsem si trochu ulehΦil prßci, o°ezal jsem p°φklad a₧ na holΘ jßdro a vypustil n∞kterΘ vlastnosti originßlu. Pokud jste poctiv∞ doΦetli a₧ sem, mßte vÜechny pot°ebnΘ znalosti, kterΘ vßm umo₧nφ napsat JavaScriptovou rutinu kterß by nap°φklad stejn∞ jako v SWF p°edloze pohybovala °φdicφ pßkou (n∞co velmi podobnΘho obsahuje i p°φklad s animacφ masky obrßzku).

Äivot brouka (originßlnφ SVG, cca 18 kB)

Hned prvnφ varianta SVG p°φkladu naznaΦuje mo₧nosti °eÜenφ tΘto interaktivnφ animace bez pou₧itφ programovßnφ. Bohu₧el, ovlßdßnφ beruÜky pomocφ sm∞rovΘho k°φ₧e takto nelze stoprocentn∞ realizovat - neexistuje toti₧ mo₧nost, aby animaΦnφ prvek po ukonΦenφ a p°i novΘm startu p°iΦφtal rostoucφ hodnoty sou°adnic k poloze, ve kterΘ byla p°edtφm animace ukonΦena (beruÜka zastavena), proΦe₧ pohyb zaΦφnß v₧dy znovu od poΦßteΦnφch sou°adnic danΘho animaΦnφho prvku.

Pozn. aut.: Tak₧e asi podßme nßvrh na rozÜφ°enφ normy SVG o pam∞¥ov² efekt animaΦnφch element∙ - navrhuji atribut "memory" s mo₧n²mi hodnotami "replace" a "sum" kv∙li konzistentnosti s atributy "additive" a "accumulate".

Prozatφm vßm nabφzφm °eÜenφ pomocφ JavaScriptu v druhΘ verzi p°φkladu. SVG k≤d je pro vaÜe pohodlφ pom∞rn∞ podrobn∞ okomentovßn.

Tento kousek SVG je zobrazenφm ovlßdacφho k°φ₧e s p°ipojenou rutinou onmouseover="beetleMania(evt)", kterß je potom aktivovßna kdykoli se ukazatel dostane nad zobrazenφ Üipek. P°i pozornΘm Φtenφ k≤du zjistφte, ₧e ve skuteΦnosti je kresba neviditelnß. D∙vod? P∙vodnφ sm∞rov² k°φ₧ byl toti₧ nakreslen jako jedna spojitß vektorovß cesta - to by ale neumo₧nilo jednoduchΘ rozpoznßnφ sm∞ru... Aby prvky v∙bec reagovaly na udßlosti, musφ b²t vykresleny, a jeliko₧ souΦasn∞ chceme vid∞t p∙vodnφ kresbu, nastavil jsem jim prost∞ stoprocentnφ pr∙hlednost pomocφ opacity="0".

Podprogram beetleMania(evt) si snadno zjistφ id prvku (evt.target.id), kter² spustil udßlost, a podle n∞j nastavφ sm∞r pohybu:

Pokud alespo≥ trochu vlßdnete JavaScriptem, jist∞ pro vßs nebude problΘmem cviΦn∞ naprogramovat druhou variantu pohybu, kdy se beruÜka otßΦφ plynule, nikoli skokov∞.

Vlastnφ pohyb (a modifikace SVG-DOM) zajiÜ¥uje rutina beetleMove(), opakovan∞ spouÜt∞nß ΦasovaΦem:

Interaktivnφ ₧elezniΦnφ mapa ╚R

V tomto p°φkladu si dovolφm troÜiΦku vylepÜit interaktivnφ SVG mapu ze serveru ╚esk²ch drah. Na okraj jeÜt∞ jednu poznßmku k ovlßdßnφ Adobe SVG prohlφ₧eΦe - zmenÜovßnφ Φi zv∞tÜovßnφ m∞°φtka lze provΘst i myÜφ, pokud podr₧φte klßvesu CTRL, respektive CTRL+SHIFT, a posuv mapy lze realizovat kombinacφ ALT+myÜ, jak je sprßvn∞ uvedeno v map∞.

Interaktivnφ ₧elezniΦnφ mapa ╚R (velk² nßhled, cca 55 kB, originßlnφ SVG, cca 30 kB)

V rßmci naÜeho SVG kurzu jsem p°idal "roll-over" efekty (pomocφ animaΦnφch prvk∙ set) a souΦasn∞ "kontextovou" nßpov∞du, kterß ukazuje velkΘ Φφslo trati (JavaScript).

K mod°e zbarven²m tratφm byl cviΦn∞ pomocφ animaΦnφho prvku set dodßn zv²raz≥ovacφ efekt:

To byla hraΦka, zbytek u₧ bude troÜiΦku komplikovan∞jÜφ. Vyu₧il jsem toho, ₧e SVG ╚esk²ch drah obsahuje hyperlinky na jφzdnφ °ßdy, p°iΦem₧ Φφslo trati je v₧dy obsa₧eno v nßzvu odkazovanΘho dokumentu - prost∞ jsem je z atributu xlink:href v objektovΘ struktu°e vyextrahoval:

V SVG jsem si p°edem vytvo°il textov² prvek s id="info", do kterΘho nφ₧e uvedenß rutina zapφÜe Φφslo trati a souΦasn∞ jej p°emφstφ na sprßvnΘ sou°adnice.

Program, kter² jsem vytvo°il, Üikovn∞ vyu₧φvß efektu zvanΘho event-bubbling - rutinu odchytßvajφcφ pohyb myÜi mi pak staΦilo umφstit do ko°ene objektovΘho stromu a poΦkat si, a₧ dotyΦnß udßlost probublß a₧ k nφ. Pak testuji, zda se jednß o prvek typu a (hyperlink). M∙₧e se vßm zdßt divnΘ, proΦ netestuji zdrojov² objekt udßlosti (evt.target), nybr₧ jeho rodiΦe (evt.target.parentNode). Je to proto, ₧e udßlost onmouseover m∙₧e spustit pouze viditeln² objekt - co₧ jsou Φßry znßzor≥ujφcφ jednotlivΘ trat∞, hyperlinky jsou jim v naÜem SVG souboru p°φmo nad°azeny:

DalÜφ velmi zajφmavou vlastnostφ, je₧ by rozhodn∞ nem∞la z∙stat nepovÜimnuta, je zjiÜt∞nφ aktußlnφho zv∞tÜenφ a posunutφ grafiky v SVG Vieweru (nezapome≥me - vektorovou grafiku lze neomezen∞ zv∞tÜovat bez ztrßty kvality) a nßsledn² p°epoΦet sou°adnic umis¥ovanΘho objektu.

To¥ vÜe. Jen za sebe dodßm, ₧e p°esn∞ zde je skrytß velkß sφla grafiky ve znaΦkovacφm jazyce SVG, zde se otevφrß spousta mo₧nostφ pro aplikace. Äiv∞ si p°edstavuji t°eba detailnφ mapu m∞sta, kde jsou vÜechny objekty podrobn∞ popsßny ve standardnφch prvcφch title a desc - skript velmi podobn² tomu zde p°edstavenΘmu pak dßvß u₧ivateli tΘto mapy mo₧nost velmi pohodln∞ tyto informace zφskat...

Vyhledßvßnφ