Stagger-эффекты

Stagger-анимации позволяют создавать последовательное смещение в начале, длительности или задержке анимаций для множества элементов. В anime.js это реализуется с помощью функции anime.stagger(), которая генерирует массив значений на основе позиции элементов в наборе.

Пример базового использования:

anime({
  targets: '.box',
  translateX: anime.stagger(50, {start: 0}),
  duration: 1000,
  easing: 'easeInOutQuad'
});

Здесь каждый элемент с классом .box сдвигается по горизонтали на 50 пикселей больше предыдущего. Параметр start задает начальное смещение для первого элемента.

Параметры функции anime.stagger()

  1. amount — общее смещение между крайними элементами. Если указано, промежуточные элементы получают пропорциональные значения.

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

  3. grid — позволяет применять stagger к двумерным сеткам, например grid: [3, 3] для 3x3 элементов.

  4. from — задает начальную точку отсчёта для stagger:

    • 'first' — по умолчанию, от первого элемента
    • 'center' — от центрального элемента
    • 'last' — от последнего элемента
    • число — индекс элемента, от которого строится смещение

  5. direction — направление смещения: 'normal' или 'reverse'.

Пример с grid и центром:

anime({
  targets: '.grid-item',
  translateY: anime.stagger(20, {grid: [4,4], from: 'center'}),
  duration: 800,
  easing: 'easeOutElastic(1, .5)'
});

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

Задержки с помощью Stagger

Stagger часто применяется для создания каскадного эффекта появления элементов. Для этого используется свойство delay:

anime({
  targets: '.item',
  opacity: [0, 1],
  translateY: [50, 0],
  delay: anime.stagger(100),
  duration: 600,
  easing: 'easeOutCubic'
});

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

Комбинирование Stagger с другими свойствами

Stagger можно применять не только к translate или opacity, но и к цветам, масштабированию, вращению.

anime({
  targets: '.circle',
  scale: anime.stagger([0.5, 1.5], {grid: [5, 1], from: 'center'}),
  backgroundColor: anime.stagger(['#FF0000', '#0000FF'], {grid: [5,1], from: 2}),
  duration: 1200,
  easing: 'easeInOutSine'
});
  • Масштаб изменяется от 0.5 до 1.5, начиная с центра.
  • Цвет постепенно меняется от красного к синему с определённой позиции.

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

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

anime({
  targets: '.letter',
  translateX: anime.stagger(i => i * 20, {start: 0}),
  duration: 800,
  easing: 'easeOutQuad'
});
  • i — индекс элемента в наборе
  • Можно возвращать любое значение, вычисленное на основе позиции, случайного числа или других параметров.

Stagger в циклических и повторяющихся анимациях

Для циклических анимаций stagger можно комбинировать с loop или direction: 'alternate':

anime({
  targets: '.dot',
  translateY: anime.stagger([0, -30], {from: 'last'}),
  duration: 600,
  delay: anime.stagger(100),
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutSine'
});
  • Эффект волны: элементы двигаются вверх и вниз по очереди.
  • Задержка создаёт иллюзию движения волны от последнего элемента к первому.

Практические советы при работе со Stagger

  1. Сочетание с timeline: можно добавлять stagger-анимации в timeline, чтобы управлять сложными последовательностями.
  2. Grid и offset: для сложных сеток можно комбинировать grid и from с функцией, чтобы создавать эффекты радиальных волн.
  3. Производительность: большое количество элементов с большим stagger может нагрузить рендер. Использовать hardware-ускоряемые свойства (transform, opacity) предпочтительно.
  4. Случайные задержки: функция в anime.stagger() позволяет задавать случайные значения, создавая более живые эффекты.

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

Оглавление