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-файлами и многим другим. Больше примеров можно найти на официальном сайте в разделе документации.