Свойство currentTime

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

Основные возможности currentTime

  • Чтение текущего времени: свойство возвращает числовое значение в миллисекундах от начала анимации.
  • Установка времени анимации: присвоение значения свойству currentTime позволяет мгновенно переместить анимацию в указанную точку.
  • Применение к Timeline: currentTime работает не только с отдельными анимациями, но и с объектами anime.timeline, что позволяет управлять общей последовательностью.

Пример чтения текущего времени анимации:

let animation = anime({
  targets: '.box',
  translateX: 300,
  duration: 2000,
  easing: 'linear'
});

console.log(animation.currentTime); // Вернет 0 в момент старта

Пример установки текущего времени:

animation.currentTime = 1000; // Переносит анимацию на 1 секунду

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

Использование currentTime позволяет создавать точную синхронизацию между несколькими анимациями. Например, можно запустить несколько анимаций одновременно и контролировать их прогресс в одном месте, устанавливая одинаковое currentTime.

let anim1 = anime({ targets: '.circle', translateX: 200, duration: 3000 });
let anim2 = anime({ targets: '.square', translateY: 200, duration: 3000 });

anim2.currentTime = anim1.currentTime; // синхронизируем прогресс анимаций

Управление прогрессом вручную

В сочетании с методами pause() и play(), свойство currentTime позволяет реализовать ручное управление анимацией, включая прокрутку, перемотку и интерактивные эффекты на основе ввода пользователя.

Пример интерактивной прокрутки анимации:

let animation = anime({
  targets: '.line',
  width: '100%',
  duration: 5000,
  easing: 'linear',
  autoplay: false
});

// Перемотка слайдером
document.querySelector('#slider').addEventListener('input', e => {
  animation.currentTime = e.target.value;
});

В этом примере слайдер управляет текущей позицией анимации в реальном времени.

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

Когда currentTime применяется к timeline, оно возвращает или устанавливает глобальное время всей последовательности анимаций:

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

timeline
  .add({ targets: '.box', translateX: 250, duration: 1000 })
  .add({ targets: '.box', rotate: 180, duration: 1000 });

timeline.currentTime = 500; // Перемещает timeline на полпути первой анимации

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

Важные нюансы

  1. Единицы измерения – миллисекунды. Для удобства можно использовать дробные значения для точной настройки.
  2. Автоплей – установка currentTime при автозапуске анимации мгновенно перемещает текущий кадр, даже если анимация ещё не стартовала.
  3. Влияние loop – если анимация зациклена, значение currentTime учитывает полный прогресс, включая циклы. Например, при loop: 2 и duration: 1000, currentTime = 1500 соответствует середине второго цикла.
  4. Объекты Timeline – при использовании timeline необходимо учитывать, что currentTime влияет на все дочерние анимации в зависимости от их временного смещения (offset).

Практические примеры

Плавная перемотка анимации по скроллу страницы:

let animation = anime({
  targets: '.scroll-box',
  translateX: 500,
  duration: 3000,
  easing: 'linear',
  autoplay: false
});

window.addEventListener('scroll', () => {
  let scrollFraction = window.scrollY / (document.body.scrollHeight - window.innerHeight);
  animation.currentTime = scrollFraction * animation.duration;
});

Реализация перемотки с кнопками «Вперед» и «Назад»:

let animation = anime({
  targets: '.btn-box',
  translateY: 400,
  duration: 2000,
  easing: 'easeInOutSine',
  autoplay: false
});

document.querySelector('#forward').addEventListener('click', () => {
  animation.currentTime += 200; // Перемотка вперед на 200 мс
});

document.querySelector('#backward').addEventListener('click', () => {
  animation.currentTime -= 200; // Перемотка назад на 200 мс
});

Эти подходы делают currentTime универсальным инструментом для интерактивного управления анимациями и синхронизации сложных последовательностей.

Свойство currentTime обеспечивает полный контроль над временной шкалой анимации, позволяя реализовать как базовую перемотку, так и сложные интерактивные сценарии с несколькими синхронизированными объектами.

Оглавление