Параметры timeline

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

Создание timeline

Для создания timeline используется функция anime.timeline():

const tl = anime.timeline({
  loop: true,
  autoplay: true,
  easing: 'easeOutExpo'
});

Параметры timeline передаются в объект конфигурации и действуют как дефолтные настройки для всех анимаций внутри него.

Основные параметры при создании:

  • loop — булево значение или число повторов. Позволяет зациклить всю последовательность.
  • autoplay — если true, анимация стартует сразу после создания.
  • direction — 'normal', 'reverse' или 'alternate'. Определяет направление воспроизведения.
  • easing — тип плавности переходов, применяемый ко всем анимациям по умолчанию.
  • duration — общая продолжительность анимаций, если не задана отдельно в элементах.

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

Анимации добавляются методом .add():

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

Каждая анимация может иметь собственные параметры, которые переопределяют дефолтные настройки timeline.

Ключевые параметры .add():

  • targets — CSS-селектор, DOM-элемент или массив элементов.
  • translateX, translateY, scale, rotate и другие свойства — задают изменения CSS или SVG.
  • duration — длительность анимации в миллисекундах.
  • delay — задержка запуска анимации относительно начала timeline или предыдущего шага.
  • easing — тип интерполяции для конкретного шага.

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

Timeline позволяет точно контролировать моменты запуска каждой анимации с помощью параметра offset. Он может быть указан:

  • Числом в миллисекундах — абсолютное смещение от начала timeline.
  • Относительно предыдущей анимации — строки вида '-=500' (старт за 500 мс до конца предыдущей анимации).

Пример:

tl
  .add({ targets: '.box1', translateX: 200, duration: 1000 })
  .add({ targets: '.box2', translateY: 100, duration: 1000, offset: '-=500' });

В этом примере вторая анимация начнется за 500 мс до завершения первой, создавая перекрытие.

Использование функций для динамических значений

Любой параметр анимации может быть функцией, возвращающей значение для каждого элемента:

tl.add({
  targets: '.circle',
  translateX: (el, i) => i * 50,
  delay: anime.stagger(100),
  duration: 800
});
  • anime.stagger() — встроенная функция для последовательного смещения запуска анимаций по элементам.
  • Использование функций позволяет создавать сложные эффекты с различной динамикой движения элементов.

Управление timeline после создания

Timeline возвращает объект с методами управления:

  • tl.play() — запуск или продолжение анимации.
  • tl.pause() — приостановка.
  • tl.restart() — перезапуск с начала.
  • tl.seek(time) — переход к конкретной позиции в миллисекундах.
  • tl.reverse() — изменение направления воспроизведения.

Эти методы работают независимо от autoplay и позволяют программно управлять анимациями на лету.

Каскадирование и вложенные timeline

Timeline поддерживает вложенные анимации, что позволяет создавать сложные каскадные эффекты:

const subTl = anime.timeline();
subTl.add({ targets: '.subBox', scale: 1.5, duration: 500 });
subTl.add({ targets: '.subBox', rotate: 180, duration: 500 });

tl.add({ targets: '.box', translateX: 300, duration: 1000 });
tl.add(subTl, '-=500'); // Вложенный timeline запускается с перекрытием

Вложенные timeline наследуют параметры родительского, но могут иметь собственные уникальные свойства.

Ключевые моменты использования timeline

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

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

Оглавление