Interval.cz

Kurz SVG - animace (dynamika zm∞ny hodnot)

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∙.

Ovlßdßnφ dynamiky zm∞ny hodnot

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.

Atribut calcMode - nepovinn² atribut urΦujφcφ zp∙sob interpolace hodnot, mo₧nΘ hodnoty jsou:

Atribut values - 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∙ from, to a by - 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.

Atribut keyTimes - 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 values, p°iΦem₧ ka₧dß hodnota ze seznamu values 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 calcMode="paced".

Atribut keySplines - jejich funkce je dopl≥kovß k atributu keyTimes (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 calcMode="spline", je atribut ignorovßn.

Pro pochopenφ funkce keySplines 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°φklad:

Tento pohybliv² SVG obrßzek (zdroj: Adobe) ilustruje efekt keySplines pro Φty°i hodnoty nastavenφ, uvedenΘ v p°edchßzejφcφm rßmeΦku.

Element AnimateMotion

Pohyb po p°eddefinovanΘ dvourozm∞rnΘ k°ivce.

Atributy:

Animaci podΘl M÷biovy k°ivky a r∙znß nastavenφ "rotate" ukazuje tento SVG k≤d:

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 from="33,15". DalÜφ mo₧nost pomocφ ji₧ znßmΘho atributu "values" m∙₧e vypadat n∞jak takto values="10,20;30,20;30,40" nebo values="10mm,20mm;30mm,20mm;30mm,40mm".

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.

Alternativnφ definice pohybovΘ k°ivky - mpath

Tento prvek musφ b²t vno°en uvnit° elementu animateMotion.

Atributy:

Vzdßlenost podΘl cesty

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φ.

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∙.

Kreslicφ p°φkazy "moveto" majφ pro ·Φely v²poΦtu dΘlky k°ivky dΘlku 0!

Vyhledßvßnφ