Stagger для других параметров

Механизм stagger в библиотеке mo.js используется для создания последовательных или распределённых анимаций группы элементов. В отличие от базового применения, где чаще всего варьируется только задержка (delay), stagger позволяет управлять практически любыми параметрами — от масштаба и цвета до траекторий движения и прозрачности.

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

Общая идея stagger

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

Пример концепции:

mojs.stagger(начало, конец, { опции })

или

mojs.stagger([значение1, значение2, значение3])

Каждый элемент получает своё значение в зависимости от индекса.

Stagger для масштаба (scale)

Анимация масштаба часто используется для создания эффекта “всплеска” или “волны”.

const burst = new mojs.Burst({
  count: 5,
  scale: { 0: 1 },
  children: {
    scale: mojs.stagger([0.5, 1.5])
  }
});

Особенности:

  • каждый дочерний элемент получает своё значение масштаба
  • создаётся ощущение глубины
  • легко реализуется эффект случайности

Stagger для прозрачности (opacity)

Позволяет создавать плавные исчезающие или появляющиеся цепочки элементов.

children: {
  opacity: mojs.stagger([0, 1])
}

Вариант с диапазоном:

children: {
  opacity: mojs.stagger(0.2, 1)
}

Применение:

  • постепенное появление частиц
  • эффект “затухания” в конце анимации
  • имитация рассеивания

Stagger для угла (angle)

Используется для управления направлением движения элементов.

const burst = new mojs.Burst({
  count: 6,
  angle: 0,
  children: {
    angle: mojs.stagger(0, 360)
  }
});

Результат:

  • элементы распределяются по кругу
  • каждый элемент движется под своим углом
  • формируются радиальные структуры

Stagger для радиуса (radius)

Позволяет задавать разную длину движения для элементов.

children: {
  radius: mojs.stagger(20, 100)
}

Эффекты:

  • “взрыв” с неоднородной силой
  • имитация физического разброса
  • динамика глубины сцены

Stagger для цвета (fill / stroke)

Позволяет создавать градиентные или разноцветные анимации.

children: {
  fill: mojs.stagger(['red', 'blue', 'green', 'yellow'])
}

С диапазоном:

children: {
  fill: mojs.stagger(['#ff0000', '#0000ff'])
}

Особенности:

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

Stagger для поворота (rotate)

Добавляет вариативность вращения элементов.

children: {
  rotate: mojs.stagger(0, 360)
}

Результат:

  • каждый элемент вращается под разным углом
  • создаётся хаотичное или контролируемое движение

Stagger для формы (shape)

Можно комбинировать разные формы в одной анимации.

children: {
  shape: mojs.stagger(['circle', 'rect', 'polygon'])
}

Эффекты:

  • разнообразие визуальных элементов
  • сложные композиции
  • повышение выразительности анимации

Использование easing внутри stagger

stagger поддерживает параметры сглаживания.

children: {
  scale: mojs.stagger(0.5, 1.5, {
    easing: 'cubic.out'
  })
}

Это позволяет:

  • контролировать распределение значений
  • создавать нелинейные эффекты
  • усиливать визуальную динамику

Параметр step

Позволяет задавать фиксированный шаг между значениями.

children: {
  radius: mojs.stagger(10, 100, {
    step: 15
  })
}

Особенности:

  • значения увеличиваются с заданным интервалом
  • удобно для точного контроля

Параметр start

Определяет начальное значение смещения.

children: {
  rotate: mojs.stagger(0, 360, {
    start: 45
  })
}

Результат:

  • вся последовательность сдвигается
  • изменяется начальная точка распределения

Параметр reverse

Меняет порядок значений.

children: {
  scale: mojs.stagger(0.5, 1.5, {
    reverse: true
  })
}

Используется для:

  • зеркальных анимаций
  • инверсии эффектов

Параметр random

Добавляет случайность.

children: {
  radius: mojs.stagger(20, 100, {
    random: true
  })
}

Особенности:

  • каждый запуск анимации уникален
  • создаётся ощущение естественности

Комбинирование нескольких stagger

Можно применять stagger одновременно к нескольким параметрам:

children: {
  radius: mojs.stagger(20, 100),
  scale: mojs.stagger(0.5, 1.5),
  rotate: mojs.stagger(0, 360),
  fill: mojs.stagger(['red', 'blue', 'green'])
}

Результат:

  • сложные многомерные анимации
  • высокая вариативность поведения элементов
  • минимальный код при максимальной выразительности

Применение в Timeline

stagger особенно эффективен в сочетании с Timeline:

const timeline = new mojs.Timeline();

timeline.add(
  new mojs.Burst({
    children: {
      delay: mojs.stagger(0, 300),
      scale: mojs.stagger(0.5, 1.2)
    }
  })
);

Позволяет:

  • синхронизировать анимации
  • управлять последовательностью
  • создавать сложные сценарии

Производительность и оптимизация

При использовании stagger с большим количеством элементов важно учитывать:

  • количество элементов (count)
  • сложность параметров
  • использование случайности (random)

Рекомендации:

  • избегать чрезмерно больших диапазонов
  • использовать easing вместо случайности, если возможно
  • комбинировать параметры осознанно

Практические паттерны

Эффект волны

scale: mojs.stagger(0.8, 1.2)

Эффект взрыва

radius: mojs.stagger(30, 150),
angle: mojs.stagger(0, 360)

Градиентная анимация

fill: mojs.stagger(['#ff0000', '#00ffcc'])

Хаотичное движение

radius: mojs.stagger(20, 100, { random: true }),
rotate: mojs.stagger(0, 360, { random: true })

Расширенные возможности

stagger можно комбинировать с функциями:

children: {
  radius: mojs.stagger(20, 100, {
    easing: (p) => Math.sin(p * Math.PI)
  })
}

Это позволяет:

  • создавать кастомные распределения
  • реализовывать нестандартные эффекты
  • точно контролировать поведение анимации

Внутренний механизм работы

stagger возвращает функцию, которая:

  1. Получает индекс элемента
  2. Вычисляет позицию в диапазоне
  3. Применяет easing
  4. Возвращает итоговое значение

Это делает его универсальным инструментом для генерации параметров.

Типичные ошибки

  • Использование stagger вне children
  • Несовместимые типы значений (например, числа и строки)
  • Чрезмерное количество параметров с random
  • Игнорирование easing

Архитектурная роль stagger

stagger — это не просто утилита, а фундаментальный инструмент:

  • заменяет циклы
  • уменьшает количество кода
  • повышает декларативность
  • упрощает масштабирование анимаций

За счёт этого mo.js остаётся лаконичным, но мощным инструментом для создания сложных визуальных эффектов.

Оглавление