Топ 9 анимационных библиотек для UI дизайнеров в 2017 году

Опубликовано Виктор Обломов

Топ 9 анимамационных библиотек в 2017 году

Фронтенд веб-дизайн прошел революцию за последнее десятилетие. В 2007 году большинство из нас разрабатывали статические шаблоны сайтов — в 2017 году мы строим «digital машины» с тысячами динамических частей.

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

Ниже приведен последний вариант списка, который поможет вам выбрать нужную анимационную библиотеку для каждой задачи. Это 9 бесплатных, хорошо задокументированных анимационных библиотек, наиболее подходящих для UI разработки.

Имейте в виду, что мы рассматриваем каждую библиотеку с точки зрения дизайнера пользовательского интерфейса, а не разработчика кода. Некоторые из этих библиотек написаны на чистом CSS, другие на JavaScript, но для пользования библиотеками ничего, кроме базового понимания HTML/CSS не требуется. Подключаем библиотеку — добавляем класс CSS.

Список топ 9 анимационных библиотек 2017

  1. Animate.css
  2. Bounce.js
  3. AnimeJS
  4. Magic Animations
  5. DynCSS
  6. CSShake
  7. Hover.CSS
  8. Velocity.js
  9. AniJS

Animate.css

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

animate.css

  • Создатель: Daniel Eden
  • Год выхода: 2013
  • Текущая версия:
  • Популярность:
  • Описание: «Кросс-браузерная библиотека CSS анимации».
  • Размер библиотеки: 43 KB
  • GitHub: https://github.com/daneden/animate.css
  • Лицензия:

По состоянию на середину 2017 года она по-прежнему остается одной из самых популярных и широко используемых библиотек анимации CSS, а ее миниатюрный файл достаточно мал (16,6kb) для включения в мобильные сайты. Проект имеет более 44 000 звезд на Github и часто упаковывается как компонент во многих крупных проектах.

На протяжении 4 лет Animate.css находится в активном развитии. Это одна из простейших и наиболее надежных библиотек анимации, и мы без колебаний использовали бы ее в любом проекте.

Bounce.js

Bounce.js — это JavaScript библиотека анимации, которая фокусируется на предоставлении вам уникальной, веселой, в стиле «Warner brothers» анимации на вашем сайте.

Bounce.js

  • Создатели: Tictail
  • Год выхода: 2014
  • Текущая версия:
  • Популярность:
  • Описание: «Создайте красивые анимации с поддержкой CSS3 в кратчайшие сроки».
  • Размер библиотеки: 16 KB
  • GitHub: https://github.com/tictail/bounce.js
  • Лицензия:

Bounce.js — это аккуратная библиотека анимации, в которой содержится около десяти анимационных «пре-сетов» — отсюда и небольшой размер библиотеки. Как и в случае с animate.css, анимация плавная и безупречная. Возможно, вам захочется использовать эту библиотеку из-за маленького размера подключаемого файла или вам нравится анимация в стиле «pop and bubble».

AnimeJS

AnimeJS — единственный новичок в нашем списке, но за 12 месяцев с момента его создания он набрал наибольшее количество подписчиков. Он невероятно универсален и эффективен и не будет лишним, при создании анимации в HTML играх. Единственный реальный вопрос: «будет ли это излишеством для простых веб-приложений»?

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

AnimeJS позиционируется как легкая JavaScript библиотека для анимации, которая «работает с любыми CSS-свойствами, отдельными CSS-трансформациями, SVG или любыми другими атрибутами DOM, а также JavaScript объектами» . Это довольно удивительно — настолько удивительно, что GIF, который я взял ниже, не может передать то, насколько гладким и плавным является движение.

AnimeJS

Этот проект доступен на GitHub.

  • Создатель: Julian Garnier
  • Год выхода: 2016
  • Текущая версия:
  • Популярность:
  • Описание: «Механизм анимации JavaScript».
  • Размер библиотеки: 10.9 KB
  • GitHub: https://github.com/juliangarnier/anime
  • Лицензия:

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

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

Magic Animations

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

Magic Animations

  • Текущая версия:
  • Популярность:
  • Описание: «CSS3 Анимация со спецэффектами»
  • Размер библиотеки: 36.5 KB
  • GitHub: https://github.com/miniMAC/magic
  • Лицензия:

Размер файла Magic Animations достаточно мал по сравнению с animate.css, и он известен своими оригинальными анимациями, такими как magic effects, foolish effects и bomb effects.

Если вы ищете что-то немного необычное, я определенно рекомендую вам эту анимационную библиотеку в вашем следующем проекте. Вы не будете разочарованы.

DynCSS

DynCSS — это библиотека анимации, которую вы можете использовать на своем веб-сайте совместно с эффектом параллакса. Чтобы получить более четкое представление о том, что вы можете сделать с этой библиотекой, ознакомьтесь с демо.

DynCSS

  • Создатель: Vittorio Zaccaria
  • Год выхода: 2014
  • Текущая версия:
  • Популярность:
  • Описание: «Сделайте свой сайт оживленным с помощью Dynamic CSS».
  • GitHub: https://github.com/vzaccaria/DynCSS
  • Лицензия:

DynCSS — это простая библиотека, которая в ближайшем будущем возможно станет популярной, но в настоящее время это довольно новый проект, о чем свидетельствует его количество звезд на GitHub. Одним из впечатляющих эффектов, которые предлагает эта библиотека, является поворот элементов относительно прокрутки, который Витторио прекрасно демонстрирует на домашней странице DynCSS (что идеально подходит для связывания анимации с эффектом параллакс).

CSShake

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

CSShake

Apple популяризировала UI анимацию, энергично встряхивая элемент пользовательского интерфейса (диалоговое окно, модальное окно или поле ввода), когда пользователь вводит неверный ответ — имитируя «нет» потряхиванием головы. CSShake предоставляет целый ряд интересных анимаций «встряхивания», и в этой библиотеке нет недостатка в вариантах.

Хотя в настоящее время библиотека и популярнее, чем DynCSS, я чувствую, что часто размер файла не оправдан функциональностью которую он предоставляет. Хоть анимации и качественные, я не могу придумать хоть какието варианты, в которых вам не нужно будет включать вторую анимационную библиотеку для non-shaking эффектов.

Но, возможно, мне просто не хватает воображения?

Hover.css

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

Hover.css

  • Текущая версия:
  • Популярность:
  • Описание: «Легко применять к своим элементам, модифицировать или просто использовать для вдохновения».
  • Размер библиотеки: 104.2 KB
  • GitHub: https://github.com/IanLunn/Hover
  • Лицензия:

Hover.css лучше всего подходит для анимации отдельных элементов страницы, таких как кнопки, логотипы, компоненты SVG или изображения. Он имеет огромный список вариантов, и это объясняет его относительно большой размер (однако я чувствую, что размер можно оптимизировать еще больше). Я думаю, его самыми интересными анимационными эффектами являются speech bubbles и curls.

Velocity.js

Velocity.js — еще один изощренный, полнофункциональный JavaScript набор анимации, включающий такие функции, как Fade & Slide, Scroll, Stop, Finish, Reverse и многие другие.

В настоящее время он может похвастаться внушительным списком пользователей с большим именем, включая Tumblr, WhatsApp, MailChimp, Scribd, Gap и HTC, поэтому вы должны знать, что они были проверены в боевых условиях крупных проектов.

Velocity.js

  • Создатель: Julian Shapiro
  • Год выхода: 2014
  • Текущая версия:
  • Популярность:
  • Описание: «Ускоренная анимация JavaScript».
  • Размер библиотеки: 34.8 KB
  • GitHub: https://github.com/julianshapiro/velocity
  • Лицензия:

Velocity не для всех будет подходить, так как это движок JavaScript анимации, и на самом деле это движок анимации, использующий тот же API, что и в  jQuery $.animate(). Это работает как с присутствием jQuery, так и без него. Тем не менее, он невероятно быстр, и его функции включают в себя анимацию цвета, transforms, циклы, easing — по сути, это лучшие переходы (transitions) на комбинации jQuery и CSS.

AniJS

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

If click, On Square, Do wobble animated To .container-box

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

AniJS

  • Создатели: anijs
  • Год выхода: 2014
  • Текущая версия:
  • Популярность:
  • Описание: «Библиотека для повышения ваших скилов веб-дизайнера, без кодинга».
  • Размер библиотеки: 10.5 KB
  • GitHub: https://github.com/anijs/anijs
  • Лицензия:

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

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

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

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

Если вы ищете простое в использовании и надежное решение на CSS, Animate.CSS — это, пожалуй, самое лучшее доступное решение.

Если вы ищете более полный, мощный вариант на JavaScript, VelocityJS и Anime.JS — очень сложно выбрать. Velocity в настоящее время имеет послужной список и большое количество установок, но Anime.JS невероятно отполирована и увлекательна для такого нового проекта. Уже сейчас, красивой документации Anime.JS для меня может быть достаточно, чтобы я выбрал ее.

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

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

Не совсем точный перевод статьи на sitepoint.com

Похожие публикации