Random values для случайных значений

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

Метод gsap.utils.random()

Основной инструмент для работы со случайными значениями в GSAP — функция gsap.utils.random(). Она позволяет получать числа, строки или выбирать элементы из массива с равномерной или распределенной случайностью.

Синтаксис:

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

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

gsap.utils.random(0, 100);           // случайное число от 0 до 100
gsap.utils.random(0, 10, Math.floor); // случайное целое число от 0 до 10

Для получения случайного элемента массива:

const colors = ["red", "green", "blue"];
gsap.utils.random(colors); // случайный элемент массива

Если массив содержит объекты или строки, gsap.utils.random() вернёт случайный элемент с равной вероятностью.

Использование случайных значений в анимации

Случайные значения особенно полезны при работе с анимациями, где нужно создавать эффект «живости» объектов. Например, можно анимировать множество элементов с различными параметрами:

gsap.to(".box", {
  x: () => gsap.utils.random(0, 500), // случайная позиция по X
  y: () => gsap.utils.random(0, 300), // случайная позиция по Y
  rotation: () => gsap.utils.random(-45, 45), // случайный поворот
  duration: 2,
  stagger: 0.1
});

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

Интервалы и распределение вероятностей

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

gsap.utils.random(0, 100, 10); // значения: 0, 10, 20, ..., 100

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

function gaussianRandom(mean = 0, stdDev = 1) {
  let u = 0, v = 0;
  while(u === 0) u = Math.random();
  while(v === 0) v = Math.random();
  return mean + stdDev * Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
}

gsap.to(".circle", {
  x: () => gaussianRandom(250, 50), // случайное смещение с нормальным распределением
  duration: 1.5
});

Связь случайных значений с modifiers

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

gsap.to(".star", {
  x: 400,
  y: 200,
  rotation: 360,
  duration: 3,
  modifiers: {
    rotation: r => r + gsap.utils.random(-15, 15)
  }
});

Модификатор применяется каждую кадр-анимации, добавляя элемент непредсказуемости, не нарушая основной логики анимации.

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

  1. Эффект разброса объектов – случайные позиции и повороты для объектов на сцене.
  2. Визуальные эффекты частиц – случайная скорость, направление и размер.
  3. Интерактивные интерфейсы – динамическая реакция элементов на события.
  4. Случайная цветовая палитра – выбираются случайные цвета из массива для анимации градиентов или текста.
gsap.to(".particle", {
  x: () => gsap.utils.random(-200, 200),
  y: () => gsap.utils.random(-100, 100),
  backgroundColor: () => gsap.utils.random(["#ff0000", "#00ff00", "#0000ff"]),
  duration: 2,
  repeat: -1,
  yoyo: true
});

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

Функции gsap.utils.random и их сочетание с анимациями и модификаторами позволяют создавать живые, динамичные эффекты без сложной математики. Применение случайности делает сцены более естественными и визуально привлекательными, обеспечивая гибкость и контроль при программировании анимаций.

Оглавление