Создание timeline

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

let tl = anime.timeline({
    loop: true,
    easing: 'easeInOutQuad'
});

Ключевые параметры:

  • loop — определяет, будет ли timeline повторяться.
  • easing — задаёт базовую функцию плавности для всех добавляемых анимаций (можно переопределять для каждой анимации).
  • duration — задаёт длительность всей timeline, если не указан индивидуально для анимаций.

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

Для добавления анимации используется метод .add(). Каждая анимация в timeline может иметь собственные параметры, включая задержку, продолжительность и easing.

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

Особенности метода add:

  • targets — объекты, которые будут анимированы.

  • offset — определяет момент запуска анимации относительно предыдущей. Может быть:

    • числом (в миллисекундах) — точное смещение от начала timeline;
    • строкой '+=' или '-=' — относительное смещение от предыдущей анимации.

  • duration — продолжительность анимации.

  • easing — индивидуальная функция плавности.

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

Timeline позволяет синхронизировать несколько анимаций. Например, можно запустить анимации одновременно или с определенной задержкой:

tl.add({
    targets: '.circle',
    scale: 2,
    duration: 800
}).add({
    targets: '.square',
    rotate: 180,
    duration: 800,
    offset: '-=800' // Запуск одновременно с предыдущей
});

Использование отрицательного offset позволяет создавать параллельные анимации, сохраняя при этом общую структуру timeline.

Контроль и управление Timeline

Timeline предоставляет методы для управления воспроизведением:

  • play() — запускает timeline.
  • pause() — приостанавливает анимацию.
  • restart() — перезапускает timeline с начала.
  • seek(time) — перемещает текущее время воспроизведения на заданное значение в миллисекундах.
  • reverse() — меняет направление анимации на противоположное.
tl.pause();       // Остановить
tl.seek(500);     // Перейти к 500ms
tl.play();        // Продолжить воспроизведение

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

Динамическое добавление анимаций

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

let tl = anime.timeline();

tl.add({
    targets: '.star',
    opacity: [0,1],
    duration: 500
});

setTimeout(() => {
    tl.add({
        targets: '.star',
        translateY: 100,
        duration: 700
    });
}, 1000);

В этом примере первая анимация стартует сразу, а через 1 секунду добавляется новая анимация, которая автоматически синхронизируется с текущим состоянием timeline.

Комбинирование с keyframes

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

tl.add({
    targets: '.triangle',
    keyframes: [
        {translateX: 50},
        {translateY: 100},
        {rotate: 180}
    ],
    duration: 2000
});

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

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

  • Использовать offset для точного контроля последовательности анимаций.
  • Для повторяющихся анимаций устанавливать loop в timeline вместо повторного добавления анимаций.
  • Комбинировать keyframes с timeline для многоступенчатых эффектов.
  • Для сложных интерактивных сценариев применять методы seek и reverse.

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

Оглавление