Чейнинг анимаций

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  easing: 'easeInOutQuad',
  complete: function() {
    anime({
      targets: '.box',
      translateY: 150,
      duration: 800,
      easing: 'easeOutBounce'
    });
  }
});

В приведённом примере анимация по оси X выполняется первой, после чего запускается анимация по оси Y. Такой подход через callback complete работает, но усложняет код при большом количестве последовательностей. Anime.js предоставляет более элегантное решение — использование объекта timeline.

Timeline: создание последовательных и параллельных анимаций

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

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

tl.add({
  targets: '.box',
  translateX: 250
})
.add({
  targets: '.box',
  translateY: 150
})
.add({
  targets: '.box',
  rotate: '1turn'
});

Каждое добавление через метод .add() выполняется после предыдущего шага по умолчанию, что облегчает создание последовательных анимаций. При этом Timeline позволяет:

  • Задавать смещение относительно начала таймлайна через параметр offset.
  • Контролировать одновременные анимации, назначая одинаковое смещение нескольким шагам.
  • Использовать различные функции easing для каждого шага.

Управление смещением через offset

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

tl.add({
  targets: '.box',
  translateX: 300,
  duration: 1000
})
.add({
  targets: '.circle',
  scale: 2,
  duration: 500
}, '-=500'); // запуск на 500 мс раньше окончания предыдущей анимации

Здесь '-=500' означает, что анимация элемента .circle начнётся за 500 мс до конца предыдущей. Можно использовать положительные значения ('+=300') для явной задержки после предыдущей анимации или абсолютное число (500) для запуска в конкретное время относительно начала таймлайна.

Одновременные анимации и общий таймлайн

Для создания эффекта синхронизированных анимаций достаточно использовать один timeline и задавать одинаковые offset или не указывать его вовсе:

tl.add({
  targets: '.box',
  translateX: 200,
  duration: 1000
})
.add({
  targets: '.circle',
  translateY: 200,
  duration: 1000
}, 0); // запуск с начала таймлайна

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

Контроль над повторениями и direction

Timeline поддерживает параметры:

  • loop — повтор всей цепочки заданное количество раз или бесконечно (true).
  • direction — задаёт направление: 'normal', 'reverse' или 'alternate'.
const tl = anime.timeline({
  loop: 2,
  direction: 'alternate'
});

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

При direction: 'alternate' анимация будет воспроизводиться в обратном порядке после каждого цикла.

Чейнинг анимаций с функциями и callback

Anime.js позволяет комбинировать timeline с функциями begin, update, complete для каждого шага:

tl.add({
  targets: '.box',
  translateX: 300,
  duration: 1000,
  begin: () => console.log('Начало анимации X'),
  complete: () => console.log('Конец анимации X')
})
.add({
  targets: '.box',
  translateY: 150,
  duration: 800,
  update: anim => console.log(`Текущее значение: ${anim.animatables[0].target.style.transform}`)
});

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

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

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

tl.add({
  targets: '.box',
  translateX: () => Math.random() * 300,
  duration: 1000
})
.add({
  targets: '.circle',
  scale: el => el.dataset.factor || 1,
  duration: 800
});

Таким образом можно создавать анимации, зависящие от данных элементов, без ручного расчёта каждого значения.

Итоговые рекомендации по чейнингу

  • Для последовательных анимаций лучше использовать timeline, а не вложенные callback.
  • Использование offset даёт полный контроль над синхронизацией шагов.
  • loop и direction упрощают создание циклических анимаций.
  • Комбинирование timeline с функциями begin, update, complete позволяет интегрировать анимации с логикой интерфейса.
  • Динамические значения через функции повышают гибкость и сокращают повторяемость кода.

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

Оглавление