Анимация в SVG.

Лабораторная работа №7 по предмету «Графическая визуализация».

Выполнил студент второго курса математического факультета Фомин В.Л.

Анимация в SVG

Цель работы: Кривая Безье (пропеллер) вращается вокруг своей оси, и плоскость её поворачивается, при этом происходит изменение цвета. 

< ?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="600" height="400">
< g>
< g>
< g>
< g>
< circle cx="300" cy="200" r="200" />
< animateColor attributeName="fill" 
from="yellow" to="red" begin="0s" dur="3s" repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="skewX" from="0" to="90" begin="0s" dur="32s"   repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="scale" from="1, 1" to="0, 0.7" begin="0s" dur="32s" repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="translate" from="0, 0" to="200, 30" begin="0s" dur="32s" repeatCount="indefinite"/>
< /g>
< g>
< g>
< g>
< g>
< g>
< path d="M 100, 200    q    0,   120   200,    0"   />
< path d="M 100, 200    q    0,  -120   200,    0"   />
< path d="M 500, 200    q    0,  -120  -200,    0"   />
< path d="M 500, 200    q    0,   120  -200,    0"   />
< path d="M 200, 373.2  q  103.9,  60   100, -173.2" />
< path d="M 200, 373.2  q -103.9, -60   100, -173.2" />
< path d="M 400,  26.8  q -103.9, -60  -100,  173.2" />
< path d="M 400,  26.8  q  103.9,  60  -100,  173.2" />
< path d="M 200,  26.8  q -103.9,  60   100,  173.2" />
< path d="M 200,  26.8  q  103.9, -60   100,  173.2" />
< path d="M 400, 373.2  q  103.9, -60  -100, -173.2" />
< path d="M 400, 373.2  q -103.9,  60  -100, -173.2" />  
< animateTransform attributeName="transform" attributeType="XML" 
type="rotate" from="0, 300, 200" to="360, 300, 200" begin="0s" dur="2s" repeatCount="indefinite"/>
 < /g>
< animateColor attributeName="fill" 
from="red" to="blue" begin="0s" dur="4s" repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="skewX" from="0" to="90" begin="0s" dur="32s"   repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="scale" from="1, 1" to="0, 0.7" begin="0s" dur="32s" repeatCount="indefinite"/>
< /g>
< animateTransform attributeName="transform" attributeType="XML" 
type="translate" from="0, 0" to="250, 0" begin="0s" dur="32s" repeatCount="indefinite"/>
< /g>
< /svg>
Соответствующий рисунок имеет ширину 800 пикселей и высоту 600 пикселей.
К окружности с центров точке (300, 200) и радиусом 200 последовательно применяются четыре вида анимации:
  1. animateColor attributeName="fill" from="yellow" to="red" begin="0s" dur="3s" repeatCount="indefinite" - плавное изменение цвета заливки от жёлтого к красному, происходящее в течение 3 секунд и далее повторяющееся;
  2. animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="90" begin="0s" dur="32s" repeatCount="indefinite" - искажение по горизонтальной оси от 0° до 90° в течение 32 секунд и далее поторяющееся;
  3. animateTransform attributeName="transform" attributeType="XML" type="scale" from="1, 1" to="0, 0.7" begin="0s" dur="32s" repeatCount="indefinite" - сжатие по горизонтальной оси от 1 до 0 и по вертикальной оси от 1 до 0.7 первоначального размера, происходящее в течение 32 секунд и далее поторяющееся;
  4. animateTransform attributeName="transform" attributeType="XML" type="translate" from="0, 0" to="200, 30" begin="0s" dur="32s" repeatCount="indefinite" - смещение по горизонтальной оси вправо на 200 пикселей и по вертикальной оси вверх на 30 пикселей, происходящее в течение 32 секунд и далее поторяющееся.
К "вертушке" последовательно применяются пять видов анимации:
  1. animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0, 300, 200" to="360, 300, 200" begin="0s" dur="2s" repeatCount="indefinite" поворот вокруг центра на угол 360°, происходящий в течение 2 секунд и далее повторяющийся -
  2. animateColor attributeName="fill" from="red" to="blue" begin="0s" dur="4s" repeatCount="indefinite" - плавное изменение цвета заливки от красного к синему, происходящее в течение 4 секунд и далее повторяющееся;
  3. animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="90" begin="0s" dur="32s" repeatCount="indefinite" - искажение по горизонтальной оси от 0° до 90° в течение 32 секунд и далее поторяющееся;
  4. animateTransform attributeName="transform" attributeType="XML" type="scale" from="1, 1" to="0, 0.7" begin="0s" dur="32s" repeatCount="indefinite" - сжатие по горизонтальной оси от 1 до 0 и по вертикальной оси от 1 до 0.7 первоначального размера, происходящее в течение 32 секунд и далее поторяющееся;
  5. animateTransform attributeName="transform" attributeType="XML" type="translate" from="0, 0" to="250, 0" begin="0s" dur="32s" repeatCount="indefinite" - смещение по горизонтальной оси вправо на 250 пикселей, происходящее в течение 32 секунд и далее поторяющееся.
Вывод. Динамическое использование при анимации преобразований поворота, искажения вдоль осей, растяжения (сжатия) вдоль осей, плавного изменения цвета заливки позволяет создать изображение перемещающегося в пространстве предмета, изменяющего свой цвет.

Ссылка на SVG-рисунок

На главную страницу.