Создаем анимированные иконки с помощью Snap.svg

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

Все больше настольных и мобильных сайтов используют в интерфейсах графику SVG, что легко при использовании специализированных библиотек, таких как Snap.svg. В сегодняшнем примере мы покажем как просто создается анимация SVG с использованием этой мощной JavaScript-библиотеки.

Технология SVG

До недавнего времени SVG был одной из самых неоцененных технологий веб-разработки несмотря на большие потенциальные возможности для создания адаптивных сайтов для любых устройств. Отчасти это было связано с достаточно большим «входным» порогом сложности SVG-графики, особенно при создании анимации. Появление библиотек уровня Snap.svg избавило разработчиков от необходимости досконально вникать в обработку изображений, и позволило сосредоточиться собственно на проектировании интерфейса.

В сети Интернет можно найти множество отличных примеров SVG-анимации в т.ч. иконок с использованием CSS эффектов. В качестве изучения можно привести статью Navicon Transformicons от Беннета Фили и отличное учебное руководство по SVG графике. В этой статье мы попытаемся создать аналогичный эффект с использованием Snap.svg.

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

Первый шаг - HTML

На первом шаге мы создадим исходные изображения иконок SVG размером 64х64 пикселей. Скачать готовые изображения можно по ссылке «Исходные коды» ниже.

Для каждой иконки мы определим собственный алгоритм анимации. Например, для иконки масштабирования мы будем использовать SVG-элемент <path>. Для определения индивидуальной анимации мы создаем свою HTML обертку, и будем добавлять иконки на страницу динамически с помощью Snap.svg. Если браузер не поддерживает все требуемые функции, вместо анимации будут выведены статические изображения. Базовый HTML код выглядит следующим образом:

Запасные фоновые изображения определяем в CSS:

Статические изображения были оптимизированы в PNG с использованием iconizr tool. Как альтернативу можно использовать CSS спрайты и создать отдельный класс для устаревших браузеров, но мы не будем усложнять пример и просто сделаем прозрачные PNG.

Мы можем создать специальный элемент <span> для иконок, которые могут иметь «обратный» анимационный эффект при нажатии. Например, при нажатии на иконку «стоп» она заменяется на знак «воспроизведение», которое запускается при повторном нажатии. Значок при этом обратно меняется на «стоп». Смотрим HTML-разметку:

Переходим к Javascript

Теперь более подробно рассмотрим наш JavaScript код. Напомним, что для каждого элемента мы создадим свою индивидуальную анимацию. Это будет вращение, масштабирование или более сложное преобразование с использованием элемента <path>. Благодаря API Snap.svg появляется возможность легкого управления и динамической загрузки изображений и схемы анимации.

Для хранения настроек анимации создадим для всех иконок отдельную переменную "svgIconConfig". Базовая HTML-логика выглядит так:

Каждая отдельная анимация SVG будет иметь следующую общую конфигурацию:

Теперь определим переменные для начального и конечного состояния анимации, а также таймер delayFactor и указатель на следующую анимацию animAfter:

Итоговый код

Итоговый код нашего примера:

Вы можете инициализировать иконки таким образом:

Еще пример инициализации анимации:

Все нужные изображения и эффекты созданы. Перед использованием в своих проектах проверьте созданное демо на корректность масшабирования в различных браузерах, разрешениях экрана и как работает анимация SVG при наведении и нажатии мыши.

ДЕМО

ИСХОДНЫЙ КОД

КОД НА GITHUB

Переводим таблицу Excel в HTML с сохранением функционала, используя Javascript... В этом уроке мы разберем, как перевести таблицу Excel в HTML, с сохранением интерактивных элементов и формул. В итоговую верстку HTML можно будет внос...
Делаем калькулятор с расчетом в реальном времени на JavaScript... Кстати, вы обновили Wordpress до версии 4.9? Очень крутое обновление. О нем я еще напишу, но что самое ценное - редактор WP начинает походить на IDE. ...
6 непопулярных, но очень удобных возможностей ES6... Статья про 6 непопулярных, но очень удобных возможностей ES6. Как известно, стандарт Ecmascript 6 опубликовали в июне 2015. Но так как многое уже импл...

Опубликовано в 19:38, 14 декабря 2017 | Обновлено в 15:38, 14 января 2018 | Просмотров: 98