Значения: процент и абсолютные числа

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

Абсолютные значения

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

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

В этом примере элемент с классом .box будет перемещён на 200 пикселей по оси X и 100 пикселей по оси Y за 2 секунды. Абсолютные значения обеспечивают точный контроль над расположением элементов, однако они не учитывают динамическую ширину или высоту контейнера.

Особенности абсолютных значений:

  • Всегда фиксированы, не изменяются при изменении размеров окна или родителя.
  • Идеальны для статичных интерфейсов, где размеры элементов известны заранее.
  • Позволяют легко создавать точные последовательности анимаций.

Процентные значения

Проценты задаются относительно родительского контейнера или текущего размера элемента. В GSAP процентные значения обычно используются для CSS-свойств, таких как width, height, left, top и translate.

gsap.to(".box", { x: "50%", y: "25%", duration: 2 });

Здесь .box смещается на 50% ширины родителя по оси X и 25% высоты по оси Y. Это позволяет элементам оставаться пропорциональными при изменении размеров окна или родительского контейнера, что критично для адаптивного дизайна.

Ключевые моменты использования процентов:

  • Проценты всегда вычисляются относительно блочного контекста: ширины/высоты родителя для width, height, left, top или текущих размеров элемента для translate.
  • GSAP автоматически конвертирует строковые значения с процентами в пиксели при выполнении анимации.
  • Поддерживаются как положительные, так и отрицательные проценты, что позволяет создавать смещения в любом направлении.

Комбинированные значения

GSAP позволяет смешивать абсолютные и процентные значения для разных свойств одновременно:

gsap.to(".box", { x: "30%", y: 100, duration: 2 });

В этом случае элемент смещается на 30% ширины родителя по X и 100 пикселей по Y. Такой подход сочетает адаптивность и точность.

Преобразования и относительные значения

GSAP поддерживает относительные значения вида "+=50" или "-=20%", что позволяет анимировать элемент относительно его текущего состояния:

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

Преимущества относительных значений:

  • Упрощают создание цепочек анимаций без необходимости вручную вычислять текущие координаты.
  • Обеспечивают адаптивное поведение при изменении размеров окна.

Функции для динамических значений

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

gsap.to(".box", { 
  x: i => i * 20 + "%", 
  duration: 2,
  stagger: 0.3
});

В данном примере каждый элемент .box с индексом i получает смещение по X, зависящее от его позиции в NodeList. Функции обеспечивают возможность создавать динамичные и уникальные анимации для множества элементов одновременно.

Практические рекомендации

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

Итоги работы с процентами и абсолютными числами в GSAP

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

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

Оглавление