Относительные значения времени

В библиотеке anime.js управление временем анимации реализуется через несколько ключевых свойств: duration, delay, endDelay, loop, direction и easing. Для создания более динамичных и сложных анимаций важно понимать, как использовать относительные значения времени, позволяющие задавать задержки и длительность анимации не только в абсолютных миллисекундах, но и относительно других свойств или текущего состояния анимации.

Абсолютные и относительные значения

По умолчанию значения duration и delay задаются в миллисекундах:

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

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

anime({
  targets: '.box',
  translateX: 250,
  duration: (el, i, total) => 500 + i * 200, // увеличение длительности для каждого элемента
  delay: (el, i, total) => i * 100 // смещение старта каждого элемента относительно предыдущего
});

Пояснение параметров функции:

  • el – DOM-элемент, к которому применяется анимация.
  • i – индекс элемента в коллекции targets.
  • total – общее количество элементов в targets.

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

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

Относительные задержки (delay) часто применяются для каскадного запуска анимаций:

anime({
  targets: '.item',
  translateY: 50,
  duration: 800,
  delay: anime.stagger(100) // каждый последующий элемент запускается с задержкой 100 мс
});

anime.stagger() – встроенная функция для задания равномерных и динамических промежутков между элементами. Она принимает следующие варианты конфигурации:

anime.stagger(value, options)

  • value – базовое смещение (в мс или px для трансформаций).

  • options:

    • start – начальная задержка для первого элемента.
    • from – индекс стартового элемента (first, last, center или число).
    • grid – при работе с сетками, задаёт количество колонок и рядов.
    • axis – направление расчета смещения (x или y).

Пример с сеткой и центрального элемента:

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

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

Относительные значения длительности

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

anime({
  targets: '.circle',
  scale: [0, 1],
  duration: (el, i) => 500 + i * 100,
  easing: 'easeOutElastic(1, .8)'
});

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

Использование += и -= для относительного времени

Для delay и duration поддерживаются относительные арифметические выражения:

anime({
  targets: '.box',
  translateX: 300,
  duration: '+=200', // добавляет 200 мс к базовой длительности
  delay: '-=100' // уменьшает стартовую задержку на 100 мс
});

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

Комбинирование временных относительных значений с timeline

Timeline позволяет объединять несколько анимаций с относительными значениями времени:

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

tl.add({
  targets: '.box1',
  translateX: 250
})
.add({
  targets: '.box2',
  translateX: 250,
  offset: '-=400' // стартует за 400 мс до окончания предыдущей анимации
})
.add({
  targets: '.box3',
  translateX: 250,
  offset: '+=200' // стартует через 200 мс после предыдущей анимации
});

offset принимает:

  • Абсолютные значения в миллисекундах (500)
  • Относительные выражения ('+=200', '-=100')
  • Ключевые слова 'first' или 'last' для синхронизации с первой или последней анимацией в timeline

Это особенно удобно для сложных сцен с множественными объектами и динамическими задержками.

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

  1. Использовать функции для duration и delay, если необходимо динамическое распределение времени между элементами.
  2. anime.stagger ускоряет создание каскадных и сеточных анимаций.
  3. Комбинировать timeline с относительными offset позволяет точно управлять синхронизацией анимаций.
  4. Абсолютные и относительные значения можно смешивать, но относительные (+=, -=) лучше использовать для корректировок или постепенного наращивания эффекта.
  5. Для генерации непредсказуемого поведения можно использовать случайные значения в функциях:
delay: () => Math.random() * 500

Это создаёт ощущение хаотичной, живой анимации.

Итоговое использование

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

Оглавление