14 JavaScript библиотек для создания анимации

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации

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

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

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

Говоря о технологиях, обеспечивающих использование анимации в веб-страницах, можно выделить несколько но, пожалуй, ни одна из них не является настолько мощной как . Еще несколько лет назад технология Flash-анимации была грозным конкурентом и очень популярной. Но сейчас, похоже, ее лучшие годы позади и она постепенно вытесняется со страниц сайтов более мощными и гибкими Java-скриптами. И если вы решили всерьез использовать анимацию на своем сайте, то ставку следует делать именно на JavaScript. А чтобы сделать разумный выбор библиотеки я и сделал сегодняшний обзор.

Сотрите также:
20 jQuery плагинов для создания анимации при скроллинге
Инструменты для создания HTML5 анимации
10 JavaScript библиотек для SVG анимации

Dynamics.js

Начну я, пожалуй, с Dynamics.js. Это серьезная и мощная библиотека, позволяющая создавать физически достоверную анимацию (как, например, гармонические затухающие колебания точки на главной странице сайта). Библиотека способна управлять и свойствами любого DOM-элемента. Dynamics.js используется для создания меню, кнопок, индикаторов процесса, маркеров. При этом доступны самые разнообразные параметры, такие как частота, декремент затухания, параметры, характеризующие упругость или продолжительность процесса и т.п.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Cta.js

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

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Beep.js

Интересная библиотека, использующая WebAudio API для создания на странице музыкального синтезатора. Может найти применение при разработке онлайн-учебника по музыке или в качестве забавной игрушки.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Rainyday.js

Невероятно красивый эффект дождя с каплями разного размера, стекающими вниз. Правда, на мой взгляд, крупным каплям не хватает реалистичности (может той самой физики, которая присутствует в Dynamics.js?). Впрочем, имеющийся API позволяет создать собственные объекты и управлять их поведением, создавая еще более невероятные эффекты.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Iconate.js

lconate.js позволяет производить преобразование одного объекта в другой, используя различные эффекты и движения. Работает с иконочными шрифтами, глифами и пользовательским набором иконок.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Dom-Animator.js

Dom-Animator.js — это так называемое «пасхальное яйцо» (easter egg). Производимый ею эффект не виден «невооруженным» глазом, т.е. тем кто просматривает страницу в обычном окне браузера. Но те, кто будет разбирать ваш код, увидят ее в консоли (если вы все еще не поняли о чем речь, то здесь есть видеоролик, из которого все станет понятно).

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Famous

Famous — событийно-ориентированная JS-библиотека для создания современной анимации. Имеет мощное геометрическое ядро, позволяющее манипулировать различными 3D объектами — точечными и объемными — прикладывать к ним силы и ускорения, накладывать ограничения и контролировать соударения.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Bounce.js

Неплохая JavaScript библиотека для создания впечатляющей анимации с использованием CSS. Позволяет применять к объектам различные виды движения, вращения, масштабирования и преобразования.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Snabbt.js

Легкая и быстрая библиотека, выдающая, по заверениям разработчиков, 60 fps даже на мобильных устройствах. При помощи матриц трансформирования CSS позволяет перемещать, вращать, масштабировать и производить другие манипуляции с объектами. Позволяет также применять к объектам специальные эффекты, привлекающие внимание, которые можно использовать при заполнении форм.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Rekapi

Rekapi позволяет использовать как CSS анимацию ключевых кадров (правило @keyframes), так и DOM анимацию при помощи JavaScript. Эта библиотека позволяет создавать довольно сложные динамические объекты, например круговые и линейные диаграммы, временные шкалы и другие элементы пользовательского интерфейса.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Shifty

Shifty — библиотека, содержащая все необходимое для полноценной анимации по ключевым кадрам (так называемый «твиннинг»), причем количество объектов может быть просто огромным. Это низкоуровневая библиотека, которую можно использовать как ядро для более высокоуровневых платформ или библиотек. Собственно, в качестве ядра вышеупомянутой Rekapi, используется как раз Shifty.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Tween.js

Tween.js использует технологию ключевых кадров (твиннинг) для манипуляции , JavaScript и CSS свойствами. Можно манипулировать цифровыми и строковыми свойствами, задавать такие параметры как упругость, амплитуду, частоту и соединять отдельные преобразования в конвейеры.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Velocity.js

Очень мощная и хорошо оптимизированная библиотека со множеством функций. Среди них цветовая анимация, циклические преобразования, скручивание, прокрутки сцен и анимация SVG элементов. Velocity.js полностью совместима с — достаточно добавить ее на страницу и заменить все вызовы $.animate() на $.velocity(). По заверениям разработчиком вы будете поражены приростом производительности.

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Move.js

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

jQuery плагины и JavaScript решения: 14  JavaScript библиотек для создания анимации


Заключение
JavaScript является той технологией, которая способна оживить статические веб-страницы и пользовательский интерфейс, значительно улучшив общий опыт взаимодействия. Анимация в веб-дизайне и дальше будет играть исключительно важную, и все возрастающую роль. Сейчас трудно спрогнозировать тенденции развития анимации в будущем, но то, что JavaScript еще долго будет играть ключевую роль в этой сфере — это несомненно.
Напишите свой комментарий
comments powered by HyperComments