Лабораторная работа № 7. SVG-анимация

Цель: научиться применять анимацию к различным свойствам svg-фигур, создавать анимацию трансформаций.

 

Теория

 

SMIL (the Synchronized Multimedia Integration Language) – язык разметки, c помощью которого осуществляется анимация в SVG. В SVG каждой отдельной геометрической фигуре можно присвоить свои инструкции по поведению, каждый элемент может стать актером на сцене – холсте. Как и SVG, SMIL представляет из себя простой XML.

Тег <animate> анимирует отдельные свойства. Можно прописать тег <animate> непосредственно в теге фигуры с указанием анимированного свойства в параметре attributeName. В примере анимируется свойство cx, расположение по оси x изменяется от 100 до 300px:

 

<circle cy="70" r="50" fill="red">

<animate attributeName="cx" from="100" to="300"dur="5s"/>

</circle>

 

Анимируемыми свойствами могут быть также толщина обводки stroke-width; радиус в круге или размеры в других фигурах; заливка (при этом изменение заливки можно задавать от цвета к цвету); прозрачность opacity от 0 до 1, пунктирная заливка stroke-dasharray и др.

Ниже приведены различные примеры:

<animate attributeName="fill" from="blue" to="red"dur="6s" repeatCount="indefinite"/>

 

<animate attributeName="fill" values="red; yellow; green; #0000ff <!-- несколько промежуточных значений цвета--> dur="15s" fill="freeze"/>

 

Можно задавать сразу несколько анимаций, и они будут выполняться одновременно, для последовательного выполнения можно задать атрибут begin.

 

<animate attributeName="fill" from="red" to="blue" dur="6s" begin="0s" repeatCount="indefinite" />

<animate attributeName="fill" from="blue" to="red" dur="6s" begin="6s" repeatCount="indefinite" />

 

В теге <animate> можно ссылаться на анимируемый объект через его id:

<circle id="myelement" r="50" cx="100" cy="70" fill="red"/>

<animate xlink:href="#myelement" attributeName="fill" from="red" to="blue" dur="5s"/>

Тег <animateTransform> предназначен для создания анимации трансформаций, вид трансформации указывается в атрибуте type.

 

<rect x="5" y="10" width="50" height="25" fill="grey"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="4" dur="5s" fill="freeze"/></rect>

<animateTransform xlink:href="#mygroup" attributeName="transform" attributeType="XML" type="rotate" from="0, 60 50" to="45,60,50" dur="5s" additive="sum" fill="freeze"/>

Для обработки событий мыши можно воспользоваться тегами анимации с атрибутами begin и end.

Например:

begin="mousedown" end="mouseup" или begin="mouseover".

Задания к лабораторной работе № 7

Задание 1. Напишите коды следующих анимаций для любого примитива (круг, прямоугольник):

- перемещение по прямой;

- изменение размера (радиуса);

- изменение цвета при одновременном перемещении по оси X;

- изменение толщины обводки.

 

Задание 2. Примените анимацию трансформации для изменения размеров любого svg-контура из предыдущей работы.

Задание 3. Добавьте обработку событий в любую из созданных ранее анимациий.

Для эффекта постепенной прорисовки необходимо установить свойства stroke-dasharray (длина штриха) и stroke-dashoffset (сдвиг штриха) равными длине контура (подбирается на глаз, например 500px), а затем любыми известными уже нам способами установить свойство stroke-dashoffset в 0.

 

Задание 4. Создайте новый html файл с svg-изображением. Скопируйте svg-код иконки из предыдущей лабораторной работы. Увеличьте масштаб при помощи параметра viewBox. Если в этом параметре задать размер меньше, чем в параметрах высоты и ширины svg области, то изображение зрительно увеличится. В примере кода изображение увеличено в 2 раза.

 

<svg width="400" height="200" viewBox="0 0 200 100">

 

Задание 5. Задайте контуру свойства stroke-dasharray и stroke-dashoffset. Примените эффект прорисовки при помощи команды

 

<animate attributeName="stroke-dashoffset"…..>