Масштабируемая векторная графика (Scalable Vector Graphics)

Анимация

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

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

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

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

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

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

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

Для создания анимации следует определить, свойства объекта, которые будут изменяться, их результирующий вид, а также начало и продолжительность всех изменений. Описание представляет собой последовательную запись пар "атрибут – значение атрибута". Для создания заданной анимации, например, перемещения объекта, следует указать необходимый набор, без которого анимация просто не будет воспроизводиться. Однако кроме необходимого набора можно указывать дополнительные пары атрибутов, описывающих анимацию детальным образом или придавая ей ряд новых свойств. В табл. 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.

Элемент 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.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.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.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>
Описание
Одновременное увеличение ширины и высоты прямоугольника.

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

Элемент animate – анимация градиента

Элемент градиент может быть динамичным, причем определение анимации происходит непосредственно внутри секции defs:

<defs>
<linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">

<stop offset="0" style="stop-color:white;"/>
     <stop offset="100%" style="stop-color:blue;">
<animate attributeName="offset" 
         from="0%" to="100%" dur="10s"
         repeatCount="indefinite"/>
</stop>
</linearGradient>
</defs>

<rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>

Анимация будет видна, если в документе будет хотя бы одна фигура, с указанной градиентной заливкой. В данном случае в качестве такой фигуры выступает прямоугольник. В табл. 11.5 приводятся пример анимированного градиента.

Анимация градиента.
№ Код Вид в браузере
11.5.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="150" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 11. Анимация</title>
     <desc>
          Пример animateGradient1.svg
     </desc>

<defs>
    <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">

      <stop offset="0" style="stop-color:white;"/>
     <stop offset="100%" style="stop-color:blue;">
      <animate attributeName="offset" 
         from="0%" to="100%" dur="10s"
               repeatCount="indefinite"/>
      </stop>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="150" height="150" fill="url(#MyGradient)"/>
</svg>
Описание
Атрибут attributeName в данном случае принимает значение "offset", поскольку этот параметр отвечает за границу области градиента. В результате в течении 10 секунд можно видеть последовательное смещение границы.
№ Код Вид в браузере
11.5.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="150" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 11. Анимация</title>
     <desc>
     Пример animateGradient2.svg
     </desc>

<defs>
<radialGradient id="MyGradient">
      <stop offset="0" style="stop-color:blue;"/>
     <stop offset="100%" style="stop-color:white;">
      <animate attributeName="offset" 
         from="0%" to="100%" dur="10s"
               repeatCount="indefinite"/>
      </stop>

</radialGradient>

  </defs>
<circle cx="75" cy="75" r="70" fill="url(#MyGradient)"/>
</svg>
Описание
Аналогичный пример для радиального градиента.

Элемент animate. Применение attributeType="CSS"

При анимации свойств, названия которых соответствуют спецификации CSS, следует указывать значение CSS атрибута attributeType явным образом. В табл. 11.6 приводится пример изменения атрибута stroke-width.

Элемента animate, attributeType="CSS"
№ Код Вид в браузере
11.6.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>
          Пример animateAT_CSS1.svg
     </desc>
<rect x ="5" y="5" width="190" height="90"
      stroke="green" stroke-width="2" fill="none"></rect>

<rect x="75" y="25" width="50" height="50"  fill="none"
      stroke="red">
<animate  attributeType="CSS" attributeName="stroke-width" 
         from="0" to="45" dur="10s"
        repeatCount="indefinite"/>

</rect>
</svg>
Описание
Изменение толщины контура прямоугольника.

Элемент animateColor

Для последовательной смены цвета заливки или контура фигуры применяется элемент animateColor:

<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animateColor attributeName="fill" 
         from="red" to="yellow" dur="3s"
         repeatCount="indefinite"/>
</ellipse>

Мы видим, что атрибуты внутри этого элемента в точности такие же, как и в случае использования элемента animate. В табл. 11.7 приводятся примеры изменения цвета фигур.

Элемент animateColor.
№ Код Вид в браузере
11.7.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>
          Пример animateColor1.svg
     </desc>

<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animateColor attributeName="fill" 
         from="red" to="yellow" begin="2s" dur="8s" fill="freeze"/>
</ellipse>

</svg>
Описание
Последовательный переход красного цвета в желтый. Анимация начинается через две секунды после загрузки ролика ( begin="2s" ). После завершения фигура остается желтой ( fill="freeze" ).
№ Код Вид в браузере
11.7.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>
          Пример animateColor2.svg
     </desc>

<ellipse cx="100" cy="50"  rx="80" ry="40" fill="red">
<animateColor attributeName="fill" 
         from="red" to="orange" begin="2s" dur="3s"/>
<animateColor attributeName="fill" 
         from="orange" to="yellow" begin="prev.end" dur="3s"/>
<animateColor attributeName="fill" 
         from="yellow" to="green" begin="prev.end" dur="3s"/>
<animateColor attributeName="fill" 
         from="green" to="deepskyblue" begin="prev.end" dur="3s"/>
<animateColor attributeName="fill" 
         from="deepskyblue" to="blue" begin="prev.end" dur="3s"/>
<animateColor attributeName="fill" 
         from="blue" to="purple" begin="prev.end" dur="3s" fill="freeze"/>
</ellipse>

</svg>
Описание
Последовательная серия изменения цвета фигуры. Следующий этап анимации начинается тогда, когда заканчивается предыдущий ( begin="prev.end" ).
№ Код Вид в браузере
11.7.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="400" height="70"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация </title>
     <desc>
     Пример animateColor3.svg
     </desc>
<text x="10" y="50" style="fill:yellow; stroke:red;
font-family:Times New Roman; font-size:60;">
      SVG - графика

<animateColor attributeName="fill" 
         from="yellow" to="red" begin="2s" dur="8s" fill="freeze"/>

</text>
</svg>
Описание
Изменение цвета заливки текста. Атрибут fill включает в себя также цвет контура текста.

Элемент animateMotion

Одна из самых интересных возможностей SVG - анимации – движение объекта вдоль произвольной траектории. В качестве объекта может быть применяться простой элемент, группа элементов, текст или растровое изображение. Рассмотрим фрагмент кода:

<rect x="-10" y="-10" width="20" height="20" fill="red">
<animateMotion path="M20 100 C20 0 180 0 180 100" dur="10s" rotate="auto"
     repeatCount="indefinite"/>
</rect>

Здесь красный квадратик будет двигаться вдоль траектории, определяемой элементом path. Для центровки квадратика относительно траектории заданы смещенные на половину ширины значения координат x="-10" y="-10". Атрибут rotate="auto" указан для автоматического поворота объекта вокруг своей оси при движении. Сама траектория не отображается в окне документа.

В табл. 11.8 приводятся примеры использования элемента animateMotion.

Элемент animateMotion.
№ Код Вид в браузере
11.8.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="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateMotion1.svg
     </desc>

<path d="M20 100 C20 0 180 0 180 100" 
         style="fill: none; stroke:blue;stroke-width:2;"/>

<rect x="-10" y="-10" width="20" height="20" fill="red">
<animateMotion path="M20 100 C20 0 180 0 180 100" dur="10s" rotate="auto"
          repeatCount="indefinite"/>
<!-- А вот так движение повторится три раза и затем остановится:-->
<!--<animateMotion path="M20 100 C20 0 180 0 180 100" dur="10s" rotate="auto"
              repeatCount="3" fill="freeze"/>-->

</rect>
</svg>
Описание
Движение простого элемента вдоль траектории path. Здесь( и далее) для отображения траектории был добавлен отдельный элемент path.
№ Код Вид в браузере
11.8.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="400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateMotion2.svg
     </desc>
<!--Первая траектория-->
<path d = "M20,20 180,20 180,180 20, 180 20,20 z" 
         style="fill: none; stroke:blue;stroke-width:2;"/>

<!--Прямоугольник-->
<rect x="-10" y="-10" width="20" height="20" 
      fill="red">
<animateMotion 
       path="M20,20 180,20 180,180 20, 180 20,20 z"  
       dur="10s" rotate="auto"
       repeatCount="indefinite"/>
</rect>

<!-- Вторая траектория-->
<path d = "M20,220 180,220 180,380 20, 380 20,220 z" 
         style="fill: none; stroke:green;stroke-width:2;"/>

<!-- Текст -->
<text 
  style="font-family:Times New Roman; stroke:orangered; fill:lime;font-size:30;">
      svg
<animateMotion 
          path="M20,220 180,220 180,380 20, 380 20,220 z" 
          dur="15s" rotate="auto"
          repeatCount="indefinite"/>
</text>

</svg>
Описание
Одновременное движение двух объектов – элемента rect и текста.
№ Код Вид в браузере
11.8.3 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="360" height="360"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateMotion3.svg
     </desc>
<!--Первая траектория-->
<path d = "M20,20 180,20 180,180 20, 180 20,20 z" 
         style="fill: none; stroke:blue;stroke-width:2;"/>

<!-- Вторая траектория-->
<path d = "M180,180 340,180 340,340 180, 340 180,180 z" 
         style="fill: none; stroke:green;stroke-width:2;"/>

<!-- Текст на траектории -->
<text style="font-family:Times New Roman; stroke:orangered; 
         fill:lime;font-size:30;">
      svg
<animateMotion 
          path="M20,20 180,20 180,180 340,180 340,340 180,340 180,180 20,180 20,20 z"
          dur="15s" rotate="auto"
          repeatCount="indefinite"/>
</text>

</svg>
Описание
Движение текста вдоль сложной траектории.
№ Код Вид в браузере
11.8.4 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="360" height="360"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateMotion4.svg
     </desc>
<!--Первая траектория-->
<path d = "M20,20 180,20 180,180 20, 180 20,20 z" 
         style="fill: none; stroke:blue;stroke-width:2;"/>

<!-- Вторая траектория-->
<path d = "M180,180 340,180 340,340 180, 340 180,180 z" 
         style="fill: none; stroke:green;stroke-width:2;"/>

<!-- Объект на траектории -->
  <path d="M0 0 v -5 h20 v-10 l10 15 l-10 15 v-10 h-20 v-5" 
         style="fill: red; stroke:black;stroke-width:1;">
<animateMotion 
         path="M20,20 180,20 180,180 340,180 340,340 180,340 180,180 20,180 20,20 z" 
         dur="15s" rotate="auto"
         repeatCount="indefinite"/>
</path>

</svg>
Описание
Движение элемента path вдоль траектории, определяемой другим элементом path.
№ Код Вид в браузере
11.8.5 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="360" height="360"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateMotion5.svg
     </desc>
<!--Первая траектория-->
<path d = "M20,20 180,20 180,180 20, 180 20,20 z" 
         style="fill: none; stroke:blue;stroke-width:2;"/>

<!-- Вторая траектория-->
<path d = "M180,180 340,180 340,340 180, 340 180,180 z" 
         style="fill: none; stroke:green;stroke-width:2;"/>

<!-- Объект на траектории -->
  <image height="50" 
         xlink:href="ducky.png" width="46">
<animateMotion 
          path="M20,20 180,20 180,180 340,180 340,340 180,340 180,180 20,180 20,20 z" 
          dur="15s" rotate="auto"
          repeatCount="indefinite"/>
</image>

</svg>
Описание
Движение растрового изображения. В этом примере (в отличие от предыдущих), привязка к траектории осуществляется по умолчанию – к левому верхнему углу изображения.

Элемент animateTransform. Применение attributeType="XML"

Элемент animateTransform позволяет "оживлять" трансформации. Как и для прочих элементов анимации нужно указывать начальные и конечные значения:

<rect x="25" y="25" width="50" height="25"  fill="skyblue"
      stroke="red" stroke-width="2">
     <animateTransform attributeName="transform" 
       attributeType="XML" type="translate"
from="0,0" to="100,75" begin="1s" dur="2s" fill="freeze"/>
     </rect>

В этом случае прямоугольник будет перемещаться из точки с координатами 0,0 в точку с координатами 100,75 в результате применения команды translate. Для элемента animateTransform указывается атрибут attributeName="transform" поскольку в анимации используется встроенная команда SVG – графики.

В табл. 11.9 приводятся примеры с использованием элемента animateTransform.

Элемент animateTransform.
№ Код Вид в браузере
11.9.1 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 11. Анимация</title>
     <desc>
          Пример animateTransform1.svg
     </desc>

     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2">
     <animateTransform attributeName="transform" attributeType="XML" 
                       type="translate" from="0,0" to="100,75" 
                       begin="1s" dur="2s" fill="freeze"/>
     </rect>


</svg>
Описание
Перемещение прямоугольника. Анимация команды translate.
№ Код Вид в браузере
11.9.2 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 11. Анимация</title>
     <desc>
          Пример animateTransform2.svg
     </desc>

     <!--Движущийся прямоугольник-->

     <rect x="25" y="25" width="50" height="25"  
           fill="blue" stroke="red" stroke-width="2">
     <animateTransform attributeName="transform" attributeType="XML" 
                       type="translate" from="0,0" to="100,75" 
                       begin="1s" dur="2s" fill="freeze"/>
     </rect>

     <!--Первый неподвижный прямоугольник-->
     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2"/>

     <!--Второй неподвижный прямоугольник-->
     <rect x="25" y="25" width="50" height="25"  
           fill="palegreen" stroke="red" stroke-width="2" 
           transform="translate(100,75)"/>

</svg>
Описание
Перемещение прямоугольника на фоне неподвижных объектов.
№ Код Вид в браузере
11.9.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>
          Пример animateTransform3.svg
     </desc>
     <rect x="25" y="25" width="50" height="25"  
           fill="skyblue" stroke="red" stroke-width="2"/>

     <rect x="25" y="50" width="50" height="25"  
           fill="palegreen" stroke="red" stroke-width="2">
<animateTransform attributeName="transform" type="scale" 
         from="1,1" to="2,1" begin="0" dur="2s" 
         fill="freeze"/>
</rect>
</svg>
Описание
Вытягивание прямоугольника в горизонтальном направлении. Анимация команды scale.
№ Код Вид в браузере
11.9.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="400" height="400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 11. Анимация</title>
     <desc>
          Пример animateTransform4.svg
     </desc>
     <!--Прямоугольник - рамка рисунка-->
     <rect x="5" y="5" width="390" height="390"  
           fill="none"
           stroke="blue" stroke-width="2"/>
     <!--Исходная фигура-->
     <g>
          <rect x="200" y="200" width="100" height="50"  
                fill="yellow"
                stroke="red" stroke-width="4"/>
          <rect x="200" y="200" width="50" height="25"  
                fill="green"   
                stroke="red" stroke-width="4"/>
     </g>
     <!--Вращающаяся фигура-->
          <g>
          <rect x="200" y="200" width="100" height="50"  
                fill="yellow"
                stroke="red" stroke-width="4"/>
          <rect x="200" y="200" width="50" height="25"
                fill="green"
                stroke="red" stroke-width="4"/>

          <animateTransform attributeName="transform" attributeType="XML" 
                            type="rotate" from="0" to="360" 
                            begin="2s" dur="10s" fill="freeze"/>
     </g>

</svg>
Описание
Вращение прямоугольника относительно начала системы отсчета рисунка. Анимация команды rotate. Для просмотра невидимой части вращения рисунок можно перетаскивать (Alt + кнопка мыши).
№ Код Вид в браузере
11.9.5 
<?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="400" height="400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 11. Анимация</title>
     <desc>
          Пример animateTransform5.svg
     </desc>
     <!--Прямоугольник - рамка рисунка-->
     <rect x="5" y="5" width="390" height="390"  fill="none"
      stroke="blue" stroke-width="2"/>
     <!--Исходная фигура-->
     <g>
          <rect x="200" y="200" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="200" y="200" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Вращающаяся фигура-->
          <g>
          <rect x="200" y="200" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="200" y="200" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>

          <animateTransform attributeName="transform" attributeType="XML" 
                            type="rotate" from="0, 200, 200" to="360, 200, 200" 
                            begin="2s" dur="10s" fill="freeze"/>
     </g>

</svg>
Описание
Вращение объекта относительно его левой верхней точки.
№ Код Вид в браузере
11.9.6 
<?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="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 11. Анимация</title>
     <desc>
          Пример animateTransform6.svg
     </desc>

     <!--Исходная фигура-->
     <g>
          <rect x="10" y="10" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>
     </g>
     <!--Трансформированная фигура -->
          <g>
          <rect x="10" y="10" width="100" height="50"  
                fill="yellow" stroke="red" stroke-width="4"/>
          <rect x="10" y="10" width="50" height="25"  
                fill="green" stroke="red" stroke-width="4"/>

     <animateTransform attributeName="transform" attributeType="XML" 
                type="skewY" from="0" to="45" 
                begin="2s" dur="10s" fill="freeze"/>
     </g>

</svg>
Описание
Искажение объекта в вертикальном направлении. Анимация команды skewY.

Анимация нескольких трансформаций

Рассмотренные виды анимации можно комбинировать в определенной последовательности, получая нужный ролик. В табл. 11.10 приводится пример подобного ролика.

Анимация нескольких трансформаций.
№ Код Описание
11.10.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="260" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1500 3000">
<title> Лекция 11. Анимация </title>
     <desc>
          Пример animateTransformMulti.svg
     </desc>

<g>
          <g>
          <circle cx="500" cy="400"  r="300" 
                fill="lightskyblue"
                stroke="blue" stroke-width="30"/>
          <ellipse cx="500" cy="500"  rx="150" ry="100" fill="none" 
         stroke="blue" stroke-width="30"/>
          <rect x="300" y="370" width="400" height="130"  fill="lightskyblue"/>
          <ellipse cx="350" cy="300"  rx="100" ry="50" fill="white" 
         stroke="blue" stroke-width="30"/>
          <ellipse cx="650" cy="300"  rx="100" ry="50" fill="white" 
         stroke="blue" stroke-width="30"/>
          <circle cx="350" cy="300"  r="25" fill="black"/>
          <circle cx="650" cy="300"  r="25" fill="black"/>
          <!--Увеличение фигуры в два раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1" to="2" begin="0" dur="1s"      fill="freeze"/>
          </g>
     <!-- Вращение фигуры относительно нового центра с координатами 1000,800, 
             полученных в результате удвоения старых: 
             пcx="500"*2  cy="400"*2 -->
<animateTransform attributeName="transform" attributeType="XML" type="rotate" 
         from="0, 1000, 800"
to="360, 1000, 800" begin="1" dur="1s"
   repeatCount="indefinite"/>
</g>
     <g>
          <g>
               <text x="-900" y="2000" style="fill:yellow; stroke:red;
          font-family:Times New Roman; font-size:500;">
      SVG - графика
          <!-- Изменение цвета текста -->
          <animateColor attributeName="fill" 
         from="yellow" to="red" begin="2s" dur="2s"
                     repeatCount="indefinite"/>

          </text>
          <!-- Увеличение ширины  текста в 1,2 раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1,1" to="1.2,1" begin="2" dur="1s"
          repeatCount="indefinite"/>

          </g>
          <!-- Увеличение высоты  текста в 1,2 раза -->
          <animateTransform attributeName="transform" type="scale" 
         from="1,1" to="1,1.2" begin="2" dur="1s"
                     repeatCount="indefinite"/>
</g>

</svg>
 При загрузке ролика мы видим текст и увеличивающуюся в течении секунды группу объектов. В течении следующей секунды группа начинает вращаться, а спустя еще одну секунду начинает увеличиваться текст с одновременным изменением всего цвета.
Вид в браузере

Элемент set. Анимация по ссылке

Элемент set позволяет изменять анимируемые свойства не плавно, а скачком:

<ellipse cx="100" cy="50"  rx="60" ry="40" fill="lightpink" 
         stroke="lightcoral" stroke-width="4">
<set attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>
</ellipse>

В результате выполнения этого кода вертикальный радиус элемента эллипс изменит свой размер на две секунды. Анимация начнется спустя одну секунду после загрузки ролика. Существует еще один способ создания анимации, когда к уже имеющемуся элементу обращаются по его id для изменения свойств:

<ellipse id="myEllipse" cx="100" cy="150"  rx="60"
ry="40" fill="yellow" stroke="orange" stroke-width="4"/>
<set  xlink:href="#myEllipse" attributeName="ry" to ="20"
begin="1s" dur="2s"/>

Этот способ, впрочем, может применяться для всех видов анимации. В табл. 11.11 приводятся примеры элемента set.

Элемент set.
№ Код Вид в браузере
11.11.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="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример set1.svg
     </desc>

<rect x="5" y="5" width="190" height = "190" 
      fill = "none" stroke="blue" stroke-width="2"/>

     <!--Анимация при встраивании атрибута set внутри тега ellipse-->
     <ellipse cx="100" cy="50"  rx="60" ry="40" 
              fill="lightpink" stroke="lightcoral" stroke-width="4">
     <set attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>
     </ellipse>

     <!--Анимация c применением ссылки-->
     <ellipse id="Myellipse" cx="100" cy="150" rx="60" ry="40" 
              fill="yellow" stroke="orange" stroke-width="4"/>     
     <set  xlink:href="#Myellipse" attributeName="ry" to ="20" 
         begin="1s" dur="2s"/>

</svg>
Описание
Два эллипса – розовый и желтый в течении секунды после загрузки отображаются в исходном виде. Далее, в течении двух секунд происходит изменение их вертикальных радиусов. Для розового эллипса анимация применяется непосредственно, для желтого – при помощи ссылки.
№ Код Вид в браузере
11.11.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="250" height="140"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация </title>
     <desc>
     Пример set2.svg
     </desc>

     <rect x="5" y="5" width="240" height = "130" fill = "none"
      stroke="green" stroke-width="2"/>
<text x="10" y="50" style="fill:yellow; stroke:red;
font-family:Times New Roman; font-size:60; visibility:hidden;">
      SVG

<set attributeName="visibility" attributeType="CSS"
to="visible" begin="1s" fill="freeze"/>

</text>

<text x="10" y="110" style="fill:yellow; stroke:red;
font-family:Times New Roman; font-size:60; visibility:hidden;">
      графика

<set attributeName="visibility" attributeType="CSS"
to="visible" begin="2s" fill="freeze"/>

</text>

</svg>
Описание
Последовательное появление текста. Атрибут visibility элемента text отвечает за отображение текста в SVG – документе.

Анимация фильтров

При определении фильтров мы задавали набор атрибутов, с различными значениями. Анимация фильтров сводится к заданию диапазона изменения этих значений. В табл. 11.12 приводятся виды анимации и названия фильтров, допускающие применение данного вида.

Анимация фильтров.
Вид анимации Фильтр animate set animateColor animateTransform
feBlend + + – –
feColorMatrix + + – –
feComponentTransfer + + – –
feComposite + + – –
feConvolveMatrix + + – –
feDiffuseLighting + + + –
feDisplacementMap + + – –
feDistantLight + + – –
feFlood + + + –
feGaussianBlur + + – –
feImage + + – +
feMerge + + – –
feMorphology + + – –
feOffset + + – –
fePointLight + + – –
feSpecularLighting + + + –
feSpotLight + + – –
feTile + + – –
feTurbulence + + – –

Большая часть фильтров поддерживает лишь два вида анимации: set и animate. Для числовых значений, способных изменяться в определенных пределах, используется анимация animate. Для дискретных значений, например названий операторов, используется анимация set. В этом случае изменения происходят скачком.

№ Код Вид в браузере
11.12.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>
          Пример animateFilter1.svg
     </desc>

<defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="0">
               <animate attributeName="stdDeviation" 
         from="0" to="15" dur="10s"
                       repeatCount="indefinite"/>
               </feGaussianBlur>
          </filter>
     </defs>
     <g id="myImage" style="fill:red;stroke:none" filter="url(#myfeGaussianBlur)">
          <rect x="30" y="30" width="140" height="40"/>
     </g>


</svg>
Описание
Анимация animate атрибута stdDeviation фильтра feGaussianBlur
№ Код Описание
11.12.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="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter2.svg
     </desc>

<defs>
          <filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="over">
     <set attributeName="operator" to ="in" 
         begin="2s" dur="2s"/>
     <set attributeName="operator" to ="out" 
         begin="prev.end" dur="2s"/>
     <set attributeName="operator" to ="atop" 
         begin="prev.end" dur="2s"/>
     <set attributeName="operator" to ="xor" 
         begin="prev.end" dur="2s"/>
</feComposite>
</filter>

<image id="MyImage1" x="10" y="10" width="186" height="125" 
         xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10" width="186" height="125" 
         xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)"/>

</svg>
 Анимация set атрибута operator фильтра feComposite.
Вид в браузере.
№ Код Вид в браузере
11.12.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="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter3.svg
     </desc>

<defs>
          <filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feFlood flood-color="red" flood-opacity='0.3' result='pict2'>
<animateColor attributeName="flood-color" 
         from="red" to="yellow" begin="2s" dur="8s" fill="freeze"/>
</feFlood>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<image id="MyImage1" x="10" y="10" width="186" height="125" 
         xlink:href="sea1.jpg"/>


</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)"/>

</svg>
Описание
Анимация animateColor атрибута flood-color фильтра feFlood.
№ Код Описание
11.12.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="400" height="300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 11. Анимация</title>
     <desc>
          Пример animateFilter4.svg
     </desc>

<defs>
     <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feImage xlink:href="sun.png" x="20" y="20"
               width="372" height="250" 
               opacity="1.0" result="myImage3">
        <animateTransform attributeName="transform" 
                    attributeType="XML" type="translate"
                    from="20,20" to="250,20" 
                    begin="1s" dur="6s" fill="freeze"/>
      </feImage>
      <feImage xlink:href="#Picture4" result="myImage4"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
        <feMergeNode in="myImage3"/>
        <feMergeNode in="myImage4"/>
      </feMerge>
    </filter>
    <image id="Picture1" 
         xlink:href="sea1.jpg" x="20" y="20"
      width="372" height="250" opacity="1.0"/>
    <image id="Picture2" 
         xlink:href="sea2.jpg" x="20" y="20"
      width="372" height="250" opacity="0.5"/>

     <image id="Picture4" 
         xlink:href="boat.png" x="20" y="20"
      width="372" height="250" opacity="1.0"/>
  </defs>

 <rect   x="20" y="20" width="372" height="250"
      style="filter: url(#merge)"/>



</svg>
 Анимация animateTransform типа translate фильтра feImage.
Вид в браузере

Концепция SVG и Adobe Flash CS3

В рассмотренных примерах можно выделить одну важную деталь – для применения параметров данной анимации к нескольким объектам достаточно выделить и скопировать соответствующий фрагмент кода. Эта концепция нашла применение в программе Adobe Flash CS3. Пользователи прошлых версий Macromedia FlashВ 2005 году корпорация Adobe Systems купила компанию Macromedia и теперь "Macromedia Flash" выпускается под именем "Adobe Flash". заметили новую особенность – теперь можно записывать в виде XML-файлов параметры анимации! Создадим новый документ и назовем его "Ball.fla". Рисуем окружность, группируем и устанавливаем ее размеры (рис. 11.1):

(рис 11.1) Установка параметров окружности (выделено рамкой)

В 20 кадре щелкаем правой кнопкой и в появившемся контекстном меню выбираем "Insert Keyframe" ( или нажимаем кнопку F6). Щелкаем мышью на окружности для выделения ее свойств и устанавливаем следующие параметры (рис. 11.2):

(рис 11.2) Свойства окружности в двадцатом кадре

Далее выделяем щелкаем в первый кадр и в его свойствах выбираем из выпадающего списка "Tween:" значение "Motion" (рис. 11.3):

(рис 11.3) Установка свойства "Motion" для кадра

Добавляем вращение шарика (свойство "Rotate" ) и замедление его в конце траектории (Свойство "Ease", рис. 11.4):

(рис 11.4) Свойства анимации шарика

Нажимаем сочетание клавиш "Ctrl+Enter" – появляется ролик, в котором шарик двигается по диагонали (рис. 11.5):

(рис 11.5) Готовый ролик

Конечно, мы не заметим вращения шарика – для этого следует добавить на него, например цифру. Для сохранения созданных параметров анимации в главном меню программы выбираем "Commands\ Export Motion XML" (рис. 11.6):

(рис 11.6) Экспорт настроек анимации в виде XML – файла

В появившемся диалоговом окне сохранения файла вводим название "Ball_animation.xml". Содержимое этого файла можно просмотреть в любом текстовом редакторе:

<Motion duration="1"
     xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
     <source>
          <Source frameRate="12" x="25" y="25" scaleX="1" scaleY="1" rotation="0" elementType="group">
               <dimensions>
                    <geom:Rectangle left="0" top="0" width="50" height="50"/>
               </dimensions>
               <transformationPoint>
                    <geom:Point x="0.5" y="0.5"/>
               </transformationPoint>
          </Source>
     </source>

     <Keyframe index="0" rotateDirection="cw" rotateTimes="1">
          <tweens>
               <SimpleEase ease="1"/>
          </tweens>
     </Keyframe>
</Motion>

Форма записи имеет сходство с SVG – графикой – можно понять значение элементов и атрибутов. Создадим новый проект и назовем его "Rect.fla". Нарисуем прямоугольник, устанавливая для него схожие свойства (рис. 11.7):

(рис 11.7) Свойства прямоугольника

В главном меню выбираем "Commands\ Import Motion XML", в появившемся диалоговом окне выбираем файл "Ball_animation.xml". Дополнительное окно позволяет задать дополнительные опции импортируемой анимации. Для данного примера можно просто нажать "ОК" (рис. 11.8):

(рис 11.8) Дополнительное окно опций анимации

В результате для прямоугольника появляется тот же самый тип анимации "Motion", c замедлением и вращением (рис. 11.9):

(рис 11.9) Импортированные свойства анимации

Осталось только установить ключевой кадр и определить конечное положение объекта. Все остальные свойства уже определены. Теперь заметно вращение (рис. 11.10):

(рис 11.10) Готовая анимация "Rect.fla"

Понятно, что исходный файл "Ball_animation.xml" может неоднократно применяться для задания свойств анимации других объектов.

К сожалению, эта версия программы не позволяет представлять весь код в виде XML – файла. По-видимому, появления этой возможности можно ожидать в следующих версиях программы.

Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^