Функции распределения для stagger

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

Синтаксис функции stagger:

anime({
  targets: '.item',
  translateX: 250,
  delay: anime.stagger(100)
});

В этом примере каждый элемент с классом .item будет смещён по оси X с задержкой 100 миллисекунд относительно предыдущего.

Параметры stagger

Функция stagger принимает несколько параметров, позволяющих гибко настраивать распределение анимаций:

  1. amount – общее смещение задержки для всех элементов.

    delay: anime.stagger(500, {start: 200})

    Здесь общее время распределяется на все элементы, начиная с задержки 200 мс.

  2. start – начальная задержка для первого элемента. Значение по умолчанию – 0.

  3. direction – направление распределения: "normal" (по порядку), "reverse" (в обратном порядке) или "alternate" (чередование).

    anime({
  targets: '.item',
  translateY: 50,
  delay: anime.stagger(100, {direction: 'reverse'})
});

    Последний элемент анимируется первым, а первый – последним.

  4. grid – позволяет создавать двухмерные распределения для сеток элементов.

    anime({
  targets: '.grid-item',
  translateX: 50,
  delay: anime.stagger(100, {grid: [3, 3], from: 'center'})
});

    Здесь grid: [3, 3] означает 3 столбца и 3 строки, а from: 'center' задаёт начало распределения от центра сетки.

  5. from – начальная точка распределения для сеток и списков: "first", "last", "center", или индекс элемента.

Использование функций внутри stagger

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

anime({
  targets: '.item',
  opacity: 1,
  delay: anime.stagger((i, total) => i * 50 + total * 10)
});

В этом примере задержка каждого элемента рассчитывается динамически: сначала умножаем индекс на 50, затем добавляем 10 мс за каждый элемент в списке.

Комбинация с другими свойствами

stagger хорошо сочетается с другими анимируемыми свойствами: translateX, translateY, scale, rotate, opacity. Можно создавать сложные эффекты, комбинируя смещение, масштаб и вращение:

anime({
  targets: '.box',
  translateX: anime.stagger(50),
  scale: anime.stagger([0.5, 1.5], {grid: [5, 5], from: 'center'}),
  rotate: anime.stagger([0, 360], {direction: 'reverse'})
});

В этом примере каждый элемент сетки получает индивидуальный масштаб и вращение, создавая эффект «волны» с центра.

Примеры практических распределений

  1. Появление текста посимвольно:
anime({
  targets: '.letter',
  translateY: [50, 0],
  opacity: [0, 1],
  delay: anime.stagger(100)
});

Каждая буква поднимается и становится видимой с интервалом 100 мс.

  1. Чередование направлений:
anime({
  targets: '.icon',
  translateY: [0, -20],
  direction: 'alternate',
  delay: anime.stagger(80, {direction: 'alternate'})
});

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

  1. Сетка с распределением по центру:
anime({
  targets: '.grid-item',
  scale: [0, 1],
  delay: anime.stagger(100, {grid: [4, 4], from: 'center'})
});

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

Важные моменты

  • stagger не изменяет саму анимацию элементов, только её временную последовательность.
  • Для сеток и сложных распределений важно корректно задать размеры grid и точку from, иначе визуальный эффект будет хаотичным.
  • Можно комбинировать числовые значения и функции, создавая динамически изменяемые задержки.

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

Оглавление