SVG: анимация

В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG.

Основы

Анимация SVG выполняется с помощью элемента <animate>:

<svg>
<rect width="200" height="200" fill="slategrey">
<animate attributeName="height" from="0" to="200" dur="3s"/>
</rect>
</svg>

Мы добавляем элемент <animate> внутрь элемента <svg>, который будем анимировать. Элемент <animate> содержит следующие атрибуты:

attributeName: здесь определяется атрибут, который будет участвовать в анимации.

from: опциональный атрибут. Определяет стартовое значение, по умолчанию используется текущее значение.

to: данный атрибут определяет направление анимации. В зависимости от заданного в атрибуте attributeName значения результат может различаться. В приведенном примере будет изменяться высота элемента.

dur: определяется длительность анимации. Значение нужно задавать в формате Clock Value Syntax. Например, 02:33 соответствует 2 минутам и 33 секундам, а 3h соответствует 3 часам. Для нашего примера мы определяем длительность анимации в 3 секунды.

То же самое мы проделываем с элементом <circle>, но для него будет анимировать атрибут радиуса (r).

<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="r" from="0" to="100" dur="3s"/>
</circle>
</svg>

Перемещение элементов

Для перемещения SVG элементов нужно только указать координаты x и y:

<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>

В примере мы перемещаем прямоугольник с 0 до 200 за 3 секунды. Также мы добавляем атрибут fill к элементу <animate>. Данный атрибут определяет как анимация будет действовать после завершения. В примере значение freeze вынуждает элемент оставаться там, где завершается анимация.

Также все действует и для элемента <circle>, но для него будем изменять атрибуты cx или cy:

<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
</circle>
</svg>

Анимация нескольких атрибутов

Конечно, в элементе <animate> мы можем задавать изменения только для одного атрибута, но самих элементов <animate> мы можем определять несколько. Вот так, например:

<svg>
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
<animate attributeName="r" from="0" to="100" dur="3s"/>
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
</circle>
</svg>

Здесь мы анимируем для атрибута для элемента  <circle> - радиус и ширину обводки.

Задаем траекторию перемещения

В одном из предыдущих уроков серии мы рассматривали как расположить текст по заданной линии. Также можно задавать анимацию элемента по заданной траектории:

<svg>

<defs>
<path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>
</defs>

<circle r="15" cx="15" cy="15" fill="slategrey">

</svg>

Траекторию лучше задавать с помощью элемента <defs>, как показано в примере. Чтобы векторный элемент следовал по траектории нужно определить анимацию с помощью элемента <animateMotion> и связать id траектории с элементом <mpath>:

<animateMotion dur="3s">
	<mpath xlink:href="#thepath"/>
</animateMotion>

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

Мы также можем использовать трансформации scale, translate и rotate для анимаций с помощью элемента  <animateTransform>:

<svg>
<rect width="200" height="200" fill="slategrey">
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
</rect>
</svg>

Трансформации в SVG действуют по тому же принципу, что и в CSS3.

Заключение

С помощью описанных инструментов можно создавать различные эффекты и приложения. Например, такие, которые пока выглядят баловством, но скрывают в себе большой потенциал, особенно в условиях отступления Flash.