anime.js to make animations with JavaScript

Пример Скачать

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

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

Загрузка библиотеки анимации для JavaScript

Вы можете скачать библиотеку анимации по следующей ссылке: anime.js на Github. Чтобы использовать библиотеку, просто добавьте следующую ссылку:

<скрипт src="anime.min.js"></скрипт>

Или для сжатой версии:

<скрипт src="anime.js"></скрипт>

Для версии разработки; если вы хотите увидеть больше примеров или ознакомиться с официальной документацией, вы можете перейти по следующей ссылке: anime.js.

Создание примера анимации

Существует множество примеров, которые вы можете найти по следующей ссылке: эксперименты с anime.js. Но для начала, чтобы увидеть универсальность этой библиотеки, мы поработаем с модифицированной версией следующего эксперимента: стресс-тест с anime.js. Он довольно прост, но конечные результаты, которые мы увидим ниже, весьма впечатляют.

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

Анимированный эксперимент CSS

Определите CSS-код для контейнера, который будет содержать (с некоторым запасом) каждую из таблиц, которые мы определим ранее. Для этого будет создан блок со следующими размерами:

раздел {
 ширина: 400 пикселей;
 высота: 400 пикселей;
}

И каждый из цветных квадратов, которые будут находиться в пределах указанного выше раздела:

div {
 display: встроенный блок;
 width: 20px;
 height: 20px;
}

Генерация HTML с помощью JavaScript

Теперь нам нужно создать максимальное количество блоков в разделе. Выполнив простую математическую операцию, мы понимаем, что:

(400*400)/(20*20) = 400

We need about 400 squares/div to completely fill our section, which we obviously won't do by hand unless you're really bored; to do this we use the following JavaScript:

var maxElements = 400;
var colors = ['#FF324A', '#31FFA6', '#206EFF', '#FFFF99'];

var createElements = (function() {
  var sectionEl = document.createElement('section');
  for (var i = 0; i < maxElements; i++) {
    var el = document.createElement('div');
    el.style.background = colors[anime.random(0, 3)];
    sectionEl.appendChild(el);
  }
  document.body.appendChild(sectionEl);
})();

Defining the animation with anime.js

Now came the time for magic; we are going to use the anime.js library to create an animation that is composed of the following code:

anime({
  targets: 'div',
  translateX: function() { return anime.random(-6, 6) + 'rem'; },
  translateY: function() { return anime.random(-6, 6) + 'rem'; },
  scale: function() { return anime.random(10, 20) / 10; },
  rotate: function() { return anime.random(-360, 360); },
  delay: function() { return 400 + anime.random(0, 500); },
  duration: function() { return anime.random(1000, 2000); },
  direction: 'alternate',
  loop: true
});

As we can see, we define a series of parameters made up of random or random numbers in a range that we can customize as we want; We define the translation in each of the 2D axes with translateX and translateY as well as the scaling with scale, the delay of the animation delay, rotate rotate, duration duration and we indicate that the animation runs infinitely loop and a very important parameter that is the direction with the alternate value that allows you to rebuild the scene after the animation is finished (sort of like performing the animation but in reverse when it comes to an end).

With this we get:

Example Download