14 JavaScript бібліотек для створення анімації

анімації

Під терміном «анімація» ми найчастіше розуміємо мультиплікаційні фільми — з дитинства «мультики». Але якщо зазирнути у тлумачний словник, ми дізнаємося, що у перекладі з французької воно означає «оживлення», «одухотворення». І ось тут виявляється, що це значення дивовижно точно підходить не тільки до кіноіндустрії, але і до веб-технологій.

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

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

Dynamics.js

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

анімації
  • завантажити

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

створення
  • приклад
  • завантажити

Цікава бібліотека, яка використовує WebAudio API для створення на сторінці музичного синтезатора. Може знайти застосування при розробці онлайн-підручника з музики або як забавна іграшка.

анімації
  • приклад
  • завантажити

Rainyday.js

Неймовірно гарний ефект дощу з краплями різного розміру, що стікають униз. Щоправда, на мій погляд, великим краплям не вистачає реалістичності (може тієї самої фізики, яка є в Dynamics.js?). Втім, наявний API дозволяє створити власні об'єкти та керувати їхньою поведінкою, створюючи ще більш неймовірні ефекти.

анімації
  • приклад
  • завантажити

lconate.js дозволяє проводити перетворення одного об'єкта на інший, використовуючи різні ефекти і рухи. Працює з іконними шрифтами, гліфами та набір іконок користувача.

бібліотек
  • приклад
  • завантажити

Dom-Animator.js

javascript
  • завантажити

Famous - подієво-орієнтованаJS-бібліотека для створення сучасної анімації. Має потужне геометричне ядро, що дозволяє маніпулювати різними 3D об'єктами – точковими та об'ємними – прикладати до них сили та прискорення, накладати обмеження та контролювати зіткнення.

бібліотек
  • приклад
  • завантажити

завантажити
  • приклад
  • завантажити

Легка та швидка бібліотека, що видає, як запевняють розробники, 60 fps навіть на мобільних пристроях. За допомогою матриць трансформування CSS дозволяє переміщати, обертати, масштабувати та робити інші маніпуляції з об'єктами. Дозволяє також застосовувати до об'єктівспеціальні ефекти, які привертають увагу, які можна використовувати при заповненні форм.

створення
  • приклад
  • завантажити

javascript
  • приклад
  • завантажити

Shifty - бібліотека, що містить все необхідне для повноцінноїанімації по ключових кадрах (так званий «твінінг»), причому кількість об'єктів може бути просто величезною. Це низькорівнева бібліотека, яку можна використовувати як ядро ​​для більш високорівневих платформ або бібліотек. Власне, як ядро ​​вищезгаданої Rekapi, використовується якраз Shifty.

javascript
  • приклад
  • завантажити

бібліотек
  • приклад
  • завантажити

Velocity.js

Дуже потужна та добре оптимізована бібліотека з безліччю функцій. Серед них анімація кольорів, циклічні перетворення, скручування, прокручування сцен іанімація SVG елементів. Velocity.js повністю сумісна з jQuery – достатньо додати її на сторінку та замінити всі виклики $.animate() на $.velocity(). Як запевняє розробник, ви будете вражені приростом продуктивності.

анімації
  • приклад
  • завантажити

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

javascript
  • приклад
  • завантажити