Продолжительность и задержка

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

Продолжительность (duration)

Параметр duration определяет, сколько времени (в миллисекундах) длится анимация от начала до завершения.

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000
});

В данном примере анимация перемещения элемента .box длится 1000 миллисекунд (1 секунда).

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

  • Значение указывается в миллисекундах
  • По умолчанию: 1000
  • Применяется ко всей анимации, если не задано индивидуально для свойств

Индивидуальная продолжительность для свойств

anime.js позволяет задавать разную продолжительность для разных свойств:

anime({
  targets: '.box',
  translateX: {
    value: 250,
    duration: 800
  },
  rotate: {
    value: '1turn',
    duration: 1500
  }
});

В этом случае:

  • Перемещение завершится быстрее
  • Вращение продолжится дольше

Это позволяет создавать более сложные и выразительные анимации.

Функциональная продолжительность

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

anime({
  targets: '.box',
  translateX: 250,
  duration: function(el, i) {
    return 500 + i * 200;
  }
});

Параметры функции:

  • el — текущий элемент
  • i — индекс элемента

Результат: каждый следующий элемент анимируется дольше предыдущего.

Задержка (delay)

Параметр delay задаёт паузу перед началом анимации.

anime({
  targets: '.box',
  translateX: 250,
  delay: 500
});

Анимация начнётся через 500 миллисекунд после запуска.

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

  • Значение также указывается в миллисекундах
  • По умолчанию: 0

Индивидуальная задержка

Аналогично duration, задержку можно задать для конкретных свойств:

anime({
  targets: '.box',
  translateX: {
    value: 250,
    delay: 300
  },
  opacity: {
    value: 0,
    delay: 600
  }
});

Функциональная задержка

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

anime({
  targets: '.box',
  translateX: 250,
  delay: function(el, i) {
    return i * 100;
  }
});

Каждый следующий элемент начинает анимацию с задержкой на 100 мс больше предыдущего.

Встроенные утилиты задержки

anime.js предоставляет удобную функцию anime.stagger для создания последовательных задержек:

anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100)
});

Результат аналогичен предыдущему примеру, но запись компактнее.

Дополнительные возможности stagger:

anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100, {
    start: 500
  })
});
  • start — начальная задержка перед первым элементом

Комбинирование delay и duration

Одновременное использование задержки и продолжительности позволяет точно управлять временной шкалой:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  delay: 500
});

Хронология:

  • 0–500 мс: ожидание
  • 500–1500 мс: выполнение анимации

Перекрывающиеся анимации

Если у разных свойств разные значения delay и duration, они могут перекрываться:

anime({
  targets: '.box',
  translateX: {
    value: 250,
    duration: 1000,
    delay: 0
  },
  rotate: {
    value: '1turn',
    duration: 1000,
    delay: 500
  }
});
  • Перемещение начинается сразу
  • Вращение начинается позже и частично накладывается

Отрицательная задержка

anime.js поддерживает отрицательные значения delay, что позволяет “пропустить” начальную часть анимации:

anime({
  targets: '.box',
  translateX: 250,
  delay: -500
});

Анимация начнётся сразу, но как будто уже прошла половина времени.

Глобальная временная логика

При работе с несколькими анимациями важно учитывать:

  • delay влияет только на старт
  • duration — на длительность выполнения
  • итоговая длина анимации = delay + duration

Использование в таймлайнах

В timeline управление временем становится ещё гибче:

let tl = anime.timeline();

tl.add({
  targets: '.box',
  translateX: 250,
  duration: 1000
}).add({
  targets: '.box',
  rotate: '1turn',
  duration: 1000
}, 500);

Второй аргумент (500) — смещение относительно начала таймлайна:

  • анимация вращения начнётся через 500 мс
  • произойдёт наложение

Синхронизация анимаций

Для синхронизации нескольких элементов часто используется комбинация:

  • одинакового duration
  • прогрессивного delay
anime({
  targets: '.box',
  scale: [0, 1],
  duration: 600,
  delay: anime.stagger(150)
});

Эффект: элементы “появляются” один за другим.

Практические рекомендации

1. Короткие анимации (100–300 мс) Используются для мгновенных откликов интерфейса.

2. Средние (300–800 мс) Подходят для переходов и взаимодействий.

3. Длинные (800+ мс) Применяются для декоративных или демонстрационных эффектов.

4. Задержки стоит использовать умеренно Слишком большие задержки ухудшают восприятие интерфейса.

5. Каскадные задержки усиливают визуальную иерархию Позволяют направлять внимание пользователя.

Частые ошибки

Слишком большая длительность

duration: 5000

Анимация становится затянутой и утомительной.

Отсутствие задержки в группе элементов

delay: 0

Все элементы двигаются одновременно — теряется выразительность.

Несогласованные значения

duration: 1000,
delay: 2000

Долгое ожидание перед коротким действием может выглядеть нелогично.

Итоговое понимание

Параметры duration и delay формируют временную структуру анимации. Их грамотное сочетание позволяет:

  • управлять ритмом интерфейса
  • создавать сложные последовательности
  • добиваться плавности и естественности движения

Точное управление временем — основа качественной анимации в anime.js.

Оглавление