EndDelay

Параметр endDelay определяет задержку перед завершением анимации после того, как она дошла до своей конечной точки. Его значение задаётся в миллисекундах и позволяет контролировать паузу между последним кадром анимации и фактическим завершением таймлайна. Это особенно полезно для создания визуально выразительных эффектов, когда требуется подчеркнуть финальную позицию элемента или синхронизировать анимацию с другими событиями на странице.

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

В этом примере .box перемещается на 300 пикселей за 1000 мс, после чего происходит задержка в 500 мс перед завершением анимации.

Отличие от delay и loop

  • delay – задержка перед запуском анимации.
  • endDelay – задержка после завершения анимации, перед тем как анимация будет считаться оконченной.
  • При использовании loop endDelay применяется в конце каждого цикла анимации.
anime({
  targets: '.circle',
  scale: 2,
  duration: 800,
  loop: 3,
  endDelay: 300
});

В этом случае каждый из трёх циклов масштабирования будет завершаться паузой в 300 мс. Это позволяет создавать ощущение «отдыхов» между повторениями анимации, не влияя на её плавность.

Совместное использование с direction

Параметр direction управляет направлением анимации (normal, reverse, alternate). При direction: 'alternate' endDelay срабатывает после того, как анимация дошла до последнего кадра в текущем цикле, вне зависимости от направления движения.

anime({
  targets: '.line',
  translateY: 150,
  duration: 600,
  direction: 'alternate',
  loop: true,
  endDelay: 200
});

Здесь линия перемещается вверх и вниз, а после каждой завершённой фазы добавляется 200 мс задержки перед повторением следующего цикла.

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

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

let tl = anime.timeline({
  targets: '.dot',
  easing: 'easeInOutSine',
});

tl.add({
  translateX: 100,
  duration: 500,
  endDelay: 200
})
  .add({
    translateY: 50,
    duration: 400,
    endDelay: 100
  });

Каждая отдельная анимация в таймлайне получает собственный endDelay, что позволяет точно регулировать ритм всей последовательности.

Влияние на события

endDelay напрямую влияет на срабатывание событий complete. Если задан endDelay, событие complete вызывается только после того, как задержка закончена.

anime({
  targets: '.square',
  rotate: 90,
  duration: 700,
  endDelay: 300,
  complete: () => console.log('Анимация завершена')
});

В консоли сообщение появится через 1000 мс: 700 мс – сама анимация + 300 мс – endDelay.

Комбинация с autoplay и loop

При autoplay: false анимация с endDelay будет учитывать задержку только после запуска через метод .play(). В случае loop: true endDelay повторяется на каждом цикле.

let anim = anime({
  targets: '.triangle',
  scale: 1.5,
  duration: 500,
  loop: 2,
  endDelay: 400,
  autoplay: false
});

anim.play();

Анимация будет масштабироваться дважды, с паузой 400 мс после каждого цикла.

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

  1. Синхронизация с другими эффектами: endDelay позволяет вставлять паузы для появления текстов, всплывающих окон или звуковых эффектов.
  2. Плавность визуального восприятия: небольшие значения (50–200 мс) создают естественные «остановки» без прерывания динамики анимации.
  3. Комбинирование с timeline: добавление endDelay к ключевым этапам делает последовательность более выразительной.
  4. Тестирование на разных браузерах: иногда визуальная задержка может восприниматься иначе, особенно на мобильных устройствах с разной частотой кадров.

endDelay является простым, но мощным инструментом управления темпом анимации в anime.js, позволяя создавать более «живые» и выразительные интерфейсы.

Оглавление