Анимация SVG-баннеров

Содержание:

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

Ниже мы рассмотрим анимацию SVG-баннеров и способы ее реализации.

Плюсы и минусы SVG

Рассмотрим позитивные и негативные стороны этого формата, чтобы вы имели четкое представление о том, с чем работаете.

Плюсы

  • Масштабируется без потери качества. Баннербудет выглядеть одинаково хорошо как на экране мобильного устройства, так и на компьютерном мониторе.
  • Легкость создания. Программисты делают иконки посредством написания xml-кода, дизайнеры занимаются прорисовкой сложных элементов в Adobe Illustrator, Sketch, Corel Draw.
  • Небольшой размер. Файлы с расширением .svg занимают немного места, в отличие от своих аналогов, созданных как растровая графика.
  • Гибкость использования. Используя CSS, можно менять графические настройки на самом сайте, например фоновый цвет или место, где находится логотип. С помощью JavaScript делается анимация, а SVG можно редактировать в графическом редакторе.
  • Качественная детализация и прорисовка мелочей.

Минусы

  • Формат не поддерживается старыми версиями браузеров.
  • WordPress интерпретирует SVG как вредоносный код, из-за этого он блокируется. Чтобы это исправить, необходимо использовать специальные плагины, имеющиеся в WordPress.
  • Подходит для создания простых проектов, которые описываются простыми фигурами (круг, прямоугольник, эллипс и т. д.).

SVG-анимация

Существует 2 главных способа анимации SVG-файлов:

  • анимация с помощью CSS;
  • SMIL-анимация, которая встроена в SVG (это и есть SVG-анимация, основывающаяся на SMIL и делающая его функционал шире).

Их можно условно разделить на «внешнюю» и «внутреннюю» анимации. Они имеют небольшие функциональные отличия:

  • CSS лучше поддерживается браузерами;
  • SMIL имеет больше функционала и возможностей.

Сложно сказать, какой из них лучше. Нужно отталкиваться от ситуации и потом использовать тот или иной инструмент. В принципе, они во многом похожи.

Будет уместней применять SMIL вместо CSS, если нужно:

  • создать такую анимацию, которую невозможно сделать в CSS;
  • более точно контролировать анимацию;
  • выполнить контурный морфинг;
  • сделать синхронизацию анимации;
  • создать интерактивную анимацию.

Что касается последнего, то средства CSS позволяют делать интерактивное анимирование элементов, но SMIL позволяет проделать это более качественно. Когда анимация легкая, то лучше воспользоваться ресурсами CSS.

Анимация с помощью CSS

В этом случае анимация происходит аналогично тому, как это делается через HTML.

Вся она создается с применением @keyframes.

Для примера напишем анимацию с помощью внутренних таблиц стилей (CSS). В них мы и будем писать необходимый код:

Анимация SVG-баннеров

Анимируется атрибут SVG просто. С такой же простотой это можно сделать и с атрибутом CSS.

Анимация SVG-баннеров

Значения задаются как в процентном соотношении, так и с применением конструкции from-to

И в финале остается сделать применение готовой анимации к необходимому элементу.

Анимация SVG-баннеров

Вышеописанная анимация является статичной. В ней вообще нет интерактивности. Как ее добиться? Для этого можно применить transition, сочетая его с псевдоклассом hover.

Анимация SVG-баннеров

Если навести стрелку на элемент, он поменяет цвет с синего на голубой на 300 миллисекунд

Отличительные особенности в виде анимации атрибутов и небольшое количество интерактивности – это главные особенности CSS. Этого достаточно, чтобы сделать среднюю анимацию, которая порадует глаз.

Большинство атрибутов SVG поддаются анимации и нормально справляются со своей задачей.

Анимация с помощью SMIL

Хоть ее и поддерживают все браузеры, но она потихоньку начинает вымирать. Тот же CSS Animation имеет куда больше популярности. Но при всем этом она остается на плаву. Дело здесь в том, что она может то, что не может CSS.

Главные теги, с помощью которых происходит анимация:

  • <set>;
  • <animate>;
  • <animateTransform>;
  • <animateMotion>.

Рассмотрим анимацию на применении тега <animate>. С помощью него можно анимировать любой атрибут, и он представляет собой главный инструмент анимации. Другие теги сделаны под определенные задачи.

Применяем анимацию к элементу

Для начала указываем элемент, который будет анимированным.

Реализуется это 2 способами:

  1. Кладем тег внутрь элемента. Метод дает возможность сделать инкапсуляцию анимации внутри объекта. Это помогает облегчить чтение кода:

Анимация SVG-баннеров

В примере анимация применяется к элементу circle

  1. Передаем ссылку на элемент. Способ помогает в том случае, когда необходимо собрать все анимации в одном месте:

Анимация SVG-баннеров

В примере используется атрибут xlink:href, в нем указывается id элемента, к которому применяется анимация. Для работы этого способа определяем пространство имен xlink. В этом помогает тег <svg>

2 атрибут xlink:href устарел. Спецификация советует использовать ему на замену href, не требуя определять пространство имен xlink:

Анимация SVG-баннеров

Заменив атрибут, мы получаем функционирующую анимацию.

Что касается обращения к элементам по классу, как в CSS, здесь это не работает.

Например, сделав такое обращение к элементам, как ниже, мы ничего не получим

Анимация SVG-баннеров

Этот способ не работает.

Как указать атрибут для анимации

Подобное делается с помощью attributeName. Здесь в качестве значения используется имя атрибута, которое будет анимироваться.

Анимация SVG-баннеров

При указании в имени атрибута значения r происходит сообщение об анимации радиуса

Все. Анимация работает.

Вопросы – Ответы

Ответим на популярные вопросы.

Где в SMIL указать длительность анимации?

Это делается с помощью атрибута dur. Значение можно указать как в секундах, так и в миллисекундах.

Это делается так:

Анимация SVG-баннеров

Кроме этого, можно еще указывать в минутах или часах:

Анимация SVG-баннеров

Как сделать, чтобы анимация начиналась не сразу, а немного через время?

Делается это с помощью атрибута begin. Для обычной задержки начала анимации на 1,5 секунды пишем такой код:

Анимация SVG-баннеров

Можно указать и другое время запуска анимации.

Если указать отрицательное значение, то анимация начнется с того места, где она должна быть по указанному промежутку времени. Делается это так:

Анимация SVG-баннеров

Как синхронизировать анимации?

Подобное делается с помощью id-анимации и указания begin, end, repeat. Выглядит эта схема таким образом:

Анимация SVG-баннеров

Немного подробней о repeat: в скобках указывается номер повторения, после которого запускается анимация. Делается это так:

Анимация SVG-баннеров

Анимация запустится после 2 повторений, а не 2 повторения анимации

Еще можно сделать задержку относительно события. Как пример, если необходим проигрыш анимации спустя 2 секунды после начала другой. Пишем код таким способом:

Анимация SVG-баннеров

Или запустить анимацию за секунду до окончания другой анимации:

Анимация SVG-баннеров

Заключение

Мы рассмотрели анимацию SVG-баннеров и разобрались, как делать ее с помощью CSS и SMIL.

Еще раз вспомним, о чем мы узнали:

  • поговорили о плюсах и минусах SVG;
  • рассмотрели в целом, что такое SVG-анимацияи способы ее создания;
  • разобрали анимацию с помощью CSS;
  • разобрали анимацию с помощью SMIL;
  • ответили на вопросы.

Используйте советы и анимируйте свои баннеры.

Если вы хотите не просто уметь анимировать, а научиться профессиональному программированию, то записывайтесь на один из курсов.

Вы научитесь писать программный код любой сложности и станете серьезным специалистом.

Занятия ведут профессионалы, которые сами работают в крупных компаниях. Они научат всем премудростям программирования.

По окончании курса вы получите сертификат, удостоверяющий ваш уровень знаний. Он котируется в компаниях как диплом.

Не теряйте время. Записывайтесь на курс и начинайте становиться профессионалом уже сегодня.

Присоединяйся к DevEducation — стань востребованным специалистом и построй карьеру в IT!