Tick для ручного обновления

В библиотеке anime.js управление анимацией осуществляется через внутренний цикл рендеринга, который автоматически обновляет свойства объектов на каждом кадре. Однако иногда требуется полностью контролировать момент обновления анимации — например, при интеграции с нестандартным рендерингом, игровыми циклами или при оптимизации производительности. Для таких случаев используется функция tick, позволяющая вручную прогонять анимацию.

Основы работы с tick

Каждая анимация в anime.js создаётся через вызов anime(), который возвращает объект анимации. Этот объект содержит метод tick(elapsed), где elapsed — количество миллисекунд, прошедших с начала анимации.

let animation = anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  autoplay: false
});

// Прогон анимации на 500 мс
animation.tick(500);

Ключевые моменты:

  • autoplay: false обязателен для ручного обновления, иначе анимация будет запускаться автоматически.
  • Метод tick позволяет обновить состояние анимации на конкретный момент времени.
  • Вызов tick не запускает внутренний requestAnimationFrame, он только пересчитывает свойства и применяет их к элементам.

Контроль времени

Метод tick использует относительное время от начала анимации. Это значит, что можно прокручивать анимацию как вперед, так и назад:

animation.tick(200); // Промотка к 200 мс
animation.tick(800); // Промотка к 800 мс

Если передать значение больше duration, анимация достигнет конечного состояния:

animation.tick(1500); // Элемент будет на конечной позиции

Пример интеграции с игровым циклом

В игровых движках часто используется цикл update с фиксированным шагом. С помощью tick можно синхронизировать анимацию anime.js с этим циклом:

let animation = anime({
  targets: '.sprite',
  translateY: 300,
  duration: 2000,
  easing: 'linear',
  autoplay: false
});

let startTime = performance.now();

function gameLoop() {
  let now = performance.now();
  let elapsed = now - startTime;

  animation.tick(elapsed);

  requestAnimationFrame(gameLoop);
}

gameLoop();

Особенности такого подхода:

  • Анимация полностью подчинена игровому циклу.
  • Можно легко изменять скорость, масштаб времени или приостанавливать анимацию.
  • Нет зависимости от внутреннего таймера anime.js.

Использование tick с прогрессивными эффектами

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

let animation = anime({
  targets: '.circle',
  scale: [1, 2],
  duration: 1000,
  autoplay: false
});

animation.tick(400);

console.log(animation.animatables[0].target.style.transform); 
// Выводит текущее значение transform после 400 мс
  • Объект animatables содержит массив всех элементов, участвующих в анимации.
  • Состояние после tick можно использовать для кастомных вычислений, синхронизации с другими эффектами или логикой игры.

Особенности комбинации tick и timeline

anime.timeline также поддерживает ручное обновление через tick. При этом передаваемое значение времени учитывает все последовательные анимации внутри таймлайна:

let tl = anime.timeline({ autoplay: false });

tl
  .add({
    targets: '.box1',
    translateX: 200,
    duration: 1000
  })
  .add({
    targets: '.box2',
    translateY: 200,
    duration: 1000
  });

tl.tick(1500); // Перемещает box1 полностью и частично box2
  • Ручное управление позволяет точно позиционировать все элементы таймлайна.
  • Полезно для скролл-анимаций или прогресс-бара, где время не линейно.

Полезные советы по использованию tick

  1. Выключение autoplay — всегда устанавливать autoplay: false для ручного контроля.
  2. Синхронизация с внешними циклами — tick идеально подходит для интеграции с requestAnimationFrame, игровыми движками или таймлайнами видео.
  3. Доступ к текущему состоянию — после вызова tick можно напрямую работать с элементами через animatables.
  4. Обратная перемотка — tick можно вызывать с меньшим временем, чтобы анимация шла в обратную сторону.
  5. Комбинация с easing — easing функции учитываются корректно, поэтому можно плавно управлять промежуточными состояниями анимации.

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

Оглавление