Цвет заливки и обводки

В библиотеке mo.js цветовая модель анимаций строится вокруг двух основных визуальных свойств графических примитивов и форм: fill (заливка) и stroke (обводка). Эти параметры определяют внешний вид объектов Shape, Burst, Html и других визуальных сущностей.

Fill отвечает за внутреннюю заливку фигуры. Stroke определяет цвет линии обводки, окружающей форму.

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

Форматы задания цвета

mo.js поддерживает стандартные веб-форматы цвета, что делает интеграцию с CSS интуитивной:

HEX

fill: '#ff6b6b',
stroke: '#1e90ff'

HEX-формат используется чаще всего благодаря компактности и совместимости с дизайнерскими инструментами.

RGB / RGBA

fill: 'rgb(255, 107, 107)',
stroke: 'rgba(30, 144, 255, 0.8)'

RGBA позволяет управлять прозрачностью через альфа-канал, что особенно полезно при наложении анимаций.

HSL / HSLA

fill: 'hsl(0, 100%, 70%)',
stroke: 'hsla(210, 100%, 56%, 0.9)'

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

Базовое использование fill и stroke в Shape

Основная модель применения реализуется через объект Shape.

const shape = new mojs.Shape({
  shape: 'circle',
  fill: '#ff6b6b',
  stroke: '#1e90ff',
  strokeWidth: 8,
  radius: 40
});

shape.play();

Поведение параметров

  • fill задаёт внутреннюю заливку круга
  • stroke формирует внешнюю обводку
  • strokeWidth управляет толщиной линии

При отсутствии fill форма становится прозрачной внутри. При отсутствии stroke отсутствует контур.

Анимация цвета fill и stroke

Один из ключевых механизмов mo.js — интерполяция значений свойств во времени.

Переход fill

const shape = new mojs.Shape({
  shape: 'rect',
  fill: { '#ff6b6b': '#4ecdc4' },
  radius: 30,
  duration: 1000
});

Цвет плавно интерполируется от одного значения к другому в течение заданного времени.

Переход stroke

const shape = new mojs.Shape({
  shape: 'circle',
  stroke: { '#1e90ff': '#ff6b6b' },
  strokeWidth: 6,
  radius: 50,
  duration: 1200
});

Обводка может анимироваться независимо от заливки, создавая эффект «перекраски» контура.

Одновременная анимация fill и stroke

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

const shape = new mojs.Shape({
  shape: 'polygon',
  fill: { '#ff6b6b': '#ffe66d' },
  stroke: { '#1e90ff': '#4ecdc4' },
  strokeWidth: 10,
  radius: 60,
  duration: 1500
});

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

Ключевые кадры цвета

mo.js поддерживает многоточечную интерполяцию через массивы значений.

const shape = new mojs.Shape({
  shape: 'circle',
  fill: {
    '#ff6b6b': '#ffe66d': '#4ecdc4'
  },
  duration: 2000
});

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

Управление динамикой изменения цвета

Цветовые переходы подчиняются системе easing, как и любые другие параметры.

const shape = new mojs.Shape({
  shape: 'circle',
  fill: { '#ff6b6b': '#4ecdc4' },
  easing: 'cubic.out',
  duration: 1000
});

Влияние easing на цвет:

  • linear — равномерный переход
  • quad.in/out — ускорение/замедление
  • cubic.out — резкое начало и плавное завершение

StrokeWidth как визуальный усилитель цвета

Обводка в mo.js часто используется совместно с анимацией цвета для усиления визуального эффекта.

const shape = new mojs.Shape({
  shape: 'circle',
  stroke: { '#ffffff': '#000000' },
  strokeWidth: { 2: 12 },
  fill: 'none',
  radius: 40,
  duration: 1200
});

Изменение толщины обводки усиливает восприятие цветового перехода.

Прозрачность и цветовые эффекты

Alpha-канал позволяет создавать эффекты исчезновения или появления.

const shape = new mojs.Shape({
  shape: 'rect',
  fill: { 'rgba(255, 107, 107, 1)': 'rgba(255, 107, 107, 0)' },
  stroke: '#1e90ff',
  strokeWidth: 5,
  radius: 30,
  duration: 800
});

Такая техника часто используется для fade-out анимаций.

Генеративные цвета через функции

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

const shape = new mojs.Shape({
  shape: 'circle',
  fill: function () {
    return `hsl(${Math.random() * 360}, 100%, 60%)`;
  },
  radius: 40,
  duration: 1000
});

Каждый запуск создаёт новый оттенок, сохраняя структуру анимации.

Цвет в Burst-анимациях

В Burst цветовые параметры часто применяются к дочерним формам.

const burst = new mojs.Burst({
  radius: { 0: 100 },
  count: 8,
  children: {
    shape: 'circle',
    fill: { '#ff6b6b': '#ffe66d' },
    stroke: '#1e90ff',
    strokeWidth: 4,
    duration: 1000
  }
});

Каждый элемент burst наследует цветовую анимацию, но может иметь независимую вариативность.

SVG и особенности работы с fill/stroke

mo.js работает поверх DOM/SVG, поэтому fill и stroke фактически соответствуют SVG-атрибутам:

  • fill → fill
  • stroke → stroke
  • strokeWidth → stroke-width

Это позволяет совмещать mo.js-анимации с ручной SVG-разметкой.

const shape = new mojs.Shape({
  shape: 'circle',
  parent: document.querySelector('svg'),
  fill: '#ff6b6b',
  stroke: '#1e90ff',
  strokeWidth: 3
});

Интерполяция сложных цветовых переходов

При анимации mo.js использует внутренний механизм преобразования цветов в числовое пространство, что позволяет:

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

Пример смешанного задания:

const shape = new mojs.Shape({
  shape: 'circle',
  fill: { '#ff6b6b': 'rgba(30,144,255,0.5)' },
  duration: 1500
});

Типичные ошибки при работе с fill и stroke

Отсутствие fill при сложной форме

Некоторые формы могут визуально «исчезать», если не задан fill или stroke:

fill: 'none',
stroke: 'none'

Конфликт прозрачностей

Одновременное использование прозрачного fill и stroke может приводить к слабой читаемости анимации.

Несовместимые цветовые форматы

Хотя mo.js поддерживает большинство форматов, смешивание нестандартных строк может привести к некорректной интерполяции.

Композиция цветовых анимаций

Сложные эффекты достигаются комбинацией нескольких параметров:

  • fill как основной цветовой слой
  • stroke как контурный акцент
  • strokeWidth как динамический усилитель
  • easing как управление восприятием перехода
const shape = new mojs.Shape({
  shape: 'polygon',
  fill: { '#ff6b6b': '#4ecdc4' },
  stroke: { '#ffffff': '#1e90ff' },
  strokeWidth: { 1: 10 },
  radius: 50,
  duration: 1600,
  easing: 'cubic.out'
});
Оглавление