Анимация объектов с помощью библиотеки anime.js

Anime.js — это библиотека для создания анимаций, с помощью которой можно анимировать различные объекты, свойства и атрибуты. Библиотека проста в освоении и использовании за счёт понятного синтаксиса.

Начало работы

Для начала необходимо скачать библиотеку с официального сайта, после чего перейти в папку lib и выбрать саму библиотеку anime.js, либо её минимизированный вид anime.min.js. Рекомендуется подключать минимизированную (сжатую) библиотеку, поскольку она имеет меньший размер и в следствии этого сайт будет быстрее загружаться.

После чего подключить её в html-файле:

<script src="js/anime.min.js"></script>

Возможности библиотеки

Поскольку возможности этой библиотеки довольно обширные, рассмотрим некоторые из них.

CSS-селекторы

Для первого примера создадим блок-контейнер и в нём блок поменьше, на котором уже и будем совершать все манипуляции:

<div class="block">
	<div class="block_example"></div>
</div>

Зададим им стили:

.block {
	width: 500px;
	height: 250px;
	background-color: #000;
	overflow: auto;
}
 
.block_example {
	width: 50px;
	height: 50px;
	background-color: red;
	margin-left: 50px;
	margin-top: 100px;
}

По итогу у нас должно получиться что-то вроде этого:

Итак, приступим к первому примеру:

anime({
	targets: '.block .block_example',
	translateX: 250
});

В данном случае вызывается функция anime(), в которой должны содержаться пары "ключ-значение". В рассмотренном случае по ключевому слову targets мы указываем, что именно хотим анимировать. Указываем родительский блок и внутренний, чтобы функция понимала, с каким объектом мы хотим работать. После чего, используя команду translateX, которая двигает объект по оси х, задаём расстояние в пикселях. После выполнения мы получим это:

Несколько CSS-селекторов

Естественно, данная библиотека может работать как с одним, так и с несколькими селекторами. Для этого создадим несколько блоков в нашем контейнере:

<div class="block">
	<div class="block_example__2"></div>
	<div class="block_example__2"></div>
	<div class="block_example__2"></div>
</div>

После чего с помощью метода querySelectorAll в значение переменной elements заносим наши блоки:

var elements = document.querySelectorAll('.block .block_example__2');
 
anime({
  targets: elements,
  translateX: 270
});

На выходе получим следующее:

JS-объекты

Данная библиотека также способна работать с JS-объектами.

Добавим в html-файл блок с текстом и по умолчанию укажем там финальные значения для вывода:

<pre class="battery-log">{"charged":"100%","cycles":130}</pre>

В js-коде создадим две переменные, одна из которых будет отвечать за то, с каким элементом мы будем работать, а во второй будут содержаться атрибуты заряда и циклов. После чего вызовем функцию anime(), внутри которой укажем то, с какими данными нам работать, с какой скоростью производить обновление данных, а также финальные значения:

var logEl = document.querySelector('.battery-log');
 
var battery = {
  charged: '0%',
  cycles: 120
}
 
anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear',
  update: function() {
    logEl.innerHTML = JSON.stringify(battery);
  }
});

Результат:

Массивы

Anime.js способна работать также с массивами.

Создадим три блока с различными классами:

<div class="block">
	<div class="block_example__1"></div>
	<div class="block_example__2"></div>
	<div class="block_example__3"></div>
</div>

В параметрах функции укажем массив, в котором помимо первого блока, содержащегося в значении переменной el, будут также находиться все остальные:

var el = document.querySelector('.block .block_example__1');
 
anime({
  targets: [el, '.block .block_example__2', '.block .block_example__3'],
  translateX: 250
});

Результат:

CSS-свойства

Данная библиотека способна изменять CSS-свойства объекта.

anime({
  targets: '.block .block_example',
  left: '240px',
  backgroundColor: '#FFF',
  borderRadius: ['0%', '50%'],
  easing: 'easeInOutQuad',
  translateX: 250
});

Здесь указано, какой цвет будет приобретать наш блок, а также насколько сильно будут скругляться его углы. Помимо этого через параметр easing укажем то, насколько плавно будет выполняться наша анимация. Для наглядности также подвинем блок по оси х.

В результате мы получим это:

Или, например, можно вращать объект: увеличить его, а также указать то, как будет отображаться вращение:

anime({
  targets: '.block .block_example',
  translateX: 250,
  scale: 2,
  rotate: '1turn'
});

Результат:

Помимо всего прочего, библиотека может работать с задержкой времени, анимации, SVG-файлами и многим другим. Больше примеров можно найти на официальном сайте в разделе документации.