Распределение задержек

Библиотека anime.js предоставляет мощные средства для анимации свойств элементов в JavaScript. Одной из ключевых возможностей является управление задержками анимации для отдельных объектов или групп элементов. Задержка (delay) определяет время, которое проходит перед началом анимации конкретного свойства, и может быть задана как фиксированное значение, так и вычисляться динамически для каждого элемента коллекции.

Задержка как фиксированное значение

Самый простой способ задать задержку — использовать числовое значение в миллисекундах:

anime({
  targets: '.box',
  translateX: 250,
  delay: 500, // задержка 500 мс перед началом анимации
  duration: 1000
});

В этом примере анимация всех элементов с классом .box начнется через 500 мс после вызова функции. Все элементы начинают движение одновременно после одинаковой задержки.

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

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

anime({
  targets: '.box',
  translateX: 250,
  delay: function(el, i, l) {
    return i * 100; // i — индекс элемента, l — общая длина коллекции
  },
  duration: 1000
});

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

  • el — текущий элемент коллекции.
  • i — индекс элемента в NodeList или массиве.
  • l — общее количество элементов.

Использование распределения stagger

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

anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100), // каждый следующий элемент задерживается на 100 мс
  duration: 1000
});

anime.stagger() поддерживает несколько параметров:

  • step — величина смещения задержки между элементами (по умолчанию 0).
  • start — начальная задержка для первого элемента.
  • direction — порядок анимации: 'normal', 'reverse', 'alternate'.
  • grid — используется для двухмерных сеток, задается как [rows, columns].

Пример с сеткой:

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

В этом случае элементы будут анимироваться начиная с центра сетки, создавая эффект волны.

Сложные схемы распределения задержек

Функция stagger также поддерживает кастомные функции, что позволяет создавать уникальные схемы:

anime({
  targets: '.box',
  translateY: 50,
  delay: anime.stagger(50, {
    from: 'last',
    easing: 'easeInOutQuad'
  }),
  duration: 500
});
  • from может быть 'first', 'last', 'center' или индекс элемента.
  • easing — функция интерполяции задержки, что позволяет создавать нелинейные последовательности (ускорение или замедление по мере появления элементов).

Динамическая задержка с учётом свойств элемента

Для более сложной анимации задержку можно вычислять на основе атрибутов или размеров элементов:

anime({
  targets: '.box',
  translateX: 250,
  delay: function(el, i) {
    return el.offsetHeight * 2; // чем выше элемент, тем дольше задержка
  },
  duration: 1000
});

Такой подход полезен для создания адаптивных эффектов, где порядок и время анимации зависят от реальных характеристик DOM-элементов.

Использование нескольких анимаций с разными задержками

При работе с несколькими свойствами одного элемента можно задавать задержки индивидуально:

anime({
  targets: '.box',
  translateX: { value: 250, delay: 0 },
  rotate: { value: 360, delay: 500 },
  scale: { value: 1.5, delay: 250 },
  duration: 1000
});

Здесь translateX начнёт сразу, scale — через 250 мс, а rotate — через 500 мс. Такая детализация позволяет создавать сложные композиции движения.

Сочетание stagger с timeline

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

let tl = anime.timeline();

tl.add({
  targets: '.box',
  translateX: 100,
  delay: anime.stagger(100)
})
.add({
  targets: '.box',
  rotate: 180,
  delay: anime.stagger(50),
  offset: '+=200'
});
  • offset позволяет смещать начало блока анимаций относительно предыдущего.
  • Сочетание timeline и stagger позволяет создавать сложные цепочки движения элементов с управлением задержками на каждом шаге.
Оглавление