Единицы измерения и относительные значения

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

Абсолютные и относительные единицы

GSAP поддерживает большинство CSS-единиц: px, %, em, rem, vw, vh и т.д. Каждая единица имеет свою область применения:

  • px — абсолютная пиксельная величина, используется для точного позиционирования и размеров.
  • % — относительная величина, часто применяется для позиционирования относительно родительского элемента.
  • em и rem — масштабируются относительно шрифта: em зависит от родителя, rem — от корневого элемента.
  • vw и vh — единицы относительно размеров окна браузера: 1vw = 1% ширины экрана, 1vh = 1% высоты экрана.

При анимации, GSAP автоматически интерпретирует эти значения в зависимости от контекста, что упрощает создание адаптивных интерфейсов.

Относительные значения через += и -=

GSAP позволяет задавать значения относительно текущего состояния свойства с помощью синтаксиса "+=" и "-=".

Примеры:

gsap.to(".box", { x: "+=100", duration: 1 });
gsap.to(".box", { y: "-=50%", duration: 1 });
  • "+=100" — прибавляет 100 пикселей к текущей позиции по оси X.
  • "-=50%" — уменьшает текущую величину на 50% от родительского элемента по оси Y.

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

Относительные значения через функции

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

gsap.to(".box", {
  x: (i, target) => target.offsetLeft + i * 20,
  duration: 1
});
  • i — индекс элемента в наборе.
  • target — сам DOM-элемент.
  • Возвращаемое значение становится целевым для анимации свойства.

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

Применение ключевых слов: auto и inherit

GSAP корректно работает с CSS-ключевыми словами:

  • auto — автоматически определяет конечное значение свойства, например, высоту блока с динамическим контентом.
  • inherit — унаследует значение от родителя. Полезно для каскадных стилей в сложных структурах DOM.
gsap.to(".content", { height: "auto", duration: 0.5 });

В этом примере элемент плавно увеличит высоту до необходимой для отображения всего содержимого.

Комбинирование единиц и относительных значений

GSAP позволяет смешивать абсолютные, относительные и процентные значения, создавая гибкие анимации. Например:

gsap.to(".box", { x: "50%+=30", duration: 1 });
  • Сначала вычисляется 50% от родительского элемента.
  • Затем прибавляется 30px.

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

Применение в трансформациях

Анимации свойств x, y, scale, rotation и других с относительными значениями создают органичное движение элементов. Пример:

gsap.to(".circle", { x: "+=100", y: "-=50", rotation: "+=360", duration: 2 });
  • Элемент сдвигается на 100 пикселей по X и на 50 пикселей по Y относительно текущего положения.
  • Поворот на 360° относительно текущего значения rotation.

Особенности работы с процентами в трансформациях

GSAP автоматически корректирует процентные значения в трансформациях относительно размера элемента и его родителя, что упрощает адаптивные анимации. Например, x: "50%" перемещает элемент на половину ширины родителя, а не окна.

Заключение по ключевым возможностям

  • Поддержка большинства CSS-единиц и автоматическая интерпретация.
  • Относительные значения через += и -=.
  • Функции для вычисления динамических значений.
  • Поддержка ключевых слов CSS (auto, inherit).
  • Комбинирование разных единиц для гибких и адаптивных анимаций.
  • Корректная работа процентов в трансформациях.

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

Оглавление