Offset и метки времени

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

Offset

Offset — это смещение начала анимации относительно начала timeline. Оно может задаваться как числовое значение в миллисекундах или как строка с относительным временем.

Синтаксис

anime.timeline()
  .add({
    targets: '.box',
    translateX: 250,
    duration: 1000,
    offset: 500
  });

В этом примере анимация translateX начнётся через 500 миллисекунд после старта timeline.

Виды значений offset

  1. Абсолютное число Указывается в миллисекундах, относительно начала timeline.

    offset: 1000 // анимация стартует через 1 секунду

  2. Строковое относительное смещение Можно использовать знаки += и -= для смещения относительно предыдущей анимации.

    anime.timeline()
  .add({ targets: '.box', translateX: 100, duration: 500 })
  .add({ targets: '.box', translateY: 50, duration: 500, offset: '+=200' }); // старт через 200мс после предыдущей анимации

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

    offset: '-=300' // начнётся за 300мс до окончания предыдущей анимации

Метки времени (Timeline Labels)

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

Создание метки

let tl = anime.timeline();

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

tl.add({
  targets: '.box2',
  translateY: 100,
  duration: 500,
  offset: 'startBox1+=200'
});

tl.add({
  targets: '.box3',
  translateX: 150,
  duration: 700
});

tl.add({
  targets: '.box1',
  scale: 1.5,
  duration: 400,
  offset: '+=0', // старт относительно текущей позиции timeline
});

Метки с именами

let tl = anime.timeline();

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

tl.add({
  targets: '.square',
  translateY: 150,
  duration: 800,
  offset: 'begin+=500' // на 500мс позже метки begin
});
  • Метки объявляются при первом использовании имени в offset.
  • Позволяют синхронизировать несколько анимаций без необходимости вручную вычислять миллисекунды.

Комбинирование offset и меток

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

let tl = anime.timeline();

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

tl.add({
  targets: '.box2',
  translateY: 150,
  duration: 600,
  offset: '+=100' // 100мс после предыдущей анимации
});

tl.add({
  targets: '.box3',
  scale: 1.5,
  duration: 500,
  offset: 'start+=200' // относительно метки start, которая была определена ранее
});

Преимущества подхода:

  • Легко управлять многокомпонентными анимациями.
  • Возможность повторного использования меток для новых анимаций.
  • Упрощение отладки временной последовательности.

Практические советы

  • Для простых последовательностей достаточно использовать числовые offset.
  • Для сложных или многокомпонентных анимаций рекомендуется вводить метки времени, чтобы улучшить читаемость и масштабируемость кода.
  • Относительные смещения (+=, -=) особенно полезны при вставке новых анимаций в уже существующую timeline, не нарушая общий порядок.
  • Метки и offset можно комбинировать с loops и easing, сохраняя точное управление таймингом.

Заключение по использованию

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

Оглавление