Топ 9 библиотек для анимации в 2016 году

Топ 9 библиотек для анимации в 2016 году

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

Еще 10 лет назад, чтобы добавить сайту интерактивности, разработчики использовали Adobe Flash. Однако с быстрым развитием HTML5, CSS3 и мириад JS библиотек Flash на данный момент отошел на задний план (к счастью?). 2015 год был богат на бесплатные библиотеки для анимации, и сегодня я расскажу про 9 библиотек и сделаю упор на простоту использования, возможности и общую популярность.

Animate.css

Animate.css – одна из самых простых в использовании CSS библиотек для анимации. Добавить библиотеку так же просто, как обычный CSS класс к HTML элементу. Также можно использовать JQuery для вызова анимации по определенным событиям.

Создатель: Daniel Eden

Дата выпуска: 2013

Текущая версия: 3.4.0

Популярность: 25,000+ звезд на GitHub

Описание: «Кроссбраузерная библиотека CSS анимации. Очень проста в использовании.»

Размер библиотеки: 55.2 Кб

GitHub: https://github.com/daneden/animate.css

Лицензия: MIT

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

Bounce.js

Bounce.js – инструментарий и JS библиотека, основной фокус которой расположен на уникальной анимации гибких объектов с помощью CSS.

Создатель: Tictail

Дата выпуска: 2014

Текущая версия: 0.8.2

Популярность: 3,500+ звезд на GitHub

Описание: «Создавайте красивую CSS3 анимацию мгновенно.»

Размер библиотеки: 16 Кб

GitHub: https://github.com/tictail/bounce.js

Лицензия: MIT

Bounce.js – элегантная анимационная библиотека, поставляемая с десятью заранее сохраненными шаблонами, что обеспечивает маленький размер файла. Как и в animate.css анимация выглядит плавно и безупречно. Если вам не нужен всеобъемлющий список типов анимации и если вы ищите легковесную библиотеку, то данный экземпляр можно положить к себе в копилку.

Magic Animations

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

Создатель: Christian

Дата выпуска: 2014

Текущая версия: 1.1.0

Популярность: 3,400+ звезд на GitHub

Описание: «CSS3 анимация с особенными эффектами.»

Размер библиотеки: 36,5 Кб

GitHub: https://github.com/miniMAC/magic

Magic animations имеет довольно небольшой размер по сравнению с animate.css, и получила известность благодаря своей фирменной анимации, такой как эффекты magic, foolish и bomb. Если вы ищите что-то необычное, я бы точно порекомендовал вам воспользоваться данной библиотекой в вашем следующем проекте. Разочарованы вы не будете.

DynCSS

DynCSS – библиотека, хорошо сочетающаяся с параллакс эффектом. Чтобы полностью понять возможности библиотеки, взгляните на демо.

Создатель: Vittorio Zaccaria

Дата выпуска: 2014

Текущая версия: 0.8.1

Популярность: 190+ звезд на GitHub

Описание: «Оживите свой сайт при помощи динамической CSS анимации.»

GitHub: https://github.com/vzaccaria/DynCSS

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

CSShake

CSShake делает именно то, что написано на «коробке» — CSS библиотека для встряски элементов страницы. Как можно ожидать, есть множество разных эффектов встряски.

Создатель: Lionel

Дата выпуска: 2014

Популярность: 2,000+ звезд на GitHub

Описание: «CSS классы для перемещения элементов DOM!.»

Размер библиотеки: 78,8 Кб

GitHub: https://github.com/elrumordelaluz/csshake

Лицензия: MIT

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

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

Hover.css

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

Создатель: Ian Lunn

Дата выпуска: 2014

Популярность: 10,700+ звезд на GitHub

Описание: «Добавляйте анимацию своим элементам интерфейса, модифицируйте или используйте ее для вдохновления.»

Размер библиотеки: 104,2 Кб

GitHub: https://github.com/IanLunn/Hover

Лицензия: MIT

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

Velocity.js

Velocity.js – сложная JS библиотека для создания таких эффектов анимации, как Fade & Slide, Scroll, Stop, Finish, Reverse и еще множества других эффектов. Огромный список компаний типа Tumblr, WhatsApp, MailChimp, Scribd, Gap и HTC, а также обычные пользователи используют данную библиотеку.

Создатель: Julian Shapiro

Дата выпуска: 2014

Текущая версия: 1.2.2

Популярность: 8,700+ звезд на GitHub

Описание: «Ускоренная JavaScript анимация.»

Размер библиотеки: 34,8 Кб

GitHub: https://github.com/julianshapiro/velocity

Лицензия: MIT

Velocity подойдет не всем, так как в ее основе лежит JavaScript анимация, а движок анимации использует схожее с JQuery API $.animate(). Работает библиотека как с JQuery, так и без него. Причина, по которой я включил библиотеку в этот список, это невероятная скорость и возможность анимировать цвета, трансформировать объекты, создавать циклы и функции зацикленности – лучше всего сочетается с JQuery и CSS свойством transition.

favico.js

Favico.js предназначена для крайне специфичных случаев: с ее помощью можно заменить стандартный фавикон на анимированный, анимированная иконка выбирается из массива. Веб-приложения, которым необходимо сообщать пользователям о новом контенте – т.е. новые твиты, email’ы, посты, статьи и т.д. – могут действительно выиграть от использования данной библиотеки. Чтобы более детально разобраться в возможностях фреймворка, посмотрите демо на их сайте.

Создатель: Miroslav Magda

Дата выпуска: 2013

Текущая версия: 0.3.9

Популярность: 4,900+ звезд на GitHub

Описание: «Замените свой фавикон на значок, изображение или видео.»

Размер библиотеки: 8,9 Кб

GitHub: https://github.com/ejci/favico.js

Лицензия: MIT

Favicon.js это больше чем просто библиотека для анимации фавиконов и добавления им значков, изображений и видео. Размер библиотеки хорошо оптимизирован для ее использования в проектах.

AniJS

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

Если кликнуть на квадрат, выполнить анимацию для .container-box.

<div data-anijs="if: click, do: flipInY, to: .container-box"></div>

Создатель: anijs

Дата выпуска: 2014

Текущая версия: 0.9.3

Популярность: 2,500+ звезд на GitHub

Описание: «Библиотека для улучшения веб-дизайна без дополнительного кодинга.»

Размер библиотеки: 10,5 Кб

GitHub: https://github.com/anijs/anijs

Лицензия: MIT

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

Заключение

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

Автор: Tanay Pant

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree