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.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/GOd12sZlVjE/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

SVG: анимация | | 2013-01-16 22:42:27 | | Статьи Web-мастеру | | В предыдущих уроках серии мы разбирались использованием векторной графики SVG в HTML. Теперь пришел черед рассмотреть анимацию SVG. ОсновыАнимация SVG выполняется с помощью элемента : Мы добавляем | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: