shuffle для перемешивания массивов

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

Основное использование

Метод shuffle принимает массив и возвращает новый массив с теми же элементами, но в случайном порядке. Синтаксис выглядит следующим образом:

gsap.utils.shuffle(array);
  • array — исходный массив элементов (числа, строки, объекты или DOM-элементы).
  • Возвращаемое значение — новый массив с перемешанными элементами.

Важно отметить, что метод не изменяет исходный массив, а создаёт новый. Это позволяет безопасно использовать данные без риска их случайного разрушения.

Примеры работы с shuffle

Перемешивание числового массива:

const numbers = [1, 2, 3, 4, 5];
const shuffledNumbers = gsap.utils.shuffle(numbers);

console.log(shuffledNumbers); // возможный вывод: [3, 5, 1, 4, 2]
console.log(numbers); // исходный массив остаётся: [1, 2, 3, 4, 5]

Перемешивание массива строк:

const colors = ['red', 'green', 'blue', 'yellow'];
const shuffledColors = gsap.utils.shuffle(colors);

console.log(shuffledColors); // возможный вывод: ['blue', 'red', 'yellow', 'green']

Перемешивание коллекции DOM-элементов:

const boxes = document.querySelectorAll('.box');
const shuffledBoxes = gsap.utils.shuffle(boxes);

shuffledBoxes.forEach((box, index) => {
  gsap.to(box, { duration: 1, x: index * 50 });
});

В этом примере перемешанные элементы .box анимируются с горизонтальным смещением на основе их позиции в новом массиве.

Сочетание с анимациями GSAP

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

const items = document.querySelectorAll('.item');
const randomItems = gsap.utils.shuffle(items);

gsap.to(randomItems, {
  duration: 1,
  opacity: 1,
  y: 0,
  stagger: 0.2
});

Здесь stagger применяется к перемешанному массиву, создавая эффект последовательного появления элементов в случайном порядке.

Внутренний механизм работы

Метод shuffle использует алгоритм Фишера-Йетса (Fisher-Yates), который обеспечивает равномерное распределение вероятностей для всех возможных перестановок массива.

Пошагово процесс выглядит так:

  1. Копирование исходного массива в новый.
  2. Итеративный проход от конца массива к началу.
  3. На каждом шаге выбирается случайный индекс элемента, который меняется местами с текущим.
  4. Итерация продолжается до первого элемента.

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

Советы по практическому применению

  • Использовать shuffle перед анимацией последовательностей элементов для создания динамичных и непредсказуемых эффектов.
  • Не полагаться на изменение исходного массива: если требуется сохранить оригинальный порядок, всегда сохранять исходный массив отдельно.
  • Можно комбинировать с stagger для сложных анимационных сцен с перемешанными элементами.
  • Метод работает с любыми типами данных, включая массивы объектов, DOM-элементы, числа, строки, функции и т. д.

Примеры комбинирования с другими утилитами GSAP

Перемешивание и случайное смещение:

const cards = document.querySelectorAll('.card');
gsap.utils.shuffle(cards).forEach(card => {
  gsap.to(card, {
    x: gsap.utils.random(-100, 100),
    y: gsap.utils.random(-50, 50),
    rotation: gsap.utils.random(-15, 15),
    duration: 1
  });
});

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

Анимация с использованием timeline и shuffle:

const dots = document.querySelectorAll('.dot');
const shuffledDots = gsap.utils.shuffle(dots);

const tl = gsap.timeline();
shuffledDots.forEach(dot => {
  tl.to(dot, { scale: 1.5, duration: 0.3 }, "-=0.2")
    .to(dot, { scale: 1, duration: 0.3 });
});

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

Метод shuffle является универсальным инструментом для работы с массивами в GSAP, позволяя создавать случайные последовательности и оживлять интерфейсные элементы с минимальным количеством кода, сохраняя при этом исходные данные.

Оглавление