gsap.utils: методы утилит

Библиотека GSAP (GreenSock Animation Platform) предоставляет широкий набор инструментов для работы с анимацией в JavaScript. Среди этих инструментов особое место занимают утилиты (gsap.utils), которые упрощают выполнение часто встречающихся задач, таких как генерация случайных значений, работа с диапазонами, циклические вычисления и управление временными функциями. Ниже приведён подробный разбор ключевых методов gsap.utils.

1. gsap.utils.random()

Метод random позволяет получать случайные значения. Он поддерживает как диапазоны чисел, так и массивы, возвращая случайный элемент.

Синтаксис:

gsap.utils.random(min, max, rounding?, returnFunction?);
gsap.utils.random(array);

Параметры:

  • min и max – числовой диапазон.
  • rounding – функция округления (например, Math.round, Math.floor).
  • returnFunction – если true, возвращается функция, которая при каждом вызове возвращает новое случайное значение.
  • array – массив значений для случайного выбора.

Примеры:

gsap.utils.random(0, 100); // возвращает случайное число между 0 и 100
gsap.utils.random(0, 10, Math.floor); // случайное целое число от 0 до 10
const rand = gsap.utils.random([1, 2, 3, 4]); // случайный элемент массива

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

2. gsap.utils.snap()

Метод snap упрощает привязку числовых значений к сетке или заданным шагам.

Синтаксис:

gsap.utils.snap(snapValue, value);

Параметры:

  • snapValue – может быть числом, массивом или функцией.
  • value – исходное значение, которое нужно «привязать».

Примеры:

gsap.utils.snap(10, 37); // возвращает 40, ближайшее кратное 10
gsap.utils.snap([0, 50, 100], 77); // возвращает 100, ближайшее из массива

snap часто используется для привязки координат объектов или значений CSS к сетке, что полезно при разработке интерфейсов.

3. gsap.utils.interpolate()

Метод для линейной интерполяции между значениями, включая числа, цвета и массивы.

Синтаксис:

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

Примеры:

gsap.utils.interpolate(0, 100, 0.5); // 50
gsap.utils.interpolate([0, 0], [100, 100], 0.5); // [50, 50]

Можно использовать для плавного изменения свойств объектов в анимации.

4. gsap.utils.wrap()

Метод wrap циклически обрабатывает числа или массивы, обеспечивая «закольцованное» поведение.

Синтаксис:

gsap.utils.wrap(min, max, value);
gsap.utils.wrap(array, value);

Примеры:

gsap.utils.wrap(0, 360, 370); // 10
gsap.utils.wrap([0, 1, 2], 4); // 1

wrap полезен для повторяющихся анимаций, таких как вращение объектов или циклическое переключение изображений.

5. gsap.utils.clamp()

Метод clamp ограничивает число заданным диапазоном.

Синтаксис:

gsap.utils.clamp(min, max, value);

Примеры:

gsap.utils.clamp(0, 100, 150); // 100
gsap.utils.clamp(0, 100, -20); // 0

Используется для предотвращения выхода значений за допустимые пределы, например, при управлении координатами элементов.

6. gsap.utils.unitize()

Метод unitize автоматически добавляет единицы измерения к числовым значениям.

Синтаксис:

gsap.utils.unitize(func, unit);
  • func – функция, возвращающая число.
  • unit – строка с единицей измерения (например, "px", "%").

Примеры:

const px = gsap.utils.unitize(n => n * 2, "px");
px(10); // "20px"

Упрощает работу с CSS-свойствами, где требуются единицы измерения.

7. gsap.utils.pipe()

Метод pipe создаёт цепочку функций, где выход одной функции становится входом следующей.

Синтаксис:

gsap.utils.pipe(fn1, fn2, fn3, ...);

Примеры:

const process = gsap.utils.pipe(
  n => n * 2,
  n => n + 5
);
process(10); // (10*2)+5 = 25

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

8. gsap.utils.shuffle()

Метод shuffle перемешивает массив, создавая случайный порядок элементов.

Синтаксис:

gsap.utils.shuffle(array);

Примеры:

gsap.utils.shuffle([1, 2, 3, 4, 5]); // [3, 1, 5, 2, 4] — порядок каждый раз другой

Полезно для анимаций, где элементы должны появляться в случайной последовательности.

9. gsap.utils.splitColor()

Метод для разбора цветовых значений и получения компонентов RGBA или HSLA.

Синтаксис:

gsap.utils.splitColor(color);

Примеры:

gsap.utils.splitColor("rgb(255,0,0)"); // {r:255, g:0, b:0, a:1}
gsap.utils.splitColor("#00ff00");      // {r:0, g:255, b:0, a:1}

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

10. gsap.utils.normalize()

Метод normalize преобразует число из диапазона [min, max] в [0, 1].

Синтаксис:

gsap.utils.normalize(min, max, value);

Примеры:

gsap.utils.normalize(0, 100, 50); // 0.5
gsap.utils.normalize(-50, 50, 0); // 0.5

Часто используется для приведения значений к удобному диапазону при работе с прогрессами анимации.

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

Оглавление