SVG анимация

Категория: Статьи о графике -> Векторная графика (SVG)

SVG язык позволяет создавать не только статические картинки, но и динамические, тоесть анимированные. При этом анимация происходит не покадрово (как в GIF), а программно - для каждого отдельного элемента можно придумать свой отдельный сценарий. Холст рисунка - сцена, все элементы рисунка (прямоугольники, линии, окружности и т.д) - актеры. Думаю, люди, которые занимаются разработкой банеров и прочей рекламной веб-графики уже заинтересовались такой возможностью SVG.
Язык анимации SMIL

Анимация SVG осуществляется посредством языка SMIL. Этот язык был рекомендован WC3 консорциумом как основной для описания сценариев векторной XML графики. SMIL не является языком программирования, это всего-лишь язык разметки, причем основанный на том же XML. Всего одним тегом <animate> можно описать сложный сценарий для отдельных фигур (перемещение, трансформация, визуализация).

Самый простой пример SVG анимации - желтый прямоугольник, который медленно переходит из прозрачного состояния в непрозрачное.
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="400" y="100" width="400" height="200" fill="yellow">
<animate attributeName="opacity" attributeType="CSS" from="0" to="1" begin="0s" dur="10s" repeatCount="1" />
</rect>
</svg>

Внутри каждого тега посредством тега animate может быть описан мини-сценарий для одного атрибута. Этот тег имеет ряд атрибутов, в данном примере:
attributeName - название атрибута rect, с которым мы будем проводить манипуляции. Это opacity (прозрачность).
attributeType - тип атрибута. Любой аттрибут SVG тега может быть задан по правилам XML или CSS. Opacity - это CSS атрибут.
from и to - промежуток значений, через который пройдет opacity во время анимации. В данном случае - от 0 до 1, через все промежуточные значения (0.1, 0.2, 0.3...).
begin и dur - временной промежуток анимации. При полной загрузке изображения запускается таймер, когда значение этого таймера достигнет begin, фигура rect начнет свое преобразование. Время, за которое прямоугольник станет непрозрачным указывается в атрибуте dur.
repeatCount - количество повторов анимации.

Внутри каждой фигуры (тега) можно вставить любое количество мини-сценариев для одного атрибута. Давайте добавим нашему прямоугольнику движения. Для этого изменяем с течением времени XML-атрибут X, с 400 до 500 за 10 секунд:
<animate attributeName="x" attributeType="XML" from="400" to="500" begin="0s" dur="10s" repeatCount="1" />

Наша фигура медленно уходит вправо и становится все менее прозрачной. Ну и напоследок, добавим в сценарий обратный ход и смену цвета на красный. Конечный вариант:
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="400" y="100" width="400" height="200" fill="yellow">
<animate attributeName="opacity" attributeType="CSS" from="0" to="1" begin="0s" dur="10s" repeatCount="1" />
<animate attributeName="x" attributeType="XML" from="400" to="500" begin="0s" dur="10s" repeatCount="1" />

<animate attributeName="fill" attributeType="XML" from="yellow" to="red" begin="10s" dur="10s" repeatCount="1" />
<animate attributeName="x" attributeType="XML" from="500" to="400" begin="10s" dur="10s" repeatCount="1" />
<animate attributeName="opacity" attributeType="CSS" from="1" to="0" begin="10s" dur="10s" repeatCount="1" />
</rect>
</svg>

Смотрите: 1.svg.

Еще один пример, с двумя актерами: 2.svg.

Узнать больше можно на странице официальной документации по animate (на анг.)

JavaScript и ECMAScript

К сожалению, SMIL не умеет считать, ведь это язык разметки. Если есть необходимость вычислять сложные траектории полета фигур, анимацию лучше реализовывать посредством языка программирования (ECMA или Java)Script. Каждый элемент SVG рисунка - элемент DOM, поэтому никаких сложностей у знатока JS возникнуть не должно. Доступ к элементу - getElementById, изменение значения атрибута - setAttribute, а остальное - дело техники. Однако предпочтительнее использование библиотеки Raphael.