<meta http-equiv='pics-label' content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://interval.cz" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://interval.cz" r (n 0 s 0 v 0 l 0))' />
<p id='prepend'>Mßte p°ed sebou dalÜφ d∙le₧it² Φlßnek o animovßnφ vektorovΘ grafiky v 2D prostoru pomocφ formßtu SVG, rozebφrajφcφ °φzenφ dynamiky zm∞n hodnot r∙zn²ch prvk∙.</p>
<h3>Ovlßdßnφ dynamiky zm∞ny hodnot</h3>
<p>Dynamika - zp∙sob jak se m∞nφ animovanΘ hodnoty. I kdy₧ se velmi Φasto v∙bec nebudete muset tφmto problΘmem zaobφrat, pozd∞ji, zvlßÜt∞ p°i modelovßnφ realistickΘho pohybu, dojdete k pot°eb∞ jemn∞jÜφho ovlßdßnφ rychlosti a zrychlenφ objektu.</p>
<li><em>discrete</em> - skokovß zm∞na hodnoty mezi definovan²mi klφΦov²mi body animace (vyzkouÜejte si <a href='podklady/hejral/966/0991-anim-discrete-linear.svg'>nßzornou demonstraci</a>, zdroj: Adobe).</li>
<li><em>linear</em> - aktußlnφ hodnota je v ka₧dΘm okam₧iku urΦena jednoduchou lineßrnφ interpolacφ mezi dv∞ma definovan²mi klφΦov²mi body animace (v²chozφ hodnota).</li>
<li><em>paced</em> - konstantnφ krok (rychlost) po celou dobu trvßnφ animace. Zp∙sob jen zdßnliv∞ shodn² s p°edchßzejφcφm bodem se uplatnφ pouze pro p°φpady, kdy lze mezi klφΦov²mi body m∞°it vzdßlenost (v matematickΘm, nejen fyzikßlnφm smyslu). Pokud je nastaven typ "paced", budou ignorovßny atributy <code>keyTimes</code> a <code>keySplines</code>. Tato metoda je v²chozφ pro prvky <code>animateMotion</code>. K lepÜφmu pochopenφ vßm m∙₧e dob°e poslou₧it druh² nebo Φtvrt² p°φklad <a href='http://interval.cz/clanek.asp?article=3578' title='Hejral, Martin: Kurz SVG - animace (praktickΘ ukßzky)'>z p°edchozφho Φlßnku</a> (nebojte se zm∞nit typ interpolace a vyzkouÜet v ASV).</li>
<p>Atribut <strong>values</strong> - seznam hodnot, kter²ch bude animace postupn∞ nab²vat, p°iΦem₧ jednotlivΘ animaΦnφ kroky jsou odd∞leny st°ednφky. Pokud je tento seznam pou₧it, zp∙sobφ ignorovßnφ atribut∙ <code>from</code>, <code>to</code> a <code>by</code> - v tomto p°φpad∞ rovn∞₧ velice doporuΦuji p°ebyteΦnΘ parametry v∙bec neuvßd∞t, aby nedochßzelo k n∞jak²m p°ehmat∙m.</p>
<p>Atribut <strong>keyTimes</strong> - seznam Φas∙ odd∞len²ch st°ednφky umo₧≥uje m∞nit rychlost zm∞ny v pr∙b∞hu animace. Atribut musφ b²t v₧dy pou₧it ve spojenφ s hodnotami <code>values</code>, p°iΦem₧ ka₧dß hodnota ze seznamu <code>values</code> mß p°i°azen sv∙j klφΦov² Φas uveden² jako desetinnΘ Φφslo v rozsahu od 0 (poΦßtek animace) do 1 (konec). A tribut je ignorovßn, pokud je souΦasn∞ nastaven <samp>calcMode="paced"</samp>.</p>
<p>Atribut <strong>keySplines</strong> - jejich funkce je dopl≥kovß k atributu <code>keyTimes</code> (proto musφ b²t nastaveny oba seznamy souΦasn∞), s jedin²m rozdφlem, ₧e v seznamu nejsou klφΦovΘ Φasy, n²br₧ sady Φty° °φdicφch bod∙ x1 y1 x2 y2 v rozsahu 0 a₧ 1, kterΘ pomocφ kubick²ch BΘzierov²ch k°ivek urΦujφ dynamiku zm∞ny hodnot mezi dv∞ma klφΦov²mi Φasy - proto takΘ tento seznam bude v₧dy o jednu sadu hodnot kratÜφ ne₧ oba p°edchßzejφcφ. Pokud nenφ souΦasn∞ nastaven <samp>calcMode="spline"</samp>, je atribut ignorovßn.</p>
<p>Pro pochopenφ funkce <code>keySplines</code> je t°eba si p°edstavit sou°adnici x jako Φasovou osu pro dan² ·sek animace a y pak jako osu pro v²slednou hodnotu animace, p°itom y=0 odpovφdß poΦßteΦnφ hodnot∞ animovanΘ hodnoty a y=1 je koneΦnß hodnota.</p>
<p>Tento <a href='podklady/hejral/966/0992-anim-key-splines.svg'>pohybliv² SVG obrßzek</a> (zdroj: Adobe) ilustruje efekt <code>keySplines</code> pro Φty°i hodnoty nastavenφ, uvedenΘ v p°edchßzejφcφm rßmeΦku.</p>
<h3>Element<code> AnimateMotion</code></h3>
<p>Pohyb po p°eddefinovanΘ dvourozm∞rnΘ k°ivce.</p>
<p>Atributy:</p>
<div class='list'>
<ul>
<li><em>calcMode</em> - mo₧nΘ hodnoty: discrete, linear, paced, spline - popis viz v²Üe.</li>
<li><em>path</em> - prvek obsahuje data pro vektorovou cestu urΦujφcφ pohyb animovanΘho objektu, "motion path" se zapisuje zcela stejn∞ jak ji₧ d°φve vysv∞tlen² atribut "d" v prvku <code>path</code>.</li>
<li><em>keyPoints</em> - obsahuje st°ednφky odd∞len² seznam desetinn²ch Φφsel (klφΦov²ch bod∙) v rozsahu od 0 do 1 a urΦuje, jak daleko na cest∞ se mß pohybujφcφ se objekt nachßzet v p°φsluÜnΘm Φase, ulo₧enΘm v seznamu klφΦov²ch bod∙ animace <code>keyTimes</code>, viz v²Üe.</li>
<li><em>rotate</em> - urΦuje zp∙sob natßΦenφ objektu ve vztahu k cest∞ po kterΘ se pohybuje:
<ul>
<li>auto - objekt se natßΦφ ve sm∞ru teΦny pohybovΘ k°ivky (tedy v ji₧ zmφn∞nΘm p°φkladu s autem animovan²m na silnici v pohledu shora se bude automobil sprßvn∞ otßΦet p°φdφ ve sm∞ru jφzdy)</li>
<li>auto-reverse - stejn∞ jako "auto", ale objekt je navφc otoΦen o 180 stup≥∙</li>
<li>"·hlovß_hodnota" - pokud zadßte ·hel m∞°en² od osy x, animovan² objekt bude stßle zachovßvat toto natoΦenφ; v²chozφ hodnota je 0</li>
</ul>
</li>
</ul>
</div>
<p>Animaci podΘl M÷biovy k°ivky a r∙znß nastavenφ "rotate" ukazuje tento <a href='podklady/hejral/966/0910-anim-motion.svg'>SVG k≤d</a>:</p>
<p>Sm∞r pohybu lze zadßvat i jednoduÜeji, pomocφ obligßtnφch atribut∙ "from", "by", "to", jejich hodnoty jsou v tomto p°φpad∞ tvo°eny pßry hodnot odd∞len²ch mezerou nebo Φßrkou, nap°φklad <samp>from="33,15"</samp>. DalÜφ mo₧nost pomocφ ji₧ znßmΘho atributu "values" m∙₧e vypadat n∞jak takto <samp>values="10,20;30,20;30,40"</samp> nebo <samp>values="10mm,20mm;30mm,20mm;30mm,40mm"</samp>.</p>
<p>I kdy₧ teoreticky mohou b²t nastaveny "values" souΦasn∞ s "keyPoints" nebo dokonce i s "from/by/to", siln∞ nedoporuΦuji jakΘkoli duplicitnφ definice - nejen, ₧e to zbyteΦn∞ zv∞tÜuje v²sledn² soubor, ale snadno to m∙₧e vΘst k zßke°n²m omyl∙m p°i editaci.</p>
<p>Tento prvek musφ b²t vno°en uvnit° elementu <code>animateMotion</code>.</p>
<p>Atributy:</p>
<div class='list'>
<ul>
<li><em>xlink:href</em> - URI odkaz na prvek <code>path</code>, pokud je tento odkaz definovßn, mß p°ednost p°ed atributem <code>path</code> v rodiΦovskΘm elementu <code>animateMotion</code>.</li>
</ul>
</div>
<h4>Vzdßlenost podΘl cesty</h4>
<p>Nejenom p°i pohybu po k°ivce, ale i p°i n∞kter²ch dalÜφch grafick²ch operacφch (jako t°eba umφs¥ovßnφ textu na k°ivku) je pot°eba vypoΦφtat dΘlku m∞°enou podΘl konkrΘtnφ k°ivky. Matematickß v∞da to samoz°ejm∞ umφ, ale jeliko₧ se v ₧ßdnΘm p°φpad∞ nejednß o jednoduchΘ v²poΦty, norma nenutφ prohlφ₧eΦe implementovat absolutn∞ p°esnΘ °eÜenφ.</p>
<p>Mφsto toho je nabφdnuta alternativnφ mo₧nost pou₧φt dodateΦn² atribut "pathLength", ve kterΘm autor prohlφ₧eΦi sd∞lφ skuteΦnou dΘlku dotyΦnΘ k°ivky, kterß pak bude zp∞tn∞ prohlφ₧eΦem pou₧ita pro umφs¥ovßnφ objekt∙ podΘl k°ivky. Pou₧itφm tohoto atributu by se m∞ly zcela eliminovat mo₧nΘ drobnΘ rozdφly mezi prohlφ₧eΦi od r∙zn²ch v²robc∙.</p>
<p>Kreslicφ p°φkazy "moveto" majφ pro ·Φely v²poΦtu dΘlky k°ivky dΘlku 0!</p><div class='refer'><h3><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/serial.asp?serial=76' title='p°ehled Φlßnk∙ vΦetn∞ anotacφ'>Kurz SVG - tvorba vektorovΘ grafiky v XML</a></h3><p>Pokud u₧ mßte dost suchΘ teorie Scalable Vector Graphics, nenφ nic sna₧Üφho, ne₧ se vrhnout na praktickΘ testovßnφ jeho mo₧nostφ. Kurz SVG vßm usnadnφ osvojenφ zßkladnφch struktur a vlastnostφ tohoto jazyka pro prßci s vektorovou grafikou. Tato sΘrie Φlßnk∙ dosud nebyla ukonΦena!</p><ul><li><strong>Kurz SVG - animace (dynamika zm∞ny hodnot)</strong> (prßv∞ Φtete)</li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3578'>Kurz SVG - animace (praktickΘ ukßzky)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3566'>Kurz SVG - animace (Φasovßnφ)</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3530'>Kurz SVG - nenφ to Flash a p°ece se toΦφ!</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3514'>Kurz SVG - transformace sou°adnic</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3506'>Kurz SVG - o°ezßvßnφ a maskovßnφ</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3483'>Kurz SVG - vypl≥ovßnφ II</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3476'>Kurz SVG - vypl≥ovßnφ I</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3469'>Kurz SVG - text</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3464'>Kurz SVG - grafickß primitiva</a></li><li><a href='http://interval.cz/__redirect/redirect.asp?what=interval_offline&url=http://interval.cz/clanek.asp?article=3460'>Kurz SVG - struktura dokumentu, zobrazovacφ a vykreslovacφ model</a></li></ul></div>
