Targets как функция

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

Определение функции для targets

Функция в targets позволяет динамически определять набор элементов в момент запуска анимации. Синтаксис следующий:

anime({
  targets: () => document.querySelectorAll('.box'),
  translateX: 250,
  duration: 1000
});

В этом примере функция возвращает коллекцию элементов .box. Это особенно полезно при работе с динамически создаваемыми элементами, когда невозможно заранее указать их в селекторе.

Принципы работы функции

  1. Вызов функции происходит при старте анимации – это значит, что список элементов формируется именно в момент выполнения anime().

  2. Функция должна возвращать:

    • Один DOM-элемент,
    • NodeList,
    • Массив DOM-элементов.

  3. Контекст выполнения – функция выполняется в глобальном контексте, поэтому внутри неё нет автоматического доступа к параметрам анимации, кроме возвращаемого значения.

Примеры использования

Динамическое создание целей:

function getDynamicTargets() {
  const container = document.querySelector('#container');
  return Array.from(container.children).filter(el => el.classList.contains('active'));
}

anime({
  targets: getDynamicTargets,
  scale: 1.5,
  duration: 800,
  easing: 'easeInOutQuad'
});

В этом примере анимируются только те дочерние элементы контейнера #container, которые имеют класс active. Если к моменту старта анимации появятся новые элементы с этим классом, они автоматически попадут в анимацию.

Использование функций с параметрами:

Функция может быть обёрткой, которая учитывает внешние условия:

const selectedIndex = 2;

anime({
  targets: () => document.querySelectorAll(`.item:nth-child(${selectedIndex + 1})`),
  rotate: 45,
  duration: 500
});

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

Сравнение с обычными селекторами

  • Статические селекторы (.box) – список элементов фиксирован на момент вызова anime().
  • Функция targets – позволяет вычислять список элементов динамически и учитывать текущее состояние DOM или данные приложения.

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

  • Функцию лучше использовать для элементов, которые создаются или изменяются после загрузки страницы.
  • Если функция возвращает пустой массив, анимация просто не будет применяться – ошибок при этом не возникает.
  • Комбинирование функции с другими селекторами позволяет гибко формировать сложные наборы целей:
anime({
  targets: () => [...document.querySelectorAll('.highlight'), document.getElementById('special')],
  opacity: [0, 1],
  duration: 1200
});

Особенности производительности

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

Интеграция с timeline

Функции в targets полностью совместимы с anime.timeline():

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

tl.add({
  targets: () => document.querySelectorAll('.step1'),
  translateX: 100
}).add({
  targets: () => document.querySelectorAll('.step2'),
  translateY: 50
});

Это позволяет динамически формировать последовательность анимаций, реагирующую на текущее состояние интерфейса.

Вывод

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

Оглавление