Анимација у видљивој векторској графици (СВГ)

Данас ћемо наставити нашу дискусију Сцалабле Вецтор Грапхиц (СВГ), и овај пут ћемо радити СВГ Аниматион. Немојте се бојати, СВГ Анимација је релативно једноставна и заправо у овом посту ћемо почети од основа.

Басиц Имплементатион

Анимација у СВГ-у се може обавити путем елемент;

Као што можете видети из исечка кода изнад, додајемо у елемент који ће бити погођен. Ово садржи неке од следећих атрибута;

аттрибутеНаме: Овај атрибут одређује који ће атрибут елемента утицати на анимацију.

од: Овај атрибут је опционалан, можемо да наведемо тачну вредност или да га оставимо да почне одакле је.

до: Овај атрибут одређује правац анимације. У зависности од специфициране вредности у аттрибутеНаме, резултати могу варирати. Али у овом примеру ће се проширити хеигхт.

дур: Овај атрибут одређује трајање анимације. Вредност овог атрибута је изражена у синтакси вредности сата. На пример, 02:33 представља 2 минута и 33 секунде, док 3х једнако је 3 сата, али нам не треба толико времена па смо одредили трајање само за 3с или 3 секунде;

Иста ствар иде елемент, али овај пут циљамо атрибут радијуса круга (р).

• Басиц Имплементатион Демо

Мовинг Елемент

Код помицања СВГ елемената, потребно је само циљати координате елемента Икс и и;

У горњем примеру, померимо правоугаоник са 0 до 200 за 3 секунде, правоугаоник ће се кретати хоризонтално са леве на десно. Такође, ако пажљиво погледате, додали смо још један атрибут наиме филл.

филл атрибут овде нема никакве везе са бојом позадине као у другим СВГ елементима. Овај атрибут одређује како ће анимација дјеловати након истека трајања. У овом примеру ми замрзнути погођени елемент, тако да остаје тамо где се анимација завршава.

Такође ради слично као и елемент, можемо користити цк или ци, овако:

• Демонстрација покретног елемента

Анимирајте вишеструке атрибуте

До сада смо циљали само један атрибут који ће бити анимиран, али је истовремено могуће анимирати више од једног атрибута одједном. Пример испод показује како то радимо:

Као што видите, ради на сличан начин, само сада имамо два елементи унутар да циљате радиус анд тхе ширина хода бити погођени.

• Демо више атрибута

Фоллов а Патх

У нашем претходном посту Рад са текстом у СВГ-у, ми смо вам показали како да пренесете текст на пут. Исто је тако могуће урадити иу СВГ Аниматион, можемо анимирати елемент да слиједимо Пут. Ево примера.

Пут је боље дефинисан унутар а као што је приказано горе. Да би елемент пратио Пут, морамо дефинисати анимацију са и повежите путању ид са елемент, као што следи;

То је то, сада ћемо то видети у акцији;

• Демо следећег пута

Трансформатионс

Можемо такође користити трансформацију као Скала, превести и ротате за Анимацију, и то ћемо користити ;

Трансформације у СВГ-у деле сличне принципе са ЦСС3, и о томе смо доста детаљно говорили у претходном посту о ЦСС3 2Д трансформацији.

• Трансформатион Демо

Последње мисли

У зависности од вашег знања о СВГ Анимацији можете креирати нешто слично.

Једна од предности коришћења СВГ анимације преко Фласх Анимације је то што се не ослања на додатке треће стране за рад и такође је знатно бржи од Фласх-а. Након што је Адобе зауставио њихову Фласх подршку у Андроиду, можда бисте жељели почети испробавати овај приступ како би послужили анимацију на сљедећој веб-локацији.

Даље референце

• СВГ Анимате Доцументатион
• Напредне СВГ технике анимације

• Виев Демо
• Довнлоад Соурце