Функции как значения параметров

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

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

Синтаксис стандартного свойства anime.js обычно выглядит так:

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

Здесь translateX — фиксированное число. Но если вместо числа передать функцию, она будет вызвана для каждого целевого элемента анимации:

anime({
  targets: '.box',
  translateX: function(el, i, t) {
    return i * 50; // Смещение каждого элемента на 50 пикселей умноженное на его индекс
  },
  duration: 1000
});

Аргументы функции:

  1. el — текущий элемент DOM, к которому применяется анимация.
  2. i — индекс элемента в массиве целевых элементов.
  3. t — полный список всех целевых элементов, который можно использовать для вычислений на основе других элементов.

Функция должна возвращать значение, которое anime.js будет использовать для свойства анимации. Это может быть число, строка с единицами измерения ('px', '%'), цвет в любом поддерживаемом формате ('#ff0000', 'rgb(255,0,0)') и даже массив значений для анимации по кривой.

Динамическая генерация ключевых кадров

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

anime({
  targets: '.circle',
  translateY: function(el, i) {
    return Math.sin(i * 0.5) * 100;
  },
  scale: function(el, i) {
    return 1 + i * 0.2;
  },
  duration: 1500,
  easing: 'easeInOutSine'
});

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

Функции для цветов и сложных значений

Функции можно использовать для цветов, размеров, поворотов или любых CSS-свойств, которые поддерживает anime.js. Например:

anime({
  targets: '.square',
  backgroundColor: function(el, i) {
    return `rgb(${i * 50}, 100, 150)`; // Каждый элемент получает свой оттенок
  },
  rotate: function(el, i) {
    return i * 15; // Поворот в зависимости от индекса
  },
  duration: 1200
});

Функции могут возвращать и сложные строки, например для transform или clip-path, если требуется нестандартное преобразование.

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

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

const boxes = document.querySelectorAll('.box');

anime({
  targets: boxes,
  translateX: function(el, i, elements) {
    if (i === 0) return 0;
    return elements[i - 1].getBoundingClientRect().right; // Смещение относительно предыдущего элемента
  },
  duration: 800
});

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

Передача функций в параметры анимации времени

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

anime({
  targets: '.dot',
  translateY: 200,
  duration: function(el, i) {
    return 500 + i * 200; // Каждый последующий элемент движется дольше
  },
  delay: function(el, i) {
    return i * 100; // Смещение старта анимации по индексу
  }
});

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

Встроенные возможности функций с keyframes

Функции особенно полезны в сочетании с массивами keyframes, где каждое значение keyframe может быть вычислено динамически:

anime({
  targets: '.star',
  keyframes: [
    { translateX: el => el.offsetLeft, translateY: el => el.offsetTop },
    { translateX: el => el.offsetLeft + 100, translateY: el => el.offsetTop + 50 },
    { translateX: el => el.offsetLeft, translateY: el => el.offsetTop }
  ],
  duration: 2000,
  easing: 'easeInOutQuad'
});

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

Резюме по использованию функций

  • Функции позволяют динамически вычислять значения свойств анимации для каждого элемента.
  • Поддерживаются любые свойства: translate, rotate, scale, color и пользовательские CSS-параметры.
  • Аргументы функции: el (элемент), i (индекс), t (массив всех целевых элементов).
  • Функции могут использоваться для delay, duration, easing.
  • Позволяют создавать органические, зависимые и каскадные анимации без ручного задания каждого значения.

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

Оглавление