Степень случайности

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

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

Параметрическая вариативность как основа генерации движения

Случайность в системе анимации почти никогда не существует в «чистом» виде. Вместо этого используются диапазоны значений и функции выбора внутри них. Такой подход позволяет:

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

В mo.js параметры объектов могут задаваться не только фиксированными значениями, но и функциями-генераторами.

Пример параметрической случайности:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 10: 40 },
  opacity: { 1: 0 },
  duration: 800,
  x: 'rand(-100, 100)',
  y: 'rand(-50, 50)'
});

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

Диапазоны значений и стохастическая интерполяция

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

Такая модель используется для:

  • размеров (radius, strokeWidth)
  • прозрачности (opacity)
  • смещений (x, y)
  • углов вращения (angle)
  • длительности (duration)

Пример:

const burst = new mojs.Burst({
  radius: { 0: 120 },
  count: 8,
  children: {
    shape: 'polygon',
    points: 6,
    radius: { 5: 20 },
    angle: { 0: 360 },
    duration: { 600: 1200 }
  }
});

Каждый дочерний элемент получает собственный набор значений в заданных пределах, что формирует «разброс» поведения.

Случайность в системах burst-эффектов

Один из наиболее характерных случаев использования вариативности — взрывные анимации. В таких системах случайность влияет на:

  • направление разлёта частиц
  • скорость движения
  • задержку старта
  • форму и размер элементов

Внутренняя логика burst-эффекта опирается на генерацию множества независимых объектов с параметрами, вычисляемыми из базового диапазона.

const explosion = new mojs.Burst({
  left: 0, top: 0,
  radius: { 0: 100 },
  count: 12,
  children: {
    shape: 'circle',
    fill: ['#ff4d4d', '#ffd24d', '#4dff88'],
    radius: { 3: 10 },
    degreeShift: 'rand(-90, 90)',
    duration: 'rand(600, 1000)'
  }
});

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

Временная случайность и распределение запусков

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

В mo.js временные параметры могут варьироваться через:

  • задержки старта (delay)
  • фазовые смещения (staggering)
  • случайные длительности (duration ranges)

Пример временной деструктуризации:

const timeline = new mojs.Timeline();

const anims = new Array(10).fill(0).map((_, i) =>
  new mojs.Shape({
    shape: 'circle',
    radius: { 0: 20 },
    duration: 600,
    delay: i * 50 + Math.random() * 200,
    opacity: { 1: 0 }
  })
);

timeline.add(anims);
timeline.play();

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

Стохастические функции и генераторы значений

Механизм случайности в mo.js не ограничивается диапазонами. Применяются функции-генераторы, возвращающие значение при каждом вычислении параметра.

Такой подход позволяет:

  • создавать динамическое поведение в реальном времени
  • связывать случайность с внешними данными
  • формировать зависимые распределения

Пример функции-генератора:

const randomX = () => Math.random() * 200 - 100;

const shape = new mojs.Shape({
  shape: 'rect',
  x: randomX,
  y: randomX,
  radius: 15
});

При каждом создании объекта значения будут отличаться, что создаёт эффект «разбросанной сетки».

Управляемая энтропия анимации

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

В mo.js это достигается через:

  • ограниченные диапазоны
  • повторяемые шаблоны с вариациями
  • фиксированные центры генерации
  • контролируемые вероятностные распределения

Пример частично фиксированной системы:

const baseAngle = 90;

const burst = new mojs.Burst({
  radius: { 0: 80 },
  children: {
    angle: { baseAngle - 30: baseAngle + 30 },
    radius: { 5: 15 }
  }
});

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

Вероятностные паттерны поведения

Случайность может задавать не только значения, но и факт исполнения. Это используется для создания условных эффектов появления элементов.

Пример вероятностного включения:

if (Math.random() > 0.5) {
  new mojs.Shape({
    shape: 'circle',
    radius: 20,
    fill: 'red'
  }).play();
}

Такой подход создаёт неполные ансамбли анимаций, где сцена каждый раз формируется иначе.

Корреляция случайности и визуальной плотности

При увеличении количества элементов случайность начинает выполнять роль распределителя плотности. Вместо хаотичного нагромождения формируется структура, где:

  • одни области становятся более насыщенными
  • другие — разреженными
  • движение приобретает градиентную вариативность

В burst-системах это выражается через комбинацию:

  • случайного количества элементов
  • вариативных радиусов
  • разброса скоростей
const burst = new mojs.Burst({
  count: 'rand(5, 20)',
  radius: { 0: 120 },
  children: {
    radius: 'rand(2, 12)',
    duration: 'rand(500, 1500)'
  }
});

Случайность как инструмент микровзаимодействий

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

Типовые применения:

  • небольшие колебания позиции
  • вариативная длительность hover-эффектов
  • случайные задержки появления элементов списка
  • дрожание или микро-движения
const button = new mojs.Html({
  el: '.button',
  x: { 0: 'rand(-3, 3)' },
  y: { 0: 'rand(-2, 2)' },
  duration: 200
});

Связанные уровни случайности в системе анимации

Случайность может существовать на разных уровнях одновременно:

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

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

Оглавление