Передача параметров в callback-функции

GSAP (GreenSock Animation Platform) предоставляет гибкие механизмы для анимации элементов в JavaScript, включая возможность использования callback-функций. Callback-функции — это функции, которые выполняются в определённый момент жизненного цикла анимации, например, при начале (onStart), завершении (onComplete) или обновлении (onUpdate) анимации. Ключевое преимущество GSAP заключается в том, что callback-функции могут принимать дополнительные параметры, что позволяет создавать динамичные и адаптивные анимации.

Основные callback-функции GSAP

  • onStart — вызывается в момент запуска анимации.
  • onUpdate — вызывается каждый кадр во время анимации.
  • onComplete — вызывается после завершения анимации.
  • onRepeat — вызывается каждый раз, когда анимация повторяется.
  • onReverseComplete — вызывается после завершения анимации в обратном направлении.

Все эти функции могут быть объявлены прямо в объекте параметров при создании анимации с помощью gsap.to, gsap.from или gsap.fromTo.

Передача параметров через контекст this

По умолчанию callback-функции GSAP вызываются в контексте анимации (this указывает на объект анимации). Это позволяет обращаться к текущим свойствам анимации, например this.targets() для получения элементов, к которым применяется анимация.

Пример:

gsap.to(".box", {
  x: 300,
  duration: 2,
  onComplete: function() {
    console.log("Анимация завершена для:", this.targets());
  }
});

Здесь this.targets() возвращает массив DOM-элементов, анимация которых только что завершилась.

Передача дополнительных аргументов через обёртку

GSAP не позволяет напрямую передавать аргументы в callback через объект анимации. Для передачи параметров используется обёртка в виде анонимной функции или стрелочной функции, которая вызывает нужную функцию с параметрами.

Пример передачи дополнительных данных:

function showMessage(element, message) {
  console.log(`Элемент: ${element}, Сообщение: ${message}`);
}

gsap.to(".box", {
  x: 200,
  duration: 1.5,
  onComplete: () => showMessage(".box", "Анимация завершена")
});

Здесь стрелочная функция создаёт замыкание, позволяя передать конкретные значения element и message.

Использование параметров с динамическим вычислением

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

const box = document.querySelector(".box");
const output = document.querySelector(".output");

gsap.to(box, {
  x: 400,
  duration: 4,
  onUpdate: function() {
    output.textContent = `Текущее положение X: ${Math.round(this.targets()[0].offsetLeft)}`;
  }
});

Использование this.targets() позволяет отслеживать актуальное состояние объекта в любой момент анимации.

Параметры через функцию в объекте анимации

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

gsap.to(".box", {
  x: () => Math.random() * 500,
  duration: 2,
  onComplete: function() {
    console.log("Новая позиция:", this.targets()[0].offsetLeft);
  }
});

Функции, возвращающие значения, создают динамику в анимации и упрощают передачу вычисленных параметров в callback.

Связывание пользовательских данных с анимацией

GSAP поддерживает хранение пользовательских данных в объектах анимации через data или пользовательские свойства, доступные в callback:

gsap.to(".box", {
  x: 250,
  duration: 2,
  myCustomData: { id: 1, name: "box1" },
  onComplete: function() {
    console.log("Данные анимации:", this.vars.myCustomData);
  }
});

this.vars содержит все параметры анимации, включая пользовательские свойства. Это позволяет передавать сложные структуры данных в callback без создания внешних замыканий.

Пошаговое использование нескольких callback

Можно использовать несколько callback одновременно, каждый из которых получает доступ к параметрам анимации и контексту:

gsap.to(".box", {
  x: 300,
  duration: 3,
  onStart: function() {
    console.log("Начало анимации для:", this.targets());
  },
  onUpdate: function() {
    console.log("Текущая позиция:", this.targets()[0].offsetLeft);
  },
  onComplete: function() {
    console.log("Анимация завершена. Данные:", this.vars.myCustomData);
  },
  myCustomData: { step: "final" }
});

Такое использование позволяет контролировать анимацию на всех её этапах и передавать любые данные в callback, делая анимации GSAP мощным инструментом интерактивности.

Резюме по передаче параметров

  1. Контекст this — доступ к элементам анимации и параметрам через this.targets() и this.vars.
  2. Обёртка функций — позволяет передавать любые дополнительные параметры.
  3. Функции как значения свойств — создают динамику и дают callback актуальные данные.
  4. Пользовательские данные в vars — хранение любых объектов и структур для использования в callback.

Использование этих приёмов обеспечивает максимальную гибкость при работе с callback-функциями в GSAP и позволяет строить сложные интерактивные анимации с передаваемыми параметрами.

Оглавление