9 лучших библиотек анимации

За последнее десятилетие front-end веб-дизайн пережил настоящую революцию. Хорошие UI дизайнеры сегодня должны быть и хорошими аниматорами в том числе - с глубоким профессиональным пониманием техники веб-анимации.

Мы рассмотрим каждую библиотеку, о которой ниже пойдет речь с точки зрения UI дизайнера, разбирающегося в коде, а не как "гуру кода". Некоторые из этих библиотек - чистый CSS. Другие - на JavaScript, но ни одна из них не требует более чем базового понимания HTML/CSS и JS, чтобы быть полезной.

Cписок 9 лучших анимационных библиотек

Animate.css
Bounce.js
AnimeJS
GreenSock (GSAP)
Magic Animations
ZDog
CSShake
Hover.CSS
AniJS

Animate.css

Animate.css - одна из самых маленьких и простых в использовании библиотек анимации CSS. Применить библиотеку Animate в твоем проекте так же просто, как связать CSS и добавить необходимые классы CSS к элементам HTML. При желании ты можешь использовать jQuery для запуска анимации по определенному событию.

Разработчик: Дэниел Иден
Релиз: 2013
Популярность: 70К звезды на GitHub
Описание: "Кроссбраузерная библиотека CSS-анимаций. Проста в использовании, как простая вещь".
GitHub: https://github.com/daneden/animate.css

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

Animate.css все еще находится в стадии активной разработки. В четвертой версии библиотека поддерживает пользовательские свойства CSS (они же переменные CSS). Это одна из самых простых и надежных библиотек анимации, и мы без колебаний используем ее в любом проекте.

Bounce.js

Bounce.js - это библиотека анимации JavaScript, которая фокусируется на предоставлении подборки уникальных развлекательных, динамичных анимаций в стиле Warner Brothers для твоего сайта.

Разработчик: Tictail
Релиз: 2014
Популярность: 6К звезд на GitHub
Описание: "Создавайте красивые анимации на CSS3 в мгновение ока".
GitHub: https://github.com/tictail/bounce.js

Bounce.js - это удобная библиотека анимации, которая содержит около десяти предустановок анимации - отсюда и небольшой размер библиотеки. Как и в случае с animate.css, анимация плавная и безупречная. Ты можешь рассмотреть возможность использования этой библиотеки, если твои потребности сосредоточены на анимации типа "Pop and bubble".

AnimeJS

AnimeJS - самое новое дополнение к нашему списку, но за время своего существования он успел завоевать множество сторонников. Библиотека невероятно универсальна и не будет лишним для создания анимации в HTML-играх. Единственный реальный вопрос: "Не является ли эта библиотека излишеством для простых веб-приложений?".

Возможно. Но поскольку библиотека быстрая, легкая и относительно проста в освоении, трудно найти в ней недостатки.

AnimeJS описывается как «легкая библиотека анимации JavaScript с простым, но мощным API. Она работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript».

Ссылка на проект в GitHub

Разработчик: Джулиан Гарнье
Выпущено: 2016
Популярность: 40К звезд на GitHub
Описание: " Анимационный движок JavaScript".
GitHub: https://github.com/juliangarnier/anime

Самое впечатляющее, что Anime.JS имеет потрясающую документацию, которая демонстрирует HTML, код JavaScript и рабочие примеры в красивой среде приложения.

Короче говоря, если тебя устраивает использование анимационных решений на JavaScript, трудно найти причины игнорировать AnimeJS.

GreenSock (GSAP)

GreenSock (или GSAP - GreenSock Animation Platform) - это "швейцарский военный нож" веб-анимации. Для создания плавных и сложных анимаций, которые работают без сбоев, GSAP подходит идеально. Ты можешь анимировать что угодно, от элементов DOM до SVG, а его экосистема включает несколько удивительных плагинов, которые позволяют делать всевозможные забавные вещи, например, морфинг SVG, рисование штрихов SVG, прокрутку функциональности, скремблирование текста и многое другое. Он быстр, имеет поддержку всех новых браузеров, а его синтаксис прост и интуитивно понятен.

Популярность на GitHub: 12.5 звезд на GitHub
Описание: "Сверхвысокопроизводительная анимация профессионального уровня для современного веба".
GitHub: https://github.com/greensock/GreenSock-JS/

Magic Animations

Magic Animations - одна из самых впечатляющих библиотек анимации. В ней есть множество различных анимаций, многие из которых совершенно уникальны для этой библиотеки. Как и в случае с Animate.css, ты подключить ее, просто импортировав файл CSS. Ты также можешь реализовать анимацию с помощью jQuery. Этот проект предлагает особенно классное демонстрационное приложение.

Популярность: 7К звезд на GitHub
Описание: "CSS3 анимация со спецэффектами"
GitHub: https://github.com/miniMAC/magic

Размер файла Magic Animation умерен по сравнению с Animate.css, и он известен своими фирменными анимациями, такими как "магический эффект", "эффект дурака" и "эффект бомбы".

Если ищешь что-то необычное, попробуй использовать его. Ты не будешь разочарован.

Zdog

Zdog - это библиотека JavaScript для создания 3D-дизайнов и анимации, созданная Дэвидом ДеСандро. С ее помощью ты можешь рисовать свои проекты, используя элемент <canvas> или SVG и воплощать их в жизнь в плавных анимациях с изящным 3D-эффектом.

Популярность: 8.5К звезд на GitHub
Описание: "Круглый, плоский, удобный для дизайнеров псевдо-3D движок для canvas & SVG"
GitHub: https://github.com/metafizzy/zdog

Если ты знаком с JavaScript, ты быстро освоишь основы Zdog: у него понятный декларативный API, отличная документация и множество обучающих ресурсов.

CSShake

CSShake предоставляет именно то, что написано на коробке - библиотеку CSS, разработанную специально для встряски элементов на твоей веб-странице. Как и следовало ожидать, существует несколько вариантов тряски веб-компонентов.

Популярность: 4,5 звезд на GitHub
GitHub: https://github.com/elrumordelaluz/csshake

Hover.css

Hover.css - это библиотека анимации CSS, предназначенная для использования с кнопками и другими элементами пользовательского интерфейса на твоем сайте. В ней есть очень красивые 2D-переходы, а также множество других хорошо продуманных анимаций.

Популярность: 25К звезд на GitHub
Описание: "Легко применять к своим собственным элементам, изменять или просто использовать для вдохновения."
GitHub: https://github.com/IanLunn/Hover

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

AniJS

Наша последняя библиотека интересна своим уникальным подходом. AniJS - это библиотека анимации, которая позволяет добавлять анимацию к элементам в простой структуре, напоминающей предложение. Возьмем следующий формат:

Если щелкнуть, на квадрат, сделать покачивание анимированным в .container-box

Если ты не очень хорошо знаком с JavaScript, это может стать отличным способом начать двигаться в соответствии с принципами "JS-хореографии".

Разработчик: Дариэль Ноэль
Релиз: 2014
Популярность: 3.7К звезд на GitHub
Описание: "Библиотека для поднятия вашего веб-дизайна без программирования".
GitHub: https://github.com/anijs/anijs

AniJS - это библиотека с очень умеренным размером, учитывая ее функциональность. Формат, который она использует для реализации, довольно оригинален и отличается от других библиотек анимации.

Тем не менее, эту библиотеку стоит попробовать хотя бы раз для своих проектов.

Какую библиотеку выбрать?

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

Если ты ищешь простое в использовании, надежное решение для CSS, Animate.css является наиболее универсальным вариантом, который можно использовать по соотношению "цена-качество".

Если ты ищешь более полный, мощный вариант JavaScript, выбери между GreenSock и AnimeJS.

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

Используешь ли ты анимационные библиотеки для своих проектов? Какие твои любимые библиотеки анимации?

Источник: https://www.sitepoint.com/our-top-9-animation-libraries/