Современные клиенты веб-сайтов обеспечивают высококачественную анимацию, что приводит к увеличению спроса на библиотеки анимации JavaScript. К счастью, предложение соответствует спросу, и есть несколько вариантов. Трудно решить, какой из них выбрать. В течение года многие анимационные библиотеки могут стать лучше и предоставить лучшие решения для создания анимаций.
Давайте взглянем на 10 лучших анимационных библиотек JavaScript, которые стоит посмотреть в 2018 году.
Three JS
42 569 ★
Вставить сюда картинки
Three JS — это №1 и самая популярная анимационная библиотека (у проекта более 900 участников). Восемь лет спустя Three JS по-прежнему остается мощным инструментом анимации. Three JS использует WebGL для создания классной трехмерной компьютерной графики на стороне браузера. Три функции JS включают, помимо прочего, эффекты рельефа, перспективные и орфографические камеры, инструменты геометрии, такие как плоскости, кубы, сферы, тор. Однако одним из недостатков этой библиотеки является то, что некоторые разработчики считают ее медленной в использовании.
Установить:
Используя NPM, Three JS можно установить с помощью следующей команды.
npm install three
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Anime JS
21 084 ★
Anime JS занимает второе место в списке как потенциальная альтернатива Three JS. Созданная Джулианом Гарнье, Anime JS — одна из самых быстрых анимационных библиотек, с которыми вы когда-либо сталкивались. Anime JS без проблем работает с DOM и поддерживает основные браузеры, такие как Chrome, Firefox, Opera, Safari, IE10+ и т. д. Эта библиотека включает в себя, но не ограничивается следующими функциями: для анимации CSSCSS transform, для SVG-анимации линий, для синхронизации временных шкал нескольких экземпляров. Одна из причин, по которой Anime JS наиболее привлекателен для разработчиков, заключается в том, что он очень легкий.
Установить:
Используя NPM, Anime JS можно установить с помощью следующей команды.
npm install animejs
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Particles JS
15 612 ★
Третья библиотека анимации, которую мы рассмотрим далее, — это Particles JS. Particles JS, созданная Винсентом Гарро, представляет собой библиотеку JavaScript, предназначенную для анимации, для создания потрясающих анимаций, состоящих из точек и линий. Как уже упоминалось, эта библиотека используется для создания анимации, похожей на частицы. Таким образом, он позволяет разработчикам переключать такие параметры, как плотность, цвет, непрозрачность, форма и размер частиц. Однако, поскольку он работает только с фоном частиц, он не подходит для создания других типов анимации.
Установить:
Используя NPM, Particles JS можно установить с помощью следующей команды.
npm install particlesjs
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
ScrollReveal JS
15 499 ★
ScrollReveal JS занимает четвертое место в списке и, как и Particles JS, обсуждавшийся ранее, представляет собой библиотеку JavaScript для анимации. ScrollReveal JS используется для создания действительно крутых эффектов прокрутки, это легкий инструмент (без каких-либо зависимостей), и его очень легко использовать, поскольку он использует естественный язык для отправки команд для создания анимации. ScrollReveal JS работает с узлами DOM, несколькими контейнерами, асинхронным содержимым и поддерживает трехмерное вращение. ScrollReveal JS, вероятно, лучший инструмент для создания эффектов прокрутки, он поддерживает большое количество браузеров, если они поддерживают CSS Transform и CSS. Свойства перехода.
Установить:
Используя NPM, ScrollReveal JS можно установить с помощью следующей команды.
npm install scrollreveal
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Velocity JS
14 692 ★
Следующей в этом списке замечательных анимационных библиотек является Velocity JS. Его любят многие дизайнеры пользовательского интерфейса. Используя HTML и SVG, инструмент упрощает создание мощных веб-анимаций. Velocity JS можно использовать для прокрутки окна браузера и даже отмены предыдущих анимаций. Хотя Velocity JS использует тот же API, что и $.animate() в jQuery, вы обнаружите, что это один из немногих инструментов анимации, не зависящих от мощной инфраструктуры jQuery. Такие люди, как WhatsApp и MailChimp, являются известными пользователями этого превосходного инструмента.
Установить:
Используя NPM, Velocity JS можно установить с помощью следующей команды.
npm install velocity-animate
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Popmotion JS
13 777 ★
Popmotion JS, занявшая шестое место, представляет собой библиотеку анимации, похожую на Anime JS, которую можно использовать для создания потрясающих анимаций для браузера. Библиотека также включает отслеживание указателя, физику пружин, 3D-анимацию и многое другое и может использоваться для создания функциональных, реактивных анимаций.
Установить:
Используя NPM, Popmotion JS можно установить с помощью следующей команды.
npm install popmotion
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Mo JS
13 461 ★
Подобно Popmotion JS, Mo JS занимает седьмое место и представляет собой простую библиотеку для создания веб-анимации. Mo JS прост в освоении, и его создатель Олег Соломка создал множество руководств и демонстраций, чтобы помочь новичкам быстро начать работу. Mo JS также имеет функции для создания кругов, многоугольников, прямоугольников, линий и многого другого. Mo JS выглядит очень просто, но с его помощью можно создавать очень сложные веб-анимации с динамической графикой.
Установить:
Используя NPM, Mo JS можно установить с помощью следующей команды.
npm install mo-js
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Vivus JS
10 365 ★
Vivus JS занимает восьмое место в этом списке. Если вы ищете хорошую библиотеку для работы с SVG из этого списка, Vivus JS — то, что вам нужно, особенно для новичков. Эта библиотека также быстрая и легкая, поскольку не имеет никаких зависимостей. Помимо использования SVG, Vivus JS можно использовать для создания красивых кнопок, а также доступны другие потрясающие анимации.
Установить:
Используя NPM, Vivus JS можно установить с помощью следующей команды.
npm install vivus
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
GreenSock JS
7767 ★
GreenSock, широко известный как GSAP (GreenSock Animation Platform), мы игнорируем его рейтинг в списке, это одна из самых популярных библиотек в списке. Скорость и эффективность GreenSock — одна из причин, по которой его любят. Эта мощная библиотека также поддерживает различные браузеры и не имеет зависимостей.
Установить:
Используя NPM, GreenSock JS можно установить с помощью следующей команды.
npm install gsap
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
AOS
6613 ★
Таким образом, в то время как другие библиотеки, обсуждаемые в этой статье, в значительной степени зависят от JavaScript, AOS (Animate On Scroll) больше зависит от CSS. Используя AOS, разработчики могут анимировать элементы страницы при прокрутке вниз, а затем восстанавливать предыдущее состояние анимации при прокрутке вверх. Эта библиотека также поставляется с рядом предопределенных событий, которые могут быть вызваны событиями прокрутки.
Установить:
Используя NPM, Animate On Scroll можно установить с помощью следующей команды.
npm install aos
Дополнительную информацию можно получить отОфициальный сайтилиnpmПолучать.
Суммировать
Вот и все, десять библиотек JavaScript для создания красивых анимаций. Пользовались ли вы какой-либо из этих библиотек? Есть ли у вас какие-либо предложения по пользовательскому опыту? Или какие библиотеки, по вашему мнению, должны быть перечислены здесь, но не указаны? Давай поговорим.
9 лучших графических библиотек JS