Как мы делаем анимированные иконки SVG с помощью Figma


Начнем с того, что иконка в SVG — это отдельная страница, которую мы встраиваем в другую страницу. Следствием этого является то, что для элементов иконки мы можем использовать самую обычную анимацию CSS с некоторыми небольшими особенностями. 

В итоге наш процесс создания анимированной иконки состоит из трех этапов:

  1. Создаем SVG в Figma
  2. Дописываем анимацию в блокноте 

Создание иконки в Figma

Несколько правил при создании иконки:

  1. Все подвижные элементы должны быть отдельными. Не объединять их в один вектор
  2. Убираем всю обводку

Итак, на примере у нас есть вектор стакан, есть вектор крышка и отдельные векторы — пар. 

Иконка стаканчик кофе в Figma
Иконка стаканчик кофе в Figma

Экспортируем фрейм (не забыв убрать фон) в SVG и открываем файл в блокноте. 

Файл открывается и закрывается тегом SVG, в рамках него мы и будем работать. 

Иконка SVG в блокноте
Иконка SVG в блокноте

Перед или после элементов добавляем тег наших стилей <style></style>. Стили обязательно должны быть внутри <SVG></SVG>, иначе вы получите ошибку. 

Для элементов, которые мы планируем анимировать, проставляем id или class. 

Далее прописываем для нужных нам id и классов стили с указанием имени анимации, например:

#steam6{

animation-name: sA3;

animation-duration: 3s;

animation-iteration-count: infinite;

animation-timing-function: ease;

animation-delay: 0s;

opacity: 0;

}

И там же пишем скрипт анимации:

@keyframes sA3 {

0% {opacity: 0 ;}

30% {opacity: 0 ;}

36% {opacity:1;}

45% {opacity: .0 ; }

50% {opacity: 0 ; }

100% {opacity: 0 ; }

}

Теперь можно вставить наш SVG в любое место как объект:

<object data="/coffee.svg" type="image/svg+xml" width="300" height="150"> </object>

Скачать эту иконку в SVG можно здесь. 

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<