Вложенные timeline

anime.timeline() позволяет объединять несколько анимаций в единую последовательность, задавая общие параметры и обеспечивая согласованное взаимодействие между ними. Timeline может содержать несколько анимаций, которые запускаются по очереди или параллельно, в зависимости от указанных смещений.

Создание timeline:

const tl = anime.timeline({
  easing: 'easeOutExpo',
  duration: 1000
});

Здесь все анимации внутри timeline будут по умолчанию иметь easeOutExpo и длительность 1000 мс, если не указано иначе для конкретной анимации.

Добавление анимаций в timeline

Метод add() добавляет анимацию к timeline. Основные параметры:

  • targets — элемент или набор элементов для анимации.
  • Свойства анимации — translateX, opacity, scale и т.д.
  • offset — определяет положение анимации относительно начала timeline или относительно предыдущей анимации.

Пример последовательного добавления анимаций:

tl
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateY: 150
  });

По умолчанию каждая следующая анимация начинается после завершения предыдущей.

Для одновременного запуска используется offset:

tl
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateY: 150,
    offset: '-=500' // старт на 500 мс раньше окончания предыдущей анимации
  });

Вложенные timeline

Timeline могут быть вложенными, что позволяет создавать сложные анимационные последовательности с иерархией и повторением. Вложенный timeline добавляется как анимация внутри add().

Пример вложенного timeline:

const subTimeline = anime.timeline({
  easing: 'easeInOutSine',
  duration: 500
});

subTimeline
  .add({
    targets: '.circle',
    scale: 1.5
  })
  .add({
    targets: '.circle',
    rotate: 180
  });

const mainTimeline = anime.timeline({
  easing: 'linear',
  duration: 1000
});

mainTimeline
  .add({
    targets: '.box',
    translateX: 300
  })
  .add(subTimeline, '-=500'); // вложенный timeline запускается за 500 мс до конца предыдущей анимации

Здесь subTimeline управляет отдельной анимацией, но синхронизируется с основным timeline, используя offset.

Управление смещением и синхронизацией

Offset может быть указано:

  • Числом (в мс) — абсолютное положение на шкале timeline.
  • Строкой вида '+=' или '-=' — смещение относительно предыдущей анимации.
  • Без значения — последовательный запуск.

Пример сложного управления временем:

mainTimeline
  .add({
    targets: '.box1',
    translateX: 200
  })
  .add({
    targets: '.box2',
    translateY: 150
  }, '-=300') // начинается за 300 мс до окончания первой анимации
  .add({
    targets: '.box3',
    opacity: [0, 1]
  }, 500); // абсолютное смещение: старт через 500 мс от начала timeline

Повторение и управление timeline

Timeline поддерживает ключевые свойства управления:

  • loop — число повторов (true = бесконечно).
  • direction — направление: 'normal', 'reverse', 'alternate'.
  • autoplay — автоматический запуск (true по умолчанию).

Пример повторяющегося вложенного timeline:

const repeatingTimeline = anime.timeline({
  loop: 3,
  direction: 'alternate'
});

repeatingTimeline
  .add({
    targets: '.dot',
    translateY: 100,
    duration: 400
  })
  .add({
    targets: '.dot',
    translateY: 0,
    duration: 400
  });

Вложенный timeline унаследует эти настройки, если они не переопределены локально.

Динамическое управление

Timeline можно останавливать, запускать заново, изменять прогресс:

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

tl.add({ targets: '.box', translateX: 300, duration: 1000 });

tl.play();        // запуск
tl.pause();       // пауза
tl.restart();     // перезапуск
tl.seek(500);     // перемотка на 500 мс

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

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

  • Использовать вложенные timeline для модульной анимации: каждый блок анимации становится отдельным логическим элементом.
  • Offset и абсолютные значения времени позволяют точно выстроить сложные эффекты.
  • Loop и direction помогают создавать непрерывные анимации с обратными движениями без повторного дублирования кода.
  • Autoplay: false удобно для анимаций, запускаемых по событию, например, при прокрутке страницы или клике.

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

Оглавление