Масштабируемая векторная графика
[+]
Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1748 / 327 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Тема: Компьютерная графика
Специальности: Программист
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементы
Лекция 11:

Анимация
A
|
версия для печати
< Лекция 10 || Лекция 11: 123456 || Лекция 12 >

Элемент 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 приводятся примеры изменения цвета фигур.

Таблица 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>
Листинг 11.7.1. Пример animateColor1.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>
Листинг 11.7.2. Пример animateColor2.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>
Листинг 11.7.3. Пример animateColor3.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.

Таблица 11.8. Элемент 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>
Листинг 11.8.1. Пример animateMotion1.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>
Листинг 11.8.2. Пример animateMotion2.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.3. Пример animateMotion3.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>
Листинг 11.8.4. Пример animateMotion4.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>
Листинг 11.8.5. Пример animateMotion5.svg
Описание
Движение растрового изображения. В этом примере (в отличие от предыдущих), привязка к траектории осуществляется по умолчанию – к левому верхнему углу изображения.
Дальше >>
< Лекция 10 || Лекция 11: 123456 || Лекция 12 >

Вопросы и ответы

вопросов: 0