Плагины для mo.js

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

Ключевые принципы:

  • Модульность — каждая функциональность может быть вынесена в отдельный плагин
  • Инкапсуляция — плагин не должен нарушать внутреннюю логику ядра
  • Расширение через прототипы — основной способ внедрения новых возможностей
  • Hook-система — подключение к этапам жизненного цикла анимации

Типы плагинов в mo.js

1. Плагины для кастомных форм (Shapes)

Позволяют создавать новые типы фигур, которые можно использовать в mojs.Shape.

Примеры стандартных фигур:

  • circle
  • rect
  • polygon
  • cross
  • equal

Кастомные фигуры регистрируются через mojs.addShape.

Пример создания пользовательской фигуры:

class StarShape extends mojs.CustomShape {
  getShape() {
    return '<path d="M10 1 L12 7 H18 L13 10 L15 16 L10 12 L5 16 L7 10 L2 7 H8 Z"/>';
  }
}

mojs.addShape('star', StarShape);

Использование:

new mojs.Shape({
  shape: 'star',
  fill: 'yellow',
  scale: { 0: 1 },
  duration: 1000
});

Особенности:

  • SVG-разметка возвращается методом getShape
  • возможно использование сложных path-элементов
  • поддержка трансформаций через стандартные параметры mo.js

2. Плагины для кастомных эффектов (Effects)

Эффекты — это расширения, изменяющие поведение анимации.

Можно создавать:

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

Расширение easing-функций:

mojs.easing.myCustomEase = function (p) {
  return Math.sin(p * Math.PI);
};

Использование:

new mojs.Tween({
  duration: 1000,
  easing: 'myCustomEase',
  onUpdate: (progress) => {
    console.log(progress);
  }
});

3. Плагины для Burst и Stagger

Расширяют поведение массовых анимаций.

Можно кастомизировать:

  • распределение частиц
  • траектории движения
  • генерацию параметров

Пример кастомной логики для Burst:

const burst = new mojs.Burst({
  count: 10,
  children: {
    radius: { 0: 50 },
    angle: (i) => i * 36,
    delay: (i) => i * 50
  }
});

Плагин может вмешиваться в генерацию этих значений.

4. Плагины для timeline и управления

Позволяют добавлять:

  • синхронизацию с внешними событиями
  • интеграцию с UI
  • сложные сценарии воспроизведения

Пример расширения Timeline:

mojs.Timeline.prototype.pauseAll = function () {
  this._timelines.forEach(t => t.pause());
};

Механизм регистрации плагинов

addShape

mojs.addShape(name, shapeClass);
  • name — строковый идентификатор
  • shapeClass — класс, наследуемый от CustomShape

Расширение прототипов

mojs.Shape.prototype.myMethod = function () {
  console.log('custom behavior');
};

Важно:

  • избегать конфликтов имен
  • использовать уникальные префиксы

Lifecycle-хуки и интеграция

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

  • onStart
  • onUpdate
  • onComplete

Пример:

new mojs.Tween({
  duration: 1000,
  onStart() {
    console.log('start');
  },
  onUpdate(progress) {
    console.log(progress);
  },
  onComplete() {
    console.log('done');
  }
});

Плагин может оборачивать эти методы:

function wrapOnUpdate(tween) {
  const original = tween._props.onUpdate;
  tween._props.onUpd ate = function (p) {
    console.log('before');
    original && original(p);
    console.log('after');
  };
}

Работа с внутренними структурами

mo.js использует внутренние объекты:

  • _props — параметры анимации
  • _state — текущее состояние
  • _render — функция рендеринга

Плагины могут взаимодействовать с ними, но это требует осторожности.

Пример вмешательства:

const shape = new mojs.Shape({...});

const originalRender = shape._render;
shape._render = function () {
  console.log('custom render');
  originalRender.call(this);
};

Создание комплексных плагинов

Крупные плагины объединяют несколько возможностей:

  • новые формы
  • кастомные easing
  • управление таймлайном

Структура плагина:

const MyPlugin = {
  install(mojs) {
    mojs.addShape('custom', CustomShape);

    mojs.easing.customEase = (p) => p * p;

    mojs.Shape.prototype.customMethod = function () {
      console.log('extended');
    };
  }
};

Использование:

MyPlugin.install(mojs);

Организация кода плагинов

Рекомендуется:

  • изолировать код в отдельные модули
  • использовать ES6-классы
  • документировать API

Пример структуры:

/plugin
  /shapes
    Star.js
  /easing
    customEase.js
  index.js

Совместимость и ограничения

При разработке плагинов важно учитывать:

  • версию mo.js (API может меняться)
  • отсутствие строгого публичного API для расширения
  • необходимость тестирования

Проблемы:

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

Практические сценарии использования

1. Кастомные UI-анимации

Создание уникальных форм для кнопок, уведомлений, загрузчиков

2. Генеративная графика

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

3. Игровые эффекты

Взрывы, частицы, следы движения

4. Брендированные анимации

Кастомные формы и easing для фирменного стиля

Оптимизация плагинов

  • избегать тяжелых вычислений в onUpdate
  • кешировать SVG
  • минимизировать DOM-операции

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

class CachedShape extends mojs.CustomShape {
  constructor() {
    super();
    this.cached = this.generate();
  }

  getShape() {
    return this.cached;
  }

  generate() {
    return '<circle cx="10" cy="10" r="10"/>';
  }
}

Тестирование и отладка

Методы:

  • логирование lifecycle-событий
  • проверка производительности
  • изоляция плагина

Инструменты:

  • DevTools Performance
  • console profiling

Распространение плагинов

Форматы:

  • npm-пакеты
  • ES-модули
  • CDN-скрипты

Пример экспорта:

export default MyPlugin;

Подключение:

import MyPlugin from 'mojs-plugin';
MyPlugin.install(mojs);

Подходы к разработке

  • минимальное вмешательство в ядро
  • композиция вместо наследования
  • расширение, а не модификация

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

Оглавление