Relative values: использование += и -=

GSAP предоставляет возможность задавать относительные значения при анимации свойств элементов. Это позволяет изменять текущее состояние свойства на определённую величину вместо указания абсолютного значения. Основные операторы для относительных изменений — += и -=.

Основной принцип работы

В GSAP относительные значения используются следующим образом:

gsap.to(".box", { x: "+=100", duration: 2 });

Здесь x: "+=100" означает: взять текущее значение свойства x элемента и прибавить к нему 100 пикселей. Аналогично, x: "-=50" уменьшает текущее значение на 50 пикселей.

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

Поддерживаемые свойства

Относительные значения работают для большинства свойств, с которыми GSAP может работать:

  • Позиция: x, y, left, top
  • Размеры: width, height
  • Прозрачность: opacity
  • Повороты: rotation, rotationX, rotationY
  • Масштабирование: scale, scaleX, scaleY

Пример для нескольких свойств одновременно:

gsap.to(".box", { 
  x: "+=50", 
  y: "-=30", 
  rotation: "+=45", 
  duration: 1.5 
});

Комбинирование с ключевыми кадрами

Относительные значения отлично подходят при создании сложных анимаций через Timeline:

let tl = gsap.timeline();

tl.to(".box", { x: "+=100", duration: 1 })
  .to(".box", { y: "+=50", duration: 1 })
  .to(".box", { rotation: "-=90", duration: 1 });

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

Использование с from, fromTo и set

Относительные значения работают не только с to(), но и с другими методами GSAP:

gsap.from(".box", { x: "+=50", opacity: 0, duration: 1 });

gsap.fromTo(".box", 
  { x: "+=0", rotation: 0 }, 
  { x: "+=200", rotation: "+=180", duration: 2 }
);

gsap.set(".box", { y: "+=100" });
  • from() начинает анимацию от указанных относительных значений.
  • fromTo() позволяет комбинировать стартовые и конечные значения с использованием относительных операторов.
  • set() мгновенно изменяет свойства элемента на относительные величины, не создавая плавной анимации.

Работа с числовыми строками и процентами

GSAP интерпретирует относительные значения, записанные как строки, независимо от единиц:

gsap.to(".box", { x: "+=50px", y: "-=10%" });
  • Если единицы указаны явно, они учитываются при вычислении смещения.
  • Если единицы не указаны, GSAP использует текущие вычисленные значения элемента.

Особенности и подводные камни

  1. Комбинация с transform: Когда анимация работает с x, y, rotation и scale, GSAP использует трансформации CSS. Это значит, что относительные значения учитывают текущую трансформацию элемента, а не только CSS свойства left или top.
  2. Цепочка анимаций: При последовательных анимациях важно учитывать относительные значения, чтобы не возникали неожиданные смещения.
  3. Анимация через timeline: Внутри timeline относительные значения удобны для создания плавных последовательных переходов без вычислений абсолютных координат.
  4. Работа с отрицательными числами: Можно использовать комбинацию -= с положительными и отрицательными значениями для динамического смещения.

Примеры практического применения

Пошаговое движение объекта по экрану:

gsap.timeline()
  .to(".box", { x: "+=100", duration: 0.5 })
  .to(".box", { y: "+=100", duration: 0.5 })
  .to(".box", { x: "-=50", duration: 0.5 })
  .to(".box", { y: "-=50", duration: 0.5 });

Анимация вращения с нарастающей амплитудой:

let rotationAmount = 45;
gsap.to(".wheel", {
  rotation: "+=" + rotationAmount,
  duration: 1,
  repeat: 3,
  yoyo: true
});

Динамическая анимация масштаба с сохранением текущего состояния:

gsap.to(".circle", { scale: "+=0.5", duration: 0.8 });

Относительные значения += и -= в GSAP обеспечивают гибкость и экономию времени при работе с анимациями, позволяя создавать сложные динамические эффекты без необходимости заранее вычислять абсолютные координаты или размеры элементов.

Оглавление