Конфигурационные объекты

В библиотеке mo.js вся анимация строится вокруг конфигурационных объектов — декларативных описаний поведения, внешнего вида и динамики анимируемых сущностей. Конфигурационный объект представляет собой обычный JavaScript-объект, передаваемый в конструктор соответствующего класса (Shape, Tween, Burst и др.).

Ключевая особенность — единый подход к описанию параметров: значения могут быть как статическими, так и динамическими (через функции, диапазоны или специальные синтаксические конструкции).

Пример базового конфигурационного объекта:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: 50,
  fill: 'red',
  duration: 1000
});

Основные группы параметров

Конфигурационные объекты в mo.js логически делятся на несколько категорий:

Геометрические параметры

Определяют форму и размеры:

  • shape — тип фигуры (circle, rect, polygon, line)
  • radius — радиус (для окружностей)
  • width, height — размеры (для прямоугольников)
  • points — количество углов (для многоугольников)

Пример:

{
  shape: 'polygon',
  points: 5,
  radius: 40
}

Параметры внешнего вида

Отвечают за визуальное представление:

  • fill — цвет заливки
  • stroke — цвет обводки
  • strokeWidth — толщина обводки
  • opacity — прозрачность

Поддерживаются строки, массивы, а также переходы:

{
  fill: 'none',
  stroke: 'blue',
  strokeWidth: { 10: 0 }
}

Параметры трансформации

Определяют положение и преобразования:

  • x, y — позиция
  • angle — угол поворота
  • scale — масштаб
  • skewX, skewY — искажение

Пример:

{
  x: { 0: 100 },
  scale: { 0: 1.5 },
  angle: { 0: 360 }
}

Временные параметры

Контролируют длительность и синхронизацию:

  • duration — длительность анимации (в мс)
  • delay — задержка перед началом
  • repeat — количество повторений
  • yoyo — обратное проигрывание
{
  duration: 1500,
  delay: 200,
  repeat: 2,
  yoyo: true
}

easing-функции

Определяют характер изменения параметров во времени:

  • easing — функция интерполяции

Пример:

{
  easing: 'cubic.out'
}

mo.js поддерживает множество предустановленных easing-функций, а также пользовательские.

Динамические значения

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

Диапазоны значений

Запись вида { from: to }:

{
  radius: { 20: 80 }
}

означает плавное изменение от 20 до 80.

Случайные значения

Используется синтаксис строки:

{
  radius: 'rand(10, 50)',
  angle: 'rand(0, 360)'
}

Каждый запуск анимации генерирует новое значение.

Функции

Можно передавать функции:

{
  x: function(el, index) {
    return index * 50;
  }
}

Функция получает:

  • DOM-элемент
  • индекс
  • дополнительные параметры контекста

Составные значения

Некоторые параметры могут принимать массивы или сложные структуры.

Массивы значений

{
  fill: ['red', 'blue', 'green']
}

mo.js автоматически интерполирует между значениями.

Ключевые кадры (keyframes)

{
  scale: { 0: 0, 50: 1.5, 100: 1 }
}

Позволяет задавать более сложные траектории изменения.

Свойства, специфичные для классов

Разные классы mo.js используют собственные наборы параметров.

Shape

  • shape
  • radius
  • fill
  • stroke

Burst

  • count — количество элементов
  • degree — угол разброса
  • radius — радиус разлёта
new mojs.Burst({
  count: 10,
  radius: { 0: 100 },
  degree: 360
});

Tween

  • onUpdate — функция обновления
  • onComplete — завершение
new mojs.Tween({
  duration: 1000,
  onUpdate: function(progress) {
    console.log(progress);
  }
});

Наследование и расширение конфигураций

mo.js позволяет повторно использовать конфигурации через копирование и расширение объектов.

Object.assign

const base = {
  duration: 1000,
  easing: 'quad.out'
};

const circle = new mojs.Shape(
  Object.assign({}, base, {
    shape: 'circle',
    fill: 'red'
  })
);

Spread-оператор

const base = {
  duration: 1000
};

const shape = new mojs.Shape({
  ...base,
  radius: 50
});

Связь параметров между собой

Некоторые параметры могут зависеть друг от друга.

Пример зависимости

{
  radius: { 0: 50 },
  strokeWidth: function() {
    return this.radius / 2;
  }
}

this внутри функции ссылается на текущий объект анимации.

Управление единицами измерения

mo.js автоматически работает с различными единицами:

  • пиксели (px)
  • проценты (%)
  • градусы (deg)

Пример:

{
  x: '100%',
  angle: '45deg'
}

Цветовые интерполяции

Поддерживаются различные форматы:

  • HEX (#ff0000)
  • RGB (rgb(255,0,0))
  • HSL
{
  fill: { '#ff0000': '#0000ff' }
}

Переход между цветами происходит автоматически.

Отладка конфигураций

Для анализа поведения анимации используются:

  • логирование значений в onUpdate
  • временное отключение параметров
  • упрощение конфигурации

Пример:

new mojs.Tween({
  duration: 1000,
  onUpdate(progress) {
    console.log(progress);
  }
});

Практический пример комплексного конфигурационного объекта

const animation = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 100 },
  fill: { 'red': 'blue' },
  stroke: 'white',
  strokeWidth: { 10: 0 },
  opacity: { 1: 0 },
  scale: { 0.5: 1.2 },
  angle: { 0: 360 },
  duration: 1500,
  easing: 'cubic.out',
  delay: 300
});

В этом примере:

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

Особенности внутренней обработки

mo.js при инициализации:

  1. Парсит конфигурационный объект
  2. Преобразует значения в внутренний формат
  3. Создаёт tween-объекты для каждого параметра
  4. Синхронизирует их по времени

Это позволяет:

  • комбинировать разные типы значений
  • использовать единый API
  • обеспечивать высокую производительность

Поведение по умолчанию

Если параметр не указан:

  • используются значения по умолчанию
  • некоторые свойства наследуются от родительских объектов
  • отсутствующие анимации считаются статическими

Пример:

new mojs.Shape({
  radius: 50
});

В этом случае:

  • fill будет задан по умолчанию
  • duration примет стандартное значение
  • остальные параметры не будут анимироваться

Итеративная настройка

Конфигурационные объекты часто уточняются по мере разработки:

  1. задаётся базовая структура
  2. добавляются динамические значения
  3. оптимизируются easing-функции
  4. настраивается синхронизация

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

Оглавление