В этой статье будет рассказываться как подключить и работать с анимацией в JavaScript с помощью библиотеки anime.js.
Также на сайте уже есть подобная статья, Анимация на JQuery, как понятно из названия, в ней вы научитесь создавать анимацию с помощью JQuery, но во первых, если вам нужен только простой способ делать анимацию, то JQuery для этого не очень подойдёт, так как, кроме этого он ещё многое может, во вторых, JQuery уже устарел и в новых проектах не используется.
Как подключить anime.js:
Для начала рассмотри как подключить anime.js к вашему проекту, для этого нужно его скачать с GitHub, и нажать на download.
В архиве который вы скачаете, заходим в папку «lib» и от туда копируем файл «anime.min.js» в папку с вашем проектам, и подключаем его как обычный JS файл.
1 | <script src="anime.min.js"></script> |
Также если вы используете NPM, то используете эту команду.
1 | npm install animejs --save |
Ну и подключается через import.
К сожалению anime.js нельзя подключить через CMD.
Как использовать:
Использовать эту библиотеку очень просто, по сути вы просто будите брать элемент и настраивать его анимацию, вот простой пример.
1 2 3 4 5 6 7 8 9 10 | // Берём HTML элемент по селектору let elements = document.querySelector('.anim'); // Функция для анимации элемента anime({ // Получаем элемент targets: elements, // Перемешаем его по X translateX: 250 }); |
Как видите не чего сложного тут нет, к сожалению, я вам не смогу показать как выглядит анимация.
Но суть думаю ясна, вы просто берёте элемент который вам нужно анимировать и задаёте ему параметры, для анимации.
Вот основные параметра для анимации.
- targets — Берёт HTML элемент, можно вписывать уже взятый элемент или только его селектор;
- translateX — Меняет позицию элемента по X или по горизонтали, значение задаётся в пикселях;
- translateY — Меняет позицию элемента по Y или по вертикале, значение задаётся в пикселях;
- rotate — Поворот в градусах;
- scale — Увеличивает размер по X и по Y в сколько то раз;
- scaleX — Увеличивает размер по X в сколько то раз;
- scaleY — Увеличивает размер по Y в сколько то раз;
- duration — Длительность анимации в миллисекундах;
- delay — Задержка анимации в anime.js
- width — Назначает ширину;
- height — Назначает высоту;
- easing — Тип анимации;
- backgroundColor — Задаёт цвет фона;
Как видите параметров для изменений действительно очень много, но это ещё только верхушка айсберга, тут показаны лишь самые основные и полезные на мой взгляд.
Также вы можете последовательно менять анимацию, вот как это делается.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | // Берём элемент let elements = document.querySelector('.anim'); anime({ targets: elements, // Назначаем элемент для изменений translateX: { value: 250, // Чему равен translateX duration: 800 // Длительность }, rotate: { value: 360, // Чему равен параметр rotate duration: 1800, // Длительность easing: 'easeInOutSine' // Тип анимации }, scale: { value: 2, Чему равен scale duration: 1600, // Сколько будет проигрываться анимация delay: 800, // Задержка анимацией easing: 'easeInOutQuart' // Тип Анимации }, delay: 250 // Задержка для всех типов анимации }); |
Как видите всё просто, что бы, но последовательность достигается за счёт того, что стоит задержка анимации, многие эффекты в этом коде работают параллельно.
Ещё в anime.js можно работать с SVG, для этого используется параметр points, хотя с ним не очень удобно работать, но также и другие параметры тоже работают со SVG.
Вывод:
В этой стать мы кратко разобрали как подключить и работать с библиотекой anime.js, для создания анимации на JavaScript, если вас заинтересовала она то посмотрите полную документацию, она очень простая, поэтому думаю разберётесь.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 3,00
Загрузка...