clamp, wrap, interpolate

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

Clamp

Функция clamp используется для ограничения числового значения в определённом диапазоне. Она особенно полезна, когда необходимо предотвращать выход значений за допустимые границы при анимации или взаимодействии с пользователем.

Синтаксис:

gsap.utils.clamp(min, max, value);
  • min — минимальное допустимое значение.
  • max — максимальное допустимое значение.
  • value — исходное значение, которое требуется ограничить.

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

let limitedValue = gsap.utils.clamp(0, 100, 150); 
console.log(limitedValue); // 100

Если значение выходит за пределы диапазона [min, max], оно автоматически корректируется до ближайшей границы. При анимации это предотвращает нежелательные эффекты, такие как “вылет” объектов за пределы видимой области.

Ключевые моменты:

  • Обеспечивает контроль над числовыми параметрами.
  • Применяется для ограничения положения объектов, прозрачности, размеров и других свойств.
  • Может использоваться совместно с пользовательскими событиями (mousemove, scroll) для ограничения значений.

Wrap

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

Синтаксис:

gsap.utils.wrap(min, max, value);
  • min — нижняя граница диапазона.
  • max — верхняя граница диапазона.
  • value — значение для “оборачивания”.

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

let wrappedValue = gsap.utils.wrap(0, 360, 370); 
console.log(wrappedValue); // 10

Значение 370 “оборачивается” в диапазон [0, 360], что идеально подходит для работы с углами вращения, позиционированием на кольце или циклическими эффектами в интерфейсе.

Ключевые моменты:

  • Создает эффект бесконечной прокрутки или циклической анимации.
  • Подходит для углов, процентов и координат в пределах фиксированного диапазона.
  • Отличие от clamp: значение не фиксируется на границе, а возвращается в диапазон циклически.

Interpolate

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

Синтаксис:

gsap.utils.interpolate(start, end, progress);
  • start — начальное значение.
  • end — конечное значение.
  • progress — число от 0 до 1, задающее прогресс интерполяции.

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

let interpolatedValue = gsap.utils.interpolate(0, 100, 0.25);
console.log(interpolatedValue); // 25

Функция также поддерживает массивы значений и строковые шаблоны:

let color = gsap.utils.interpolate(["#ff0000", "#00ff00"], 0.5);
console.log(color); // "#808000" (плавный переход цвета)

Ключевые моменты:

  • Позволяет создавать любые плавные переходы между значениями.
  • Может использоваться для анимации чисел, цветов, координат и сложных CSS свойств.
  • Поддерживает динамические функции в качестве входных данных, обеспечивая гибкость при построении анимационных кривых.

Сравнение и комбинация функций

Функция Назначение Типичные сценарии
clamp Ограничение значения диапазоном Положение, размер, прозрачность
wrap Циклическое возвращение значения в диапазон Углы, круговые анимации, бесконечные эффекты
interpolate Плавный переход между значениями Анимация чисел, цветов, CSS свойств

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

let angle = gsap.utils.wrap(0, 360, gsap.utils.clamp(0, 400, 390));
let rotation = gsap.utils.interpolate(0, 180, 0.5);

console.log(angle);    // 30
console.log(rotation); // 90

В этом примере значение сначала ограничивается функцией clamp, затем оборачивается в диапазон с помощью wrap, а функция interpolate используется для плавного перехода угла. Такой подход обеспечивает контроль, цикличность и плавность анимации одновременно.

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

Оглавление