Как анимировать SVG иконки с помощью библиотеки segment?

Как анимировать SVG иконки с помощью библиотеки segment?

От автора: в этом уроке мы рассмотрим, как анимировать иконку svg иконку меню при помощи Dribbble шота от Tamas Kojo, в котором используются SVG и Segment – JavaScript библиотека для рисования и анимирования элемента SVG path.

скачать исходникидемо

Сегодня мы рады представить вам очень интересный эффект с иконкой меню. Идея возникла из Dribbble шота hamburger menu от Tamas Kojo. На первый взгляд это обычная иконка-гамбургер для меню мобильных устройств. Но при клике на нее, иконка превращается в крест, при этом процесс сопровождается довольно забавной анимацией. При клике на крестик, анимация прокручивается в обратном порядке, и иконка снова превращается в гамбургер. Давайте посмотрим:

При помощи SVG и библиотеки Segment мы воссоздадим этот эффект. Сперва, мы распланируем нашу анимацию, познакомимся с библиотекой, а затем нарисуем анимацию для иконки.

Планирование

Для воссоздания данного эффекта я не вижу ничего лучше, чем SVG. А JS библиотека Segment (альтернатива DrawSVGPlugin от GSAP) в этом нам поможет.

Необходимо создать три элемента path, которые будут описывать анимацию каждой прямой иконки гамбургера. С помощью Segment можно как угодно анимировать svg path элементы. Для прорисовки пути анимации каждой прямой можно воспользоваться любым редактором векторной графики (Adobe Illustrator или Inkscape); для достижения большей точности мы будем рисовать данные пути самостоятельно (связующие линии, кривые и дуги). Помните, что наша анимация «эластична», т.е. нужно учесть длину пути каждой прямой. Но прежде, давайте познакомимся с бибилиотекой Segment.

Знакомство с Segment

Данная библиотека – основной инструмент, который мы будем использовать, а точнее, небольшой JS класс (без зависимостей) для рисования и анимирования SVG путей. Пользоваться библиотекой достаточно просто:

Чтобы более подробно разобраться в принципе работы, поиграйтесь с demo и ознакомьтесь с документацией на GitHub. Также можно прочесть данную статью. Важно отметить, что в библиотеке Segment нет своих функций смягчения (кроме линейной по умолчанию). Дабы восполнить недостачу, мы задействуем библиотеку d3-ease.

Прорисовка путей

Анимация довольно быстрая, но если рассмотреть ее покадрово, можно нарисовать путь каждой прямой. В результате получим что-то похожее на это:

Код ниже рисует картинку выше шаг за шагом:

Для достижения желаемого эффекта, необходимо добавить CSS стили и идентификаторы к элементам path. ID нам пригодится для получения доступа к path через скрипт. Далее будем использовать следующую HTML разметку:

И CSS стили:

Анимация

SVG код готов. Теперь наша задача, для каждой секции анимации попытаться подобрать правильную функцию смягчения и добиться соответствующей синхронизации с GIF анимацией. Займемся анимацией верхней и нижней планкой иконки гамбургера. Для каждой планки необходимо задать сегмент со значениями begin и end. Так как у нас под рукой только GIF анимация, то процесс этот будет долгим и не обойдется без ошибок при подборе правильных значений.

После этого можно приступить к анимации, сохраняя длину планки (end — begin = 24) в процессе анимирования. Проанализировав последовательность анимации, можно понять, что первая функция смягчения линейная, заканчивающаяся гибким поворотом. Мы будем использовать функции, в качестве параметра в которые передается сегмент. Для верхней и нижней планки гамбургера функция будет одна и та же, так как анимация одинаковая, только направлена в другую сторону.

Для обратного эффекта, превращения крестика в гамбургер:

Теперь, чтобы соответствующая анимация запускалась по клику, необходимо написать следующее:

Анимация закончена, но есть небольшая проблема. В разных браузерах, она выглядит немного по-разному. Длина элементов path вычисляется в браузерах по-разному, а значит, есть и небольшое различие (существенное). Особенно это заметно в Firefox и Chrome.

Решение данной проблемы достаточно простое. Мы увеличим наш SVG, тем самым увеличив размер элементов path, а потом уменьшим svg под необходимый размер. В нашем случае мы изменили размер SVG в 10 раз, в итоге получили следующий код:

А затем уменьшили размер с помощью CSS:

Обратите внимание на то, что необходимо также увеличить значения float в JS (умножить на 10), а также изменить значение stroke-width в CSS. Данный метод поможет снизить до минимума различия в браузерах, но если вас не смущают небольшие данные мелочи, то можно придерживаться первоначального варианта.

Сегодня мы узнали, как создавать эластичную анимацию с помощью Segment. Это только один из возможных способов. Теперь ваш черед, создайте необычную SVG анимацию 🙂

Надеемся, данный урок был полезен для вас!

Проект на GitHub

Автор: Luis Manuel

Источник: //tympanus.net/

Редакция: Команда webformyself.

Метки: ,

Похожие статьи:

Комментарии Вконтакте: