Duration и delay

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

Duration

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000 // анимация длится 2 секунды
});
  • Если duration меньше, анимация будет происходить быстро.
  • Если duration больше, движение будет плавным и медленным.
  • По умолчанию, если duration не указан, anime.js использует стандартное значение 1000 мс.

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

  • duration может быть выражено в константе (число) или в функции, которая возвращает число для каждого элемента отдельно.
anime({
  targets: '.box',
  translateX: 250,
  duration: function(el, i) {
    return 1000 + i * 500; // разная длительность для каждого элемента
  }
});

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

Delay

Параметр delay управляет временем ожидания перед началом анимации. Он также измеряется в миллисекундах.

anime({
  targets: '.box',
  translateX: 250,
  delay: 500 // анимация начнётся через полсекунды
});
  • Можно использовать фиксированное число, чтобы задать одинаковую задержку для всех элементов.
  • Можно использовать функцию, чтобы вычислить индивидуальную задержку для каждого объекта.
anime({
  targets: '.box',
  translateX: 250,
  delay: function(el, i) {
    return i * 300; // последовательный запуск с интервалом 0.3 секунды
  }
});
  • Задержка может быть отрицательной, что позволяет начать анимацию раньше основного момента. Это полезно для создания эффекта «опережения» в сложных цепочках.

Совмещение duration и delay

Часто duration и delay используются вместе, чтобы формировать сложные временные схемы анимации. Например:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1500,
  delay: function(el, i) {
    return i * 200; // каждый следующий элемент начнёт анимацию позже
  }
});
  • В этом примере каждый элемент .box движется 1.5 секунды, но стартует с интервалом 200 мс.
  • Такое сочетание идеально подходит для каскадных анимаций, где последовательность появления элементов создаёт визуальный ритм.

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

  1. Множественные анимации с разной длительностью и задержкой:
anime({
  targets: '.circle',
  scale: [0, 1],
  duration: function(el, i) { return 500 + i * 300; },
  delay: function(el, i) { return i * 100; },
  easing: 'easeOutElastic(1, .8)'
});
  • Здесь каждый круг масштабируется с индивидуальной скоростью и задержкой.
  • Комбинация duration и delay позволяет добиться эффекта живого, «прыгающего» движения.
  1. Случайные значения для динамичных эффектов:
anime({
  targets: '.dot',
  translateY: function() { return anime.random(-100, 100); },
  duration: function() { return anime.random(500, 1500); },
  delay: function() { return anime.random(0, 500); }
});
  • Использование случайных значений добавляет непредсказуемость и естественность движения.

Ключевые рекомендации

  • Для плавных и естественных анимаций лучше использовать duration не слишком короткий (<300 мс редко смотрится хорошо).
  • Для каскадных эффектов всегда комбинировать delay с функцией, чтобы управлять порядком появления элементов.
  • Использование функции для duration и delay открывает возможности для индивидуальной анимации каждого объекта, создавая уникальный визуальный стиль.

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

Оглавление