SVG анимация

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>.

Для примера я скачал svg картинку.

SVG

Анимация внутри SVG

Нам необходимо выполнить следующие действия.

  1. Загрузить svg изображение на страницу с помощью тега <embed>.
  2. Сгруппировать необходимые слои для дальнейшей работы.
  3. Создать анимацию с помощью @keyframes.
  4. Реализовать выполнение анимации при клике на SVG картинку.

Все манипуляции с SVG будем выполнять прямо внутри самого изображения. Таким образом нашу SVG анимацию можно будет использовать в других проектах.

1. Подключение svg с помощью тега <embed>

<embed src="myImage.svg">

2. Объединение нужных слоёв в группу

Чтобы сгруппировать необходимые элементы, обернём их в тег <g></g>

Было:

Структура SVG

Стало:

Группировка элементов SVG

Для проверки, верно ли мы объединили элементы, зададим группе какой-нибудь цвет, например зелёный

Изменение цвета SVG SVG изображение

3. Создание SVG-анимации

Будем писать css код прямо внутри SVG, это позволит использовать изображение независимо от данного проекта.

CSS и JavaScript будем писать в теге <defs></defs>. Данный тег скрывает внутреннее содержимое от браузера и используется для создания эффектов и изменения стилей.

<defs>
  <style>
  @keyframes myAnime {
    0% {
      transform-origin: 70% 20%;
      transform: rotate(0deg);
    }
    50% {
      transform-origin: 70% 20%;
      transform: rotate(-40deg) translate(-50px);
    }
    100% {
      transform-origin: 70% 20%;
      transform: rotate(0deg) translate(0);
    }
  }

  #hammer.addAnimation #hammer-group {
    animation: myAnime .22s ease-out;
  }
  </style>
</defs>

Нижний блок кода необходим для того чтобы, когда мы будем нажимать на SVG картинку, то ей будет добавляться class addAnimation, на который мы повешали проигрывание анимации

Так же я использовал два id, из которых, первый - я дописал самой svg картинке, второй - группе элементов, которую будем анимировать

Создание SVG анимации

4. Выполнение анимации при клике на SVG картинку

Внутри тега defs под style будем писать js-код в теге script

var myAnimeClick = document.getElementById('hammer');
myAnimeClick.addEventListener('click', function(){
  this.classList.toggle('addAnimation');
});
Создание SVG анимации при клике

Результат:

SVG анимация в HTML

Для примера, давайте теперь реализуем анимацию SVG непосредственно в самом HTML.

Вставим svg изображение прямо в HTML код страницы.

Вставка SVG в HTML

Получаем.

Важный момент, все изменения с id и class действуют на всей HTML странице.

В предыдущем примере все действия были изолированы. Они работали только внутри самого SVG, т.к. картинку мы подключали с помощью embed.

Вставка SVG embed

Реализуем следующую анимацию: при наведении на наш смайлик, будем выпучивать ему глаза.

Порядок действий.

  1. Добавим классы для элементов, которые хотим анимировать.
  2. Создадим анимацию при наведении на смайлик.

1. Добавление классов

Добавим для глаз класс eye, чтобы в дальнейшем с помощью CSS или JavaScript их анимировать.

SVG добавить класс

2. Создание анимации

Теперь, в отличие от предыдущего примера, мы будем писать CSS код прямо в HTML текущей страницы.

Анимация SVG при наведении

Результат.

Мы рассмотрели наиболее простые варианты создания анимации, суть думаю все уловили.

  1. Добавляем svg-изображение на страницу (мы рассмотрели embed и inline-svg).
  2. Создаём анимацию. Анимировать как вы догадались можно как угодно и что угодно. Все теги, какие вы сможете найти в SVG, вы можете изменять: цвет, размер, даже переписывать содержимое тегов, например, изменять тег d, который определяет пути для рисования.
  3. Выполнять анимацию при каком-либо событии (мы рассмотрели click и hover). Вы можете воспроизводить анимацию и при других событиях, таких как: правый клик мыши, когда мышка покидает какой-то элемент, при отправке формы, при фокусе на каком-либо элементе, после полной загрузки DOM-дерева, после завершения какой-либо другой анимации, и т.п.

Полезные ссылки

admin