Функции как значения свойств

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

Синтаксис и базовое использование

Функция передаётся в качестве значения свойства. GSAP вызывает её для каждого анимируемого элемента, передавая следующие параметры:

gsap.to(".box", {
  x: (i, target) => i * 100,
  duration: 2
});
  • i — индекс элемента в выборке.
  • target — сам DOM-элемент.

В примере каждый элемент с классом .box будет смещён по оси X на 0, 100, 200 пикселей и так далее, в зависимости от его индекса.

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

Доступ к текущим свойствам

Функция может возвращать значения, основанные на текущих стилях элемента:

gsap.to(".box", {
  x: (i, target) => parseFloat(getComputedStyle(target).left) + 50,
  duration: 1.5
});

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

Комбинирование с другими свойствами

Функции можно использовать не только для числовых значений, но и для сложных свойств CSS, таких как color, rotation, scale и даже path для SVG:

gsap.to(".circle", {
  rotation: (i) => i * 45,
  backgroundColor: (i) => `hsl(${i * 40}, 80%, 50%)`,
  duration: 2
});

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

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

Использование случайных значений

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

gsap.to(".star", {
  x: () => Math.random() * 500,
  y: () => Math.random() * 500,
  rotation: () => Math.random() * 360,
  duration: 3
});

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

Совет: при необходимости повторяемости лучше использовать генератор псевдослучайных чисел с фиксированным сидом.

Контекст и this

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

gsap.to(".box", {
  x: function() {
    return this.offsetWidth * 2;
  },
  duration: 2
});

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

Применение к сложным анимациям

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

gsap.to(".card", {
  x: (i) => i * 120,
  y: (i) => Math.sin(i) * 50,
  scale: (i) => 1 + i * 0.1,
  duration: 1.5,
  stagger: 0.1
});

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

Особенности и ограничения

  1. Возвращаемое значение должно соответствовать типу свойства. Например, x ожидает числовое значение или строку с единицами ("50px"), backgroundColor — строку цвета.
  2. Функция вызывается каждый раз при старте анимации. Если необходимо постоянное значение, лучше вычислить его заранее.
  3. Совместимость с GSAP.timeline(). Функции работают внутри временных линий точно так же, как и в одиночных анимациях.

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

Оглавление