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

анимации

Под понятието "анимация" най-често разбираме анимационни филми - любимите ни "анимационни филми" от детството. Но ако погледнете в обяснителния речник, ще разберем, че в превод от френски това означава „съживяване“, „анимация“. И тук се оказва, че тази стойност е изненадващо точна не само за филмовата индустрия, но и за уеб технологиите.

Използването на различни анимационни ефекти (преходи, движения, трансформации и т.н.) значително „оживяват“ уебсайта, позволяват ви да контролирате вниманието на потребителя, превключвайки го към необходимия елемент и давайки определени визуални подсказки.

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

Dynamics.js

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

библиотеки
  • Изтегли

Малкабиблиотека cta.js е предназначена засъздаване на анимационни ефекти на страницата от типа "действие-ефект", т.е. задържането или щракването върху обект с показалеца на мишката има специфичен ефект. Много е удобен за използване при разработване на интерфейси с плочки, когато щракването върху елемент го кара да се разширявапод формата на модален прозорец, цяла страница или под формата на страничен слайд панел.

javascript
  • Пример
  • Изтегли

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

javascript
  • Пример
  • Изтегли

Rainyday.js

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

анимации
  • Пример
  • Изтегли

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

анимации
  • Пример
  • Изтегли

Dom-Animator.js

създаване
  • Изтегли

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

библиотеки
  • Пример
  • Изтегли

анимации
  • Пример
  • Изтегли

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

създаване
  • Пример
  • Изтегли

javascript
  • Пример
  • Изтегли

Shifty е библиотека, която съдържа всичко необходимо за пълноценнаанимация по ключови кадри (така нареченото „побратимяване“), а броят на обектите може да бъде просто огромен. Това е библиотека от ниско ниво, която може да се използва като ядро ​​за платформи или библиотеки от по-високо ниво. Всъщност Shifty се използва като ядро ​​на гореспоменатия Rekapi.

библиотеки
  • Пример
  • Изтегли

анимации
  • Пример
  • Изтегли

Velocity.js

Много мощна и добре оптимизирана библиотека с много функции. Сред тях са цветна анимация, циклични трансформации, усукване, скролиращи сцени ианимиране на SVG елементи. Velocity.js е напълно съвместим с jQuery - просто го добавете към страницата и заменете всички извиквания на $.animate() с $.velocity(). Според уверенията на разработчика, ще бъдете изумени от увеличението на производителността.

библиотеки
  • Пример
  • Изтегли

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

създаване
  • Пример
  • Изтегли