Работа с множественными элементами

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

Выбор элементов

Для анимации группы элементов используется селектор CSS или массив DOM-элементов. Пример с использованием селектора:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad'
});

Здесь .box выбирает все элементы с классом box. Анимация применяется ко всем выбранным элементам одновременно.

Также можно использовать массив элементов:

const boxes = document.querySelectorAll('.box');
anime({
  targets: boxes,
  scale: 1.5,
  duration: 800
});

В этом случае targets принимает NodeList или массив элементов, что дает точный контроль над набором объектов.

Последовательная анимация (stagger)

Для создания эффекта последовательной анимации используется функция stagger. Она позволяет задавать задержку между стартами анимаций разных элементов. Например:

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

Можно комбинировать с направлением анимации:

anime({
  targets: '.box',
  translateX: anime.stagger(50, {start: 0, direction: 'reverse'}),
  duration: 600
});

direction: 'reverse' запускает анимацию с последнего элемента к первому.

Анимация свойств с индивидуальными значениями

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

anime({
  targets: '.box',
  translateX: function(el, i) {
    return i * 50; // каждый элемент сдвигается на 50px больше предыдущего
  },
  duration: 800
});

Аргументы функции: el — текущий элемент, i — его индекс в выборке.

Комбинирование stagger с timeline

Для более сложных сценариев используется anime.timeline, который позволяет объединять множественные анимации в последовательность:

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

tl.add({
  targets: '.box',
  translateX: anime.stagger(100),
  opacity: [0, 1]
})
.add({
  targets: '.circle',
  scale: [0, 1],
  delay: anime.stagger(100, {start: 500})
});

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

Управление атрибутами SVG

Для множественных элементов SVG можно анимировать атрибуты, такие как strokeDashoffset, stroke, fill:

anime({
  targets: 'circle',
  strokeDashoffset: [anime.setDashoffset, 0],
  delay: anime.stagger(200),
  duration: 1200,
  easing: 'easeInOutSine'
});

Использование anime.setDashoffset позволяет динамически рассчитывать длину пути для каждого элемента.

События при анимации множества элементов

Anime.js поддерживает коллбэки для каждой группы:

  • begin — вызывается в начале всей анимации.
  • complete — в конце всей анимации.
  • update — на каждом кадре.
  • change — при изменении конкретного свойства.
  • loopBegin, loopComplete — при цикличной анимации.

Для множественных элементов коллбэки можно комбинировать с индексами элементов:

anime({
  targets: '.box',
  translateY: 150,
  delay: anime.stagger(100),
  complete: function(anim) {
    console.log('Анимация завершена для всех элементов');
  }
});

Создание динамических эффектов

Используя stagger и функции для параметров, можно создавать сложные визуальные эффекты, такие как волны, цепные реакции и радиальные анимации. Пример радиального распределения:

const boxes = document.querySelectorAll('.box');
const radius = 100;

boxes.forEach((el, i) => {
  const angle = (i / boxes.length) * 2 * Math.PI;
  anime({
    targets: el,
    translateX: Math.cos(angle) * radius,
    translateY: Math.sin(angle) * radius,
    duration: 1000,
    easing: 'easeInOutQuad'
  });
});

Каждый элемент перемещается по круговой траектории, создавая эффект равномерного распределения.

Параллельные и перекрывающиеся анимации

Anime.js позволяет одновременно анимировать несколько свойств и элементов без использования timeline, используя разные параметры duration, delay и easing:

anime({
  targets: '.box',
  translateX: [0, 200],
  rotate: [0, 360],
  scale: [1, 1.5],
  delay: anime.stagger(100),
  duration: 1000,
  easing: 'easeInOutCubic'
});

Это обеспечивает создание насыщенных динамических эффектов без потери синхронности.

Оглавление