Приоритизация анимаций

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

Свойство `begin`, `update` и `complete`

Anime.js предоставляет возможность управлять жизненным циклом анимации через колбэки:

anime({
  targets: '.box',
  translateX: 250,
  duration: 1000,
  begin: () => console.log('Анимация началась'),
  update: anim => console.log(`Текущее значение: ${anim.progress}%`),
  complete: () => console.log('Анимация завершена')
});

begin — срабатывает в момент старта анимации. Здесь можно поставить условие для приоритетных анимаций, блокируя менее важные.
update — позволяет отслеживать прогресс и корректировать значения в реальном времени.
complete — момент завершения. Используется для активации последующих анимаций, учитывая приоритеты.

Последовательное и параллельное выполнение

Anime.js поддерживает два основных подхода к управлению порядком анимаций:

Последовательное выполнение с помощью массива объектов или timeline:

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

tl.add({
  targets: '.box1',
  translateX: 250
})
.add({
  targets: '.box2',
  translateY: 200
}, '-=500'); // частичное наложение

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

Параллельное выполнение:

anime({
  targets: ['.box1', '.box2'],
  translateX: 300,
  duration: 1000
});

Все элементы анимируются одновременно.
Приоритет в этом случае определяется порядком определения анимаций или значением z-index для визуального наложения.

Управление приоритетами через timeline

Timeline является ключевым инструментом для приоритизации. Важные моменты:

Задача высокой приоритетности добавляется первой в timeline или с меньшим смещением offset.
Низкоприоритетные задачи могут запускаться с большим offset, позволяя более важным анимациям завершиться раньше.
Можно комбинировать параллельные и последовательные анимации внутри одного timeline:

let priorityTimeline = anime.timeline({
  easing: 'linear',
  duration: 500
});

priorityTimeline
  .add({ targets: '.high-priority', translateX: 200 })
  .add({ targets: '.low-priority', translateY: 150 }, '+=200'); // старт после задержки

Использование `autoplay` и ручного запуска

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

let highPriorityAnim = anime({
  targets: '.important',
  scale: 1.5,
  duration: 600,
  autoplay: false
});

// В нужный момент
highPriorityAnim.play();

autoplay: false позволяет контролировать старт анимации, гарантируя её приоритет над остальными.
Анимации с ручным запуском можно использовать в комбинации с timeline для более точного управления очередностью.

Прерывание анимаций и их приоритет

Anime.js позволяет останавливать или перезапускать анимацию:

let anim = anime({
  targets: '.box',
  translateX: 300,
  duration: 1000
});

// Прерывание
anim.pause();

// Перезапуск с сохранением прогресса
anim.play();

Приоритизация часто требует прерывания низкоприоритетных анимаций в пользу важных.
Можно использовать комбинацию pause(), play(), reverse() для динамического контроля приоритетов.

Управление конфликтами CSS-свойств

Если несколько анимаций пытаются одновременно менять одно и то же свойство, важно:

Разделять анимации на разные свойства: translate, scale, opacity.
Использовать timeline с offset, чтобы свойства обновлялись последовательно.
При необходимости применять keyframes для точного контроля:

anime({
  targets: '.box',
  keyframes: [
    { translateX: 100 },
    { translateY: 150 },
    { scale: 1.5 }
  ],
  duration: 1500,
  easing: 'easeInOutSine'
});

Приоритет через кастомные функции

Anime.js позволяет задавать функции для вычисления значений свойств:

anime({
  targets: '.box',
  translateX: () => Math.random() * 300, // каждый элемент получает уникальное значение
  duration: 800
});

Можно создавать условия, где приоритетные элементы получают более крупные изменения или более быстрые анимации.
Полезно для визуального выделения приоритетного контента на странице.