Цветовые переходы в анимационных системах строятся на принципе интерполяции — вычисления промежуточных значений между начальным и конечным состоянием. В mo.js цвет рассматривается как числовая модель, независимо от исходного формата записи: HEX, RGB или HSL. Внутренний механизм приводит значения к единому представлению и выполняет плавное изменение каналов.
При переходе от одного цвета к другому отдельно обрабатываются компоненты:
Каждый из каналов изменяется по функции easing, заданной в анимации. Это означает, что визуальная динамика цвета может быть линейной, ускоренной, замедленной или сложной кривой.
В mo.js цветовые переходы чаще всего применяются к объектам Shape, где доступны свойства заливки и обводки.
const circle = new mojs.Shape({
shape: 'circle',
fill: { '#ff4d4d': '#4d79ff' },
radius: 40,
duration: 1200
});
circle.play();В этом примере происходит интерполяция между двумя цветами заливки. Важно, что библиотека автоматически определяет тип значения и применяет корректный алгоритм преобразования.
Цвет может быть задан и для обводки:
const ring = new mojs.Shape({
shape: 'circle',
fill: 'none',
stroke: { '#00e5ff': '#ffcc00' },
strokeWidth: 8,
radius: 50,
duration: 1500
});Поддерживаются несколько распространённых форматов записи:
#ff0000)rgb(255, 0, 0))rgba(255, 0, 0, 0.5))hsl(0, 100%, 50%))При интерполяции mo.js приводит все значения к единому внутреннему виду. Это позволяет смешивать разные форматы без дополнительных преобразований со стороны разработчика.
fill: { 'rgb(255,0,0)': 'hsl(240,100%,50%)' }Несмотря на различие синтаксиса, переход выполняется корректно за счёт конвертации в RGB-пространство.
Цветовой переход не является изолированным процессом — он подчиняется общей временной функции анимации.
const shape = new mojs.Shape({
shape: 'rect',
fill: { '#111111': '#ffffff' },
easing: 'cubic.out',
duration: 1000
});Различные easing-функции изменяют восприятие цвета:
Цвет в таком случае перестаёт быть статической характеристикой и становится функцией времени.
В Burst-эффектах цвет часто используется для создания визуального расширения или «взрыва» частиц.
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 8,
children: {
shape: 'circle',
fill: { '#ff3d00': '#00c853' },
radius: 10,
duration: 800
}
});Каждая частица наследует собственный цветовой переход, что позволяет формировать сложные визуальные паттерны без ручного управления каждым элементом.
При увеличении количества частиц цветовые переходы начинают играть роль синхронизирующего визуального параметра.
В mo.js цвет может изменяться как непрерывно, так и дискретно.
Происходит плавное изменение каналов цвета:
fill: { '#ff0000': '#0000ff' }Цвет может меняться ступенчато через последовательность ключевых значений:
fill: {
'#ff0000': '#00ff00',
'#00ff00': '#0000ff'
}При наличии нескольких ключей интерполяция выполняется по сегментам, создавая эффект «переключения» оттенков.
Timeline в mo.js позволяет синхронизировать цветовые переходы между несколькими объектами.
const timeline = new mojs.Timeline();
timeline.add(
new mojs.Shape({
shape: 'circle',
fill: { '#ff1744': '#651fff' },
duration: 1000
}),
new mojs.Shape({
shape: 'rect',
fill: { '#00e676': '#ffea00' },
duration: 1000,
delay: 200
})
);
timeline.play();Цветовые изменения в этом контексте становятся частью временной композиции, где каждый элемент имеет собственную фазу перехода.
Цветовые переходы включают поддержку прозрачности, что позволяет создавать эффекты растворения и появления.
fill: { 'rgba(255,0,0,1)': 'rgba(255,0,0,0)' }Такие переходы особенно важны при комбинировании с трансформациями масштаба и перемещения, создавая эффект исчезновения объекта в пространстве.
Прозрачность интерполируется так же, как и цветовые каналы, что обеспечивает равномерное затухание.
Цветовые изменения влияют на восприятие скорости, направления и структуры движения. Даже при одинаковой геометрической траектории различные цветовые кривые создают разные визуальные впечатления.
Характерные эффекты:
В mo.js цвет становится не декоративным элементом, а полноценным параметром анимационной модели.
Цветовые переходы часто комбинируются с изменениями масштаба, вращения и позиции, создавая многомерные анимации.
const box = new mojs.Shape({
shape: 'rect',
fill: { '#ff6d00': '#2962ff' },
scale: { 0: 1 },
rotate: { 0: 180 },
duration: 1200
});В таких случаях цвет перестаёт быть изолированным свойством и становится частью общей трансформационной матрицы анимации.
Хотя mo.js не использует классические CSS-градиенты как основной механизм анимации, псевдоградиенты можно моделировать через последовательные цветовые ключи или множество слоёв объектов.
Пример приближения градиентного эффекта:
fill: {
'#ff0000': '#ff8f00',
'#ff8f00': '#ffff00'
}Такая структура создаёт эффект постепенного изменения спектра без явного использования gradient-объектов.
Цветовые переходы в mo.js оптимизированы для работы через requestAnimationFrame и минимизируют нагрузку на браузер. Однако сложность интерполяции возрастает при большом количестве одновременно анимируемых объектов.
Факторы влияния на производительность:
При масштабировании сцен цветовые переходы становятся одним из ключевых факторов стабильности рендеринга.
mo.js позволяет использовать пользовательские свойства, которые могут быть связаны с цветом через кастомные tween-значения.
const custom = new mojs.Tween({
duration: 2000,
onUpdate: function(progress) {
const color = `rgb(${progress * 255}, 100, 150)`;
element.style.background = color;
}
});Хотя это выходит за пределы стандартного API Shape, такой подход позволяет интегрировать цветовые переходы в любые DOM-элементы.
В рамках mo.js цвет может рассматриваться как индикатор состояния объекта:
Такой подход позволяет использовать цветовые переходы как средство кодирования логики анимации без дополнительных визуальных маркеров.