Вспомогательные функции

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

anime.stagger()

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

Синтаксис:

anime.stagger(value, options)

Параметры:

  • value — число (px, %, deg) или функция, определяющая базовое смещение.

  • options — объект с настройками:

    • start — значение начального смещения.
    • direction — 'normal' или 'reverse'.
    • grid — массив [rows, columns] для анимации по сетке.
    • axis — 'x' или 'y' для одновременного смещения по оси.

Пример:

anime({
  targets: '.box',
  translateX: anime.stagger(50, { start: 0, direction: 'normal' }),
  duration: 1000
});

Элементы с классом .box будут смещаться по оси X с шагом 50px.

anime.random()

Функция random позволяет генерировать случайные числа в заданном диапазоне. Она полезна для создания естественных или хаотичных движений.

Синтаксис:

anime.random(min, max)

Пример:

anime({
  targets: '.star',
  translateX: () => anime.random(-200, 200),
  translateY: () => anime.random(-100, 100),
  duration: 2000
});

Каждый элемент .star получит случайное смещение по обеим осям.

anime.set()

Метод set позволяет мгновенно установить свойства объекта или DOM-элемента без анимации. Часто используется для начальной инициализации перед запуском анимаций.

Синтаксис:

anime.set(targets, properties)

Пример:

anime.set('.circle', { opacity: 0, scale: 0 });

Все элементы .circle будут полностью прозрачными и с нулевым масштабом.

anime.path()

Функция path позволяет использовать SVG-путь в качестве кривой для движения элементов. Возвращает функцию, которая вычисляет координаты по пути.

Синтаксис:

anime.path('selector')

Пример:

const path = anime.path('#motionPath');

anime({
  targets: '.icon',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  duration: 3000,
  loop: true
});

Элемент .icon будет двигаться по кривой, определённой в #motionPath, с поворотом в направлении пути.

Вспомогательные функции для массивов и объектов

Функция-обертка для вычисления значения:

anime.set(targets, value => value * 2)

Позволяет динамически изменять свойства элементов в зависимости от текущего состояния или индекса.

Работа с массивами:

  • targets может быть массивом элементов, объектов или строковым селектором.
  • Для каждого элемента анимация вычисляется индивидуально, что позволяет создавать сложные последовательности и эффекты «каскадного» движения.

Использование функций обратного вызова

Многие вспомогательные функции можно комбинировать с колбэками update, begin, complete для получения полной гибкости. Например, anime.stagger часто используется совместно с функцией, возвращающей значения на основе индекса:

anime({
  targets: '.dot',
  translateY: anime.stagger(el => el * 10, { start: 0 }),
  duration: 1200
});

Каждый элемент .dot будет подниматься с индивидуальным смещением.

Принципы комбинирования

  1. Смешивание функций: stagger, random и path могут комбинироваться для сложных эффектов.
  2. Динамическое вычисление значений: функции позволяют задавать свойства в виде колбэков, что делает анимации гибкими.
  3. Совместимость с массивами и объектами: все вспомогательные функции корректно работают как с DOM-элементами, так и с объектами JS.

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

Оглавление