Как работать с анимацией в JavaScript с помощью anime.js

Как подключить и работать с anime.js
Метки: /

В этой статье будет рассказываться как подключить и работать с анимацией в JavaScript с помощью библиотеки anime.js.

Также на сайте уже есть подобная статья, Анимация на JQuery, как понятно из названия, в ней вы научитесь создавать анимацию с помощью JQuery,  но во первых, если вам нужен только простой способ делать анимацию, то JQuery для этого не очень подойдёт, так как, кроме этого он ещё многое может, во вторых, JQuery уже устарел и в новых проектах не используется.

Как подключить anime.js:

Для начала рассмотри как подключить anime.js к вашему проекту, для этого нужно его скачать с GitHub,  и нажать на download.

Как подключить anime.js

В архиве который вы скачаете, заходим в папку «lib» и от туда копируем файл «anime.min.js» в папку с вашем проектам, и подключаем его как обычный JS файл.

Также если вы используете NPM, то используете эту команду.

Ну и подключается через import.

К сожалению anime.js нельзя подключить через CMD.

Как использовать:

Использовать эту библиотеку очень просто, по сути вы просто будите брать элемент и настраивать его анимацию, вот простой пример.

Как видите не чего сложного тут нет, к сожалению, я вам не смогу показать как выглядит анимация.

Но суть думаю ясна, вы просто берёте элемент который вам нужно анимировать и задаёте ему параметры, для анимации.

Вот основные параметра для анимации.

  • targets — Берёт HTML  элемент, можно вписывать уже взятый элемент или только его селектор;
  • translateX — Меняет позицию элемента по X или по горизонтали, значение задаётся в пикселях;
  • translateY — Меняет позицию элемента по Y или по вертикале, значение задаётся в пикселях;
  • rotate — Поворот в градусах;
  • scale — Увеличивает размер по X и по Y в сколько то раз;
  • scaleX — Увеличивает размер по X в сколько то раз;
  • scaleY — Увеличивает размер по Y в сколько то раз;
  • duration — Длительность анимации в миллисекундах;
  • delay — Задержка анимации в anime.js
  • width — Назначает ширину;
  • height — Назначает высоту;
  • easing — Тип анимации;
  • backgroundColor — Задаёт цвет фона;

Как видите параметров для изменений действительно очень много, но это ещё только верхушка айсберга, тут показаны лишь самые основные и полезные на мой взгляд.

Также вы можете последовательно менять анимацию, вот как это делается.

Как видите всё просто, что бы, но последовательность достигается за счёт того, что стоит задержка анимации, многие эффекты в этом коде работают параллельно.

Ещё в anime.js можно работать с SVG, для этого используется параметр points, хотя с ним не очень удобно работать, но также и другие параметры тоже работают со SVG.

Вывод:

В этой стать мы кратко разобрали как подключить и работать с библиотекой anime.js, для создания анимации на JavaScript, если вас заинтересовала она то посмотрите полную документацию, она очень простая, поэтому думаю разберётесь.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 2
Средняя оценка: 3,00
Загрузка...

Поделится:

Также рекомендую: