—»     —»   Масштабируемая векторная графика (SVG) - Анимация
  Раздел: Образование и Изучение   Нет комментариев  

Масштабируемая векторная графика (SVG) - Анимация



Сегодня мы хотим продолжить наш рассказ о SVG-графике (Масштабируемая векторная графика), на этот раз речь пойдет об анимации. Не пугайтесь, так как SVG-анимация довольно проста, и в сегодняшнем руководстве мы начнем с базовых примеров.

Масштабируемая векторная графика (SVG) - Анимация

Если вы не читали предыдущие части, то мы настоятельно рекомендуем вам с ними ознакомиться:

Масштабируемая векторная графика (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 секунды);

Масштабируемая векторная графика (SVG) - Анимация

То же самое относится к элементу «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. Этот атрибут определяет, как анимация будет себя вести после того, как продолжительность завершится. В этом примере мы замораживаем элемент, который задействовали, поэтому он останавливается вместе с завершением продолжительности анимации.

Масштабируемая векторная графика (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-анимацией мы можем проделать то же самое, мы можем анимировать элементы по определенному пути. Вот пример:

<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>

Масштабируемая векторная графика (SVG) - Анимация

И на этом все! Давайте посмотрим на это в действии.

* Демо использования пути

Трансформации

Мы также можем применять к анимациям следующие трансформации: 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-анимации вы можете решить ту или иную задачу.

Преимущество использования SVG-анимации перед использованием Flash-анимации заключается в том, что она не основана на сторонних плагинах и в значительной степени быстрее, чем Flash. После того, как Adobe приостановили поддержку Flash на Android-устройствах, возможно пришло время попробовать нечто новое.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: векторная графика
Опубликовал Design FactoRy   Прочитано (раз): 6762   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930