Seek для перемотки

В anime.js метод seek используется для точного управления текущей позицией анимации. В отличие от методов play, pause или restart, seek позволяет мгновенно установить анимацию в любое конкретное состояние по времени, что делает его незаменимым для реализации интерфейсов с перемоткой, прогресс-барами или динамическими временными эффектами.

Синтаксис

animeInstance.seek(time);
  • animeInstance – экземпляр анимации, создаваемый через anime().
  • time – число в миллисекундах, указывающее, на какой момент анимации нужно перейти.

Пример:

const boxAnimation = anime({
  targets: '.box',
  translateX: 500,
  duration: 2000,
  easing: 'linear'
});

// Перемотка анимации на 1 секунду
boxAnimation.seek(1000);

В этом примере элемент .box мгновенно перемещается в позицию, соответствующую половине пути анимации, так как общая длительность – 2000 мс, а seek(1000) устанавливает позицию ровно на середине.

Отличия seek от progress

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

// Использование progress
boxAnimation.progress = 50; // 50% анимации завершено

// Использование seek
boxAnimation.seek(1000); // эквивалентно 50% при длительности 2000 мс

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

Использование seek с обратными и повторяющимися анимациями

Если анимация имеет direction: 'alternate' или loop: true, seek корректно рассчитывает положение:

const loopAnimation = anime({
  targets: '.circle',
  translateY: 200,
  duration: 1000,
  direction: 'alternate',
  loop: true
});

// Перемотка на 1500 мс
loopAnimation.seek(1500);

В данном примере анимация сначала проходит первый цикл за 1000 мс, затем возвращается обратно. Вызов seek(1500) установит элемент на половину обратного пути второго цикла, что демонстрирует точную работу метода с повторениями.

Интеграция с пользовательскими интерфейсами

Метод seek особенно удобен для реализации:

  • Прогресс-баров Связка input[type="range"] с seek позволяет перемещать анимацию в зависимости от позиции ползунка:
const slider = document.querySelector('#progressSlider');

slider.addEventListener('input', () => {
  const time = (slider.value / 100) * boxAnimation.duration;
  boxAnimation.seek(time);
});
  • Перемотки при скролле Анимация может синхронизироваться с положением скролла страницы:
window.addEventListener('scroll', () => {
  const scrollFraction = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  boxAnimation.seek(scrollFraction * boxAnimation.duration);
});
  • Воспроизведение с точной остановкой Можно вручную управлять позицией анимации без необходимости запускать её полностью.

Советы по использованию seek

  1. Точность времени – seek принимает значения в миллисекундах. При необходимости использовать проценты, следует преобразовать:

    let targetTime = (percent / 100) * animeInstance.duration;
animeInstance.seek(targetTime);

  2. Совместимость с остановленной анимацией – seek можно использовать даже если анимация не запущена (paused).

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

  4. Сочетание с play и pause – после перемотки seek можно продолжить анимацию с новой позиции:

boxAnimation.seek(500);
boxAnimation.play(); // воспроизведение с 500 мс

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

Оглавление