8 бесплатных JavaScript-библиотек анимации: работа с текстом, SVG и геометрическими фигурами

Фулстек-разработчик Монти Шокин поделился в блоге на code.tutsplus.com лучшими, на его взгляд, бесплатными библиотеками анимации JavaScript с открытым исходным кодом. Многое можно сделать через CSS, но у него есть свои ограничения, поэтому, чтобы получить больший контроль над каждым элементом, лучше использовать JavaScript. 

Mo.js

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

В библиотеке есть декларативный API, который используется для установки значений различных свойств для компонентов, которые создаются. Поставляется с четырьмя различными встроенными модулями: HTML, Shape, ShapeSwirl и Burst. Модули burst и swirl могут быть использованы для всех видов взаимодействия пользователя с элементами на веб-сайте. 

See the Pen
Twitter Fav (stars) by LegoMushroom (@sol0mka)
on CodePen.

Выше в качестве примера представлены эффекты burst и swirl с элементом в форме звезды. Для взаимодействия щелкните в любом месте поля онлайн-редактора CodePen. В документации библиотеки собрано множество подобных примеров. 

Anime

Одна из самых популярных библиотек анимации на GitHub (~40k звездочек). Можно использовать для анимации свойств CSS, атрибутов SVG и DOM, что позволяет полностью контролировать направление, скорость и порядок движения объектов, а также при необходимости приостановить, перезапустить или отменить анимацию. 

Благодаря поддержки SVG-анимации можно создать, например, плавный эффект морфинга между двумя разными SVG-фигурами или анимацию рисования линий. 

See the Pen
SVG Line Drawings in Anime.js – II by Monty (@Shokeen)
on CodePen.

Нажмите на кнопку Write the Name в приведенном выше онлайн-редакторе. Примеры, как создавать подобные анимации, есть в документации к библиотеке. 

Popmotion

В основном используется для анимации чисел, цветов и сложных строк. Основная функция анимации занимает около 5 Кб, а вся библиотека — около 12 Кб. 

Подходит для двух видов анимации: кейфреймов и пружин. В первых можно указать точку перехода для анимации по кейфреймам. Пружинная имеет такие свойства, как жесткость, демпфирование, масса и скорость, чтобы сделать анимацию естественнее. Библиотека содержит множество вспомогательных функции angle, clamp, distance и snap, которые можно использовать для расчетов.

See the Pen
Mapbox Map with Animated Marker Icons by Arden (@aderaaij)
on CodePen.

В примере с помощью библиотеки Popmotion анимированы маркеры на карте мира. 

ScrollReveal

Пригодится, если надо анимировать элементы, когда они прокручивают в область просмотра или из нее. В библиотеке можно контролировать ход анимации с помощью свойств delay, duration и interval. Также есть опции для управления вращение, масштабом и перемещение объектов. 

See the Pen
Vertical Timeline by Sava Lazic (@savalazic)
on CodePen.

С помощью библиотеки ScrollReveal в примере выше создан вертикальный таймлайн. Подойдет для демонстрации продуктов или проектов на веб-сайте. 

Vivus

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

Примечание: Vivus всегда анимирует элементы в том порядке, в котором они определены в SVG. Кроме того, они должны иметь обводку вместо заливки. 

See the Pen
Wiggles by Alex Nelson (@lexnels)
on CodePen.

Чтобы создать приведенную выше анимацию, понадобилось всего шесть строк кода. 

Typed.js

Используется для анимации набора текста. Все строки, которые нужно запрограммировать, можно передать в виде массива. В библиотеке реализован SEO-подход, в котором текст, который нужно «оживить», можно прочитать из HTML-блока div на веб-странице. 

Поведение анимации настраивается с помощью набора параметров, таких как: 

• Скорость набора;
• Скорость обратного интервала;
• Задержка запуска;
• Обратная задержка;
• Количество циклов и так далее.

See the Pen
Typed.js 404 Page by Conner (@cluzier)
on CodePen.

Пример выше показывает, как можно разнообразить страницу с ошибкой 404. 

ProgressBar.js

Позволяет разработчикам добавлять на веб-сайты индикаторы прогресса с некоторыми встроенными формами, такими как линия, круг или полукруг. Также в библиотеке есть возможность использовать пользовательские формы. 

See the Pen
Basic Progress Bars – Text by Monty (@Shokeen)
on CodePen.

Чтобы узнать больше об анимации свойств индикаторов прогресса, читайте руководство по ProgressBar.js. 

Lottie

Анализирует анимацию, созданную Adobe After Effects, которая была экспортирована как JSON с помощью плагина Bodymovin. На странице репозитория подробно объясняется процесс установки и принципы работы Lottie. Для управления анимацией доступно множество глобальных параметров. Например, можно запускать, останавливать и менять направление движения анимированных объектов. 

See the Pen
Channel Surfing by Markus Magnusson (in svg) by kittons (@airnan)
on CodePen.

Пример выше показывает, как можно с минимальными усилиями визуализировать анимацию After Effects в браузере. Для этого нужно написать несколько строк кода и инициализировать анимацию с некоторыми параметрами.