Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:
Масштабируемая векторная графика (SVG) - Исследование
Масштабируемая векторная графика (SVG) - Оформление посредством CSS
Масштабируемая векторная графика (SVG) - Работаем с текстом
Базовое применение
Анимация в SVG может быть реализована посредством элемента «animate»;
<svg>
<rect width="200" height="200" fill="slategrey">
<animate attributeName="height" from="0" to="200" dur="3s"/>
</rect>
</svg>Как видно из отрывка кода, приведенного выше, мы добавляем «animate» внутрь элемента, на который хотим повлиять. Этот «animate» содержит следующие атрибуты;
attributeName: этот атрибут указывает, какой атрибут элемента будет задействован в анимации.
from: этот атрибут опционален, в нем мы можем указать конкретное значение или оставить его как есть для того, чтобы он начинался оттуда, где он и был.
to: этот атрибут определяет направление анимации. В зависимости от указанного значения в attributeName, результат может быть иным. Но в этом примере мы будем увеличивать высоту.
dur: этот атрибут определяет продолжительность анимации. Значение этого атрибута выражается в синтаксисе часов. Например, 02:33 отвечает за 2 минуты и 33 секунды, а 3h отвечает за 3 часа, но нам не нужна такая продолжительность, поэтому мы используем всего 3s (3 секунды);
То же самое относится к элементу «circle», но на этот раз мы указываем атрибут радиуса окружности (r)/
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="r" from="0" to="100" dur="3s"/>
</circle>
</svg>* Демо базового применения
Движущийся элемент
В перемещении SVG-элементов нам нужно только указать координаты элемента x и y;
<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>В вышеприведенном примере мы перемещаем прямоугольник от 0 до 200 за 3 секунды. Прямоугольник будет двигаться горизонтально слева направо. Также, если вы смотрели внимательно, мы добавили еще один атрибут к элементу «animate», и называется он fill.
Атрибут fill здесь не имеет ничего общего с цветом фона, как в других элементах SVG. Этот атрибут определяет, как анимация будет себя вести после того, как продолжительность завершится. В этом примере мы замораживаем элемент, который задействовали, поэтому он останавливается вместе с завершением продолжительности анимации.
Он также работает по схожему с элементом «circle» принципу, мы можем использовать cx или cy следующим образом:
<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
</circle>
</svg>* Демо движущегося элемента
Анимация нескольких атрибутов
До этого мы занимались анимацией лишь одного атрибута, но у нас также есть возможность анимировать более одного атрибута одновременно. Нижеприведенный пример показывает, как мы можем это сделать:
<svg>
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
<animate attributeName="r" from="0" to="100" dur="3s"/>
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
</circle>
</svg>Как видно, он работает по схожей схеме, только сейчас нам нужно будет два элемента «animate» внутри «circle», чтобы указать радиус и ширину контура.
* Демо анимации нескольких атрибутов
Следование по пути
В предыдущем руководстве мы работали над текстом в SVG, и показали вам, как текст может быть направлен по определенному маршруту. С SVG-анимацией мы можем проделать то же самое, мы можем анимировать элементы по определенному пути. Вот пример:
<svg>
<defs>
<path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>
</defs>
<circle r="15" cx="15" cy="15" fill="slategrey">
</svg>Путь лучше всего определять внутри элемента «defs», как показано выше. Для того чтобы элемент следовал по пути, нам нужно определить анимацию посредством «animateMotion» и связать id пути с элементом «mpath» следующим образом:
<animateMotion dur="3s">
<mpath xlink:href="#thepath"/>
</animateMotion>
И на этом все! Давайте посмотрим на это в действии.
* Демо использования пути
Трансформации
Мы также можем применять к анимациям следующие трансформации: scale, translate и rotate, и для этого мы используем «animateTransform»;
<svg>
<rect width="200" height="200" fill="slategrey">
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
</rect>
</svg>Трансформации в SVG работают по тем же принципам что и в CSS3, и совсем недавно мы довольно подробно рассказывали об этом в нашей статье, посвященной двумерным трансформациями на CSS3.
* Демо трансформаций
В завершение
В зависимости от требований, посредством SVG-анимации вы можете решить ту или иную задачу.
Преимущество использования SVG-анимации перед использованием Flash-анимации заключается в том, что она не основана на сторонних плагинах и в значительной степени быстрее, чем Flash. После того, как Adobe приостановили поддержку Flash на Android-устройствах, возможно пришло время попробовать нечто новое.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
