Опубликован: 07.11.2007 | Уровень: специалист | Доступ: платный
Лекция 11:

Анимация

Аннотация: Анимация в SVG – графике. Элементы animate, animateColor, animateMotion, animateTransform, set. Атрибуты attributeType="CSS", attributeType="XML". Анимация градиента, нескольких преобразований, фильтров, по ссылке. Концепция SVG и Adobe Flash CS3.

Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Анимация в SVG – графике

Анимация - это основа SVG графики. Успех распространения всей платформы во многом зависит от того, насколько удобными и полезными являются встроенные средства анимации по сравнению, скажем с Flash.

Все анимации делятся на пять категорий в зависимости от их вида. Для их создания используются специальные элементы, описание которых приводится табл. 11.1

Таблица 11.1. Элементы вида анимации.
Элемент Описание
<animate> Анимация отдельного свойства элемента в течение определенного промежутка времени.
<animateColor> Задание изменения цвета элемента.
<animateMotion> Анимация, в которой элемент двигается вдоль заданной траектории.
<animateTransform> Анимация, в которой участвуют трансформации (преобразования).
<set> Анимация дискретного изменения свойства.

Внутри этих элементов помещаются атрибуты, определяющие тип анимации. В табл. 11.2 приводится их описание.

Таблица 11.2. Атрибуты типа анимации.
Атрибут Описание
attributeName Указание свойства объекта, которое будет анимироваться. Например, для изменения цвета фигуры (заливки) атрибут будет выглядеть так: attributeName="fill"
attributeType Задание пространства имеет, указывающее тип атрибута. Возможные значения: CSS – анимация свойств, относящихся к спецификации CSS (Шрифт, цвет шрифта, кернинг и другие). XML – анимация свойства, относящегося к SVG – графике (Перенос, вращение, искажение и другие). auto – значение по умолчанию, включающее в себя значения свойств CSS и XML.

Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар "атрибутзначение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 11.3 приводится описание атрибутов анимации. Это общие атрибуты для всех элементов анимации.

Таблица 11.3. Атрибуты анимации.
Атрибут Описание
begin Задание времени старта анимации. Например, при значении begin="3s" анимация начнет воспроизводиться после трех секунд, с момента загрузки SVG – документа.
dur Продолжительность воспроизведения.
end Задание времени окончания.
restart Возможность повторного воспроизведения. При значении always анимацию может быть воспроизведена заново в любой момент времени, whenNotActive – после завершения встроенного цикла, never – не может быть воспроизведена повторно вообще.
repeatCount Число повторений анимации. При значении indefinite повторение будет бесконечным.
repeatDur Задание времени, в течение которого анимация может быть воспроизведена повторно.
fill Определение поведения анимируемого элемента, по окончании анимации. При значении remove элемент станет невидимым в ролике, freeze – элемент останется в ролике в том виде (или на том месте), которого он достиг в конце своей анимации. Например, для рекламного ролика, сочетающего в себе несколько анимируемых объектов, используется значение freeze, позволяющее собрать последовательные элементы в один конечный результат.
min Минимальный период анимации.
max Максимальный период анимации.
from Начальное значение анимируемого свойства (цвет, координата, размер).
to Конечное значение анимируемого свойства
values Промежуточные значения анимируемого свойства. Допускается задание в виде ряда значений, разделенных пробелами.

Элемент animate

Элемент animate предназначен для анимации отдельного свойства объекта. Поскольку каждый объект может содержать большое количество свойств, то применение этого элемента позволяет создавать весьма разнообразные анимации. Рассмотрим следующий фрагмент кода:

<rect y="40" width="20" height="20" fill="red">
<animate attributeName="x" 
         from="0" to="200" dur="10s"
  repeatCount="indefinite"/>
</rect>

Внутри тега rect элемента прямоугольник помещен элемент animate. В течении анимации будет изменяться координата по горизонтали прямоугольника – на это указывает атрибут attributeName="x". Границы изменения (в пикселях) устанавливаются от нуля ( from="0" ) до двухсот ( to="200" ). По умолчанию, анимация начнется сразу после загрузки в браузер, и будет продолжаться в течении 10 секунд ( dur="10s" ). По истечении заданного времени прямоугольник вернется в точку 0 и анимация начнется снова, поскольку задано бесконечное повторение ( repeatCount="indefinite" ). В табл. 11.4 приводятся примеры с использованием элемента animate.

Таблица 11.4. Элемент animate.
Код Вид в браузере
11.4.1
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animate1.svg
     </desc>
<rect x ="5" y="5" width="190" height="90"
      stroke="green" stroke-width="2" fill="none"></rect>

<rect y="40" width="20" height="20" fill="red">
<animate attributeName="x" 
         from="0" to="200" dur="10s"
            repeatCount="indefinite"/>
</rect>
</svg>
Листинг 11.4.1. Пример animate1.svg
Описание
Изменение абсциссы прямоугольника
Код Вид в браузере
11.4.2
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация </title>
     <desc>
          Пример animate2.svg
     </desc>
<rect x ="5" y="5" width="190" height="90"
      stroke="green" stroke-width="2" fill="none"></rect>

<rect x="90" width="20" height="20" fill="red">
<animate attributeName="y" 
         from="0" to="100" dur="5s"
    repeatCount="indefinite"/>
</rect>
</svg>
Листинг 11.4.2. Пример animate2.svg
Описание
Изменение ординаты прямоугольника.
Код Вид в браузере
11.4.3
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация </title>
     <desc>
          Пример animate3.svg
     </desc>
<rect x ="5" y="5" width="190" height="90"
      stroke="green" stroke-width="2" fill="none"></rect>

<rect  width="20" height="20" fill="red">
<animate attributeName="x" 
         from="0" to="200" dur="10s"
        repeatCount="indefinite"/>
<animate attributeName="y" 
         from="0" to="100" dur="10s"
        repeatCount="indefinite"/>
</rect>
</svg>
Листинг 11.4.3. Пример animate3.svg
Описание
Одновременное увеличение абсциссы и ординаты, в результате чего прямоугольник будет двигаться по диагонали.
Код Вид в браузере
11.4.4
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 11. Анимация</title>
     <desc>
          Пример animate4.svg
     </desc>
<rect x ="5" y="5" width="190" height="90"
      stroke="green" stroke-width="2" fill="none"></rect>

<rect x="5" y="5" width="20" height="20" fill="red">
<animate attributeName="width" 
         from="0" to="195" dur="10s"
        repeatCount="indefinite"/>
<animate attributeName="height" 
         from="0" to="95" dur="10s"
          repeatCount="indefinite"/>
</rect>
</svg>
Листинг 11.4.4. Пример animate4.svg
Описание
Одновременное увеличение ширины и высоты прямоугольника.

В рассмотренных примерах мы видели изменение простейших свойств объекта – его координат, ширины и высоты.

Варвавра Зарбалиева
Варвавра Зарбалиева
Россия, г. Гуково
Кристина Айрапетян
Кристина Айрапетян
Россия, Челябинск, Южно-уральский институт управления и экономики