Анимация за поглед върху скалируема векторна графика (SVG)

Днес ще продължим нашата дискусия Скалируема векторна графика (SVG), и този път ще работим SVG Анимация. Не се плашете, SVG Animation е сравнително лесен и всъщност в този пост ще започнем от основите.

Основно изпълнение

Анимацията в SVG може да се осъществи чрез елемент;

Както можете да видите от горния кодов фрагмент, добавяме вътре елемента, който ще бъде засегнат. Това съдържа някои от следните атрибути;

ИмеНаАтрибут: Този атрибут определя кой елемент ще бъде засегнат в анимацията.

от: Този атрибут не е задължителен, можем да посочим точна стойност или да го оставим да започне откъдето е бил.

да се: Този атрибут определя посоката на анимацията. В зависимост от зададената стойност в ИмеНаАтрибут, резултатите могат да варират. Но в този пример той ще продължи височина.

мажор: Този атрибут определя продължителността на анимацията. Стойността на този атрибут се изразява в Синтаксис на стойността на часовника. Например, 02:33 представлява 2 минути и 33 секунди, докато 3 часа е равна на 3 часа, но не ни е нужно толкова дълго, затова определихме продължителността само за 3s или 3 секунди;

Същото става елемент, но този път насочваме атрибута на радиуса на кръга (R).

• Основна демонстрация за изпълнение

Движещ се елемент

При преместване на SVG елементи, ние трябва само да насочим координатите на елемента х и ш;

В примера по-горе преместваме правоъгълника от 0 да се 200 след 3 секунди правоъгълникът ще се появи хоризонтално отляво надясно. Също така, ако погледнете внимателно, добавихме още един атрибут към елемент, а именно запълни.

запълни Атрибутът тук няма нищо общо с цвета на фона като в другите SVG елементи. Този атрибут определя как ще действа анимацията след края на продължителността. В този пример ние замръзване засегнатия елемент, така че да остане там, където анимацията свършва.

Той също работи подобно на елемент, можем да използваме CX или CY, така:

• Демо на движещия се елемент

Анимирайте няколко атрибута

Досега ние се насочваме само към един атрибут, който трябва да бъде анимиран, но също така е възможно да анимирате повече от един атрибут едновременно. Примерът по-долу показва как го правим:

Както виждате, работи по подобен начин, едва сега имаме две елементи в. \ t за насочване към радиус и ширина на хода да бъдат засегнати.

• Демонстрация на няколко атрибута

Следване на път

В предишния ни пост Работа с текст в SVG, ние ви показахме как да подавате Текст към Път. Възможно е същото нещо да се направи и в SVG Анимация, можем да анимираме елемент, който да следва Пътя. Ето един пример.

Пътят е по-добре дефиниран в рамките на a елемент, както е показано по-горе. За да може елементът да следва Пътя, трябва да дефинираме анимацията с и свържете пътя документ за самоличност с елемент, както следва;

Това е, сега нека да го видим в действие;

• Следваща демонстрация на път

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

Можем също да използваме трансформация като мащаб, превеждам и въртя за Анимацията и да го направим ние ще използваме ;

Трансформациите в SVG споделят сходни принципи с CSS3, и ние го обсъдихме доста подробно в предишния ни пост за CSS3 2D Transformation.

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

Заключителни мисли

В зависимост от уменията ви в SVG Animation можете да създадете нещо подобно.

Едно от предимствата на използването на SVG Animation над Flash Animation е, че не разчита на плъгини на трети страни, а също и значително по-бързо от Flash. След като Adobe преустанови поддръжката на Flash в Android, може би искате да започнете да опитвате този подход, за да обслужвате анимацията в следващия си уебсайт.

Допълнителни справки

• SVG анимира документацията
• Разширени техники за SVG анимация

• Преглед на демо
• Изтеглете Източник