Анимация массивов

Anime.js предоставляет мощный и гибкий механизм для анимации массивов объектов, позволяя изменять свойства каждого элемента массива синхронно или с индивидуальными задержками. Работа с массивами начинается с передачи в параметр targets не одного элемента, а коллекции объектов. Это могут быть как DOM-элементы, так и обычные JavaScript-объекты.

const elements = document.querySelectorAll('.box');

anime({
  targets: elements,
  translateX: 250,
  duration: 1000
});

В этом примере все элементы с классом .box сдвигаются на 250 пикселей по оси X за 1 секунду. Anime.js автоматически обрабатывает NodeList, массивы и отдельные объекты, что делает работу с коллекциями очень удобной.

Индивидуальные значения для каждого элемента

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

anime({
  targets: elements,
  translateX: (el, i) => i * 50,
  duration: 1000
});

Здесь первый элемент сдвинется на 0 пикселей, второй — на 50, третий — на 100 и так далее. Такая гибкость позволяет создавать каскадные и последовательные эффекты без необходимости вручную назначать каждому элементу отдельную анимацию.

Задержка между анимациями элементов

Параметр delay можно использовать для создания эффекта последовательного появления:

anime({
  targets: elements,
  translateY: 100,
  delay: anime.stagger(200), // задержка 200ms между элементами
  duration: 800
});

Метод anime.stagger() принимает не только числовое значение задержки, но и объекты с настройками, позволяя задавать направление анимации, начальную задержку и шаг:

anime({
  targets: elements,
  translateY: 100,
  delay: anime.stagger(100, {start: 500, from: 'center'}),
  duration: 800
});
  • start — начальная задержка всей последовательности
  • from — начальная точка, может быть 'first', 'last' или 'center'

Анимация свойств объектов внутри массива

Anime.js поддерживает массивы объектов с числовыми свойствами, а не только DOM-элементы. Это позволяет анимировать данные без привязки к визуальным элементам:

const points = [
  {x: 0, y: 0},
  {x: 50, y: 50},
  {x: 100, y: 100}
];

anime({
  targets: points,
  x: el => el.x + 200,
  y: el => el.y + 100,
  duration: 1000,
  easing: 'easeInOutQuad',
  update: function() {
    console.log(points);
  }
});

С помощью колбэка update можно отслеживать изменение значений и обновлять графику на canvas или другие визуальные компоненты.

Сложные последовательности для массивов

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

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 500
});

tl.add({
  targets: elements,
  translateX: 250,
  delay: anime.stagger(100)
})
.add({
  targets: elements,
  rotate: 360,
  delay: anime.stagger(100, {from: 'last'})
});

В этом примере каждый элемент сначала сдвигается, а затем вращается, при этом можно контролировать направление и последовательность анимации через stagger.

Использование функций для динамических значений

Любое свойство может быть функцией, зависящей от индекса или текущего значения элемента:

anime({
  targets: elements,
  scale: el => 1 + 0.1 * (elements.length - [...elements].indexOf(el)),
  translateX: el => Math.random() * 200,
  duration: 1000
});

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

Комбинирование нескольких эффектов

Anime.js позволяет объединять изменения разных свойств для массивов в одной анимации:

anime({
  targets: elements,
  translateX: anime.stagger(50),
  scale: [
    {value: 1.5, duration: 300, easing: 'easeOutQuad'},
    {value: 1, duration: 300, easing: 'easeInQuad'}
  ],
  rotate: '1turn',
  delay: anime.stagger(100)
});
  • Массивы в scale позволяют задать последовательные анимации одного свойства
  • rotate: '1turn' делает полный оборот для каждого элемента
  • stagger создаёт эффект «волны» по всем элементам

Anime.js обеспечивает максимальную гибкость при работе с массивами, позволяя одновременно анимировать DOM-элементы и обычные объекты, задавать индивидуальные свойства, использовать задержки, вычисляемые значения и сложные последовательности через timeline. Это делает библиотеку идеальным инструментом для создания как простых, так и сложных визуальных эффектов с множеством элементов.

Оглавление