Получение и изменение параметров анимации

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

Получение текущих значений свойств

Для доступа к текущим значениям свойств объекта используется метод getProperty или прямое обращение через объект анимации. Например, если есть анимация элемента box:

gsap.to(".box", { x: 300, duration: 2 });

Получить текущее значение x можно через:

let currentX = gsap.getProperty(".box", "x");

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

Изменение параметров анимации на лету

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

Пример изменения значения свойства:
let tween = gsap.to(".box", { x: 300, duration: 2 });

tween.vars.x = 500; // обновление целевого значения
tween.invalidate();  // пересчёт начальных и конечных параметров
tween.play();        // запуск обновлённой анимации

Метод invalidate() сбрасывает кэшированные значения, что гарантирует корректное обновление анимации при изменении параметров.

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

GSAP поддерживает возможность задания свойств через функции. Это позволяет вычислять целевые значения во время каждой итерации анимации:

gsap.to(".box", {
  x: () => Math.random() * 500,
  duration: 2
});

Каждый вызов анимации будет получать новое значение x, что делает анимацию адаптивной и интерактивной.

Получение текущего прогресса и времени анимации

Объекты анимаций имеют методы и свойства, позволяющие получать текущее состояние анимации:

  • tween.progress() — возвращает прогресс от 0 до 1.
  • tween.time() — текущее время в секундах от начала анимации.
  • tween.duration() — полная длительность анимации.

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

let tween = gsap.to(".box", { x: 300, duration: 2 });

console.log(tween.progress()); // 0 в начале
console.log(tween.time());     // 0 в начале

tween.eventCallback("onUpdate", () => {
  console.log("Progress:", tween.progress());
  console.log("Current Time:", tween.time());
});

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

Динамическое управление скоростью и направлением

Для изменения скорости анимации используется метод timeScale(). Он позволяет ускорять или замедлять анимацию без изменения её длительности:

let tween = gsap.to(".box", { x: 300, duration: 4 });
tween.timeScale(2); // скорость увеличена в 2 раза

Для реверсирования анимации применяется метод reverse():

tween.reverse(); // проигрывает анимацию в обратном направлении

Можно также комбинировать timeScale и reverse, чтобы создать эффект ускоренного обратного движения.

Получение и изменение нескольких свойств одновременно

GSAP позволяет работать с группами свойств через объект vars. Это удобно для комплексных изменений:

let tween = gsap.to(".box", { x: 300, y: 200, opacity: 0.5, duration: 2 });

// Изменение нескольких свойств на лету
tween.vars = { x: 400, y: 100, opacity: 1, duration: 3 };
tween.invalidate();
tween.play();

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

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

Если анимация является частью Timeline, методы progress(), time() и invalidate() позволяют управлять как отдельной анимацией, так и всей последовательностью:

let tl = gsap.timeline();
tl.to(".box", { x: 300, duration: 2 })
  .to(".box", { y: 200, duration: 2 });

tl.progress(0.5); // перемещаемся к середине всей последовательности
tl.invalidate();  // пересчитываем все анимации в таймлайне

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

Заключение по методам управления

Возможность получать и изменять параметры анимации делает GSAP мощным инструментом для динамических интерфейсов. Основные методы и свойства — getProperty, vars, invalidate, progress, time, duration, timeScale, reverse — позволяют полностью контролировать анимацию на лету, создавая интерактивные и отзывчивые решения.

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

Оглавление