Привет, Хабр! Сегодня поговорим о фронтенде, а точнее, о способах улучшения веб-приложения. В этом могут помочь JS-библиотеки для анимации. В подборке их пять, но если вы знаете и другие, причём те, что применяете в работе сами, расскажите о них в комментариях.
GSAP
Название библиотеки — аббревиатура. Она расшифровывается как GreenSock Animation Platform. А предназначена для создания достаточно производительной HTML5-анимации. Большой её плюс — высокий уровень совместимости с любыми JavaScript-фреймворками и библиотеками.
GSAP даёт возможность анимировать буквально всё, к чему можно получить доступ с помощью JavaScript, включая SVG, общие объекты, холсты и многое другое. Библиотека очень производительная — примерно в 20 раз быстрее, чем jquery. Соответственно, особых лагов в приложении не будет.
GSAP позволяет анимировать любое из свойств CSS одним из нескольких способов. При помощи библиотеки можно указать продолжительность анимации и задать ей определённые свойства.
У библиотеки есть ещё и плагины, которые содержат специальные свойства. Наиболее популярные из них — Draggable, DrawSVGPlugin и MorphSVGPlugin.
GSAP идеально подходит для создания интерактивных веб-приложений, анимации логотипов и иконок, разработки анимированной инфографики и диаграмм, слайдеров и каруселей, а также добавления анимации к браузерным играм. Практически универсальный инструмент, который пригодится многим.
Anime.js
Ещё одна отличная библиотека, которая предназначена для анимации CSS-свойств, SVG, DOM-атрибутов и JavaScript-объектов. В сжатом виде она весит всего 10 килобайт. Но при этом библиотека очень функциональна, у неё отличная документация и масса возможностей.
Применять её, по словам специалистов, достаточно просто. Есть несколько свойств, применяемых для описания анимации:
Targets — ссылки на элементы, которые нужно анимировать. Это может быть селектор CSS (div, #square, .rectangle), узел или список узлов DOM, объект JavaScript
Properties — все свойства и атрибуты, которые можно анимировать при работе с CSS, объектами JavaScript, DOM и SVG
Property Parameters — параметры, связанные со свойствами: duration, delay, easing и т. д.
Animation Parameters — параметры анимации: direction, loop и т. д.
И поддерживается несколько типов анимации, включая ключевые кадры, задержку, временную шкалу, использование масштабирования, морфинга и вращения.
Библиотека идеальна для создания не самых сложных эффектов, интерактивных элементов, загрузки или перехода между страницами.
React Spring
Крайне полезна для создания анимаций, соответственно, в React-приложениях. Для этого у Spring есть масса хороших инструментов, позволяющих создавать плавные, отзывчивые и высокопроизводительные анимации с достаточно реалистичной физикой.
Главные возможности:
плавные и гладкие анимации для приложений React, о чём уже сказано выше
базирующиеся на физике анимации для естественных и реалистичных эффектов
создание анимации, реагирующей на жесты. Это касание, прокрутка и масштабирование
возможность контроля над параметрами анимации
поддержка сложных анимаций, связанных с несколькими элементами
полная и беспроблемная интеграция с React
совместимость с различными браузерами и устройствами
Three.js
Отличная open-source-библиотека для создания и отображения анимированной 3D-графики в браузерах. Она представляет собой набор инструментов для разработки трёхмерных сцен, объектов, камер и материалов. Плюс для управления освещением, тенями и анимацией. Скрипты Three.js могут использоваться совместно с элементом HTML5 CANVAS, SVG или WebGL.
Вот главные возможности библиотеки:
применение разных типов освещения, включая направленное, точечное, круговое, хорошее отображение теней
анимация трёхмерных объектов
есть движок для моделирования физического взаимодействия между объектами
возможность создания 3D-приложений для виртуальной и дополненной реальностей
отображение 3D-графики с использованием WebGL или WebGPU
можно создавать объёмные сцены самостоятельно, с использованием примитивов, а также создавать и собственные модели
А ещё Three.js позволяет легко импортировать 3D-модели из внешних файлов. Рекомендуется формат GLTF — он отлично поддерживается и оптимизирован специально для веб-технологий.
Popmotion
Также предоставляет инструменты для анимации — на этот раз интерфейса. Написана библиотека на TypeScript и весит всего 4,5 Кб. Удобна тем, что любую функцию можно отдельно импортировать. Кроме того, она может работать вместе с любыми JavaScript-фреймворками, в браузере и Node.
Поддерживает пружинную, инерционную и покадровую анимацию для цветов, чисел и сложных строк. Кроме того, библиотека удобно настраивается — любой из компонентов конфигурируется в соответствии с потребностями пользователя.
Popmotion можно применять для создания анимаций при помощи ключевых кадров, изменять цвета, анимировать SVG-пути, атрибуты и морфинг. Более того, применяется реалистичная физика, включая гравитацию, трение и инерцию, а ещё доступна интерполяция между двумя или более значениями при анимации движения. Можно также создавать сложные анимации из более простых.
Лучше всего Popmotion подходит для оживления строк, чисел, цветов, создания интерактивных элементов интерфейса, плавной анимации прокрутки и т. п.
