Цветовые значения

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

Представления цвета и их нормализация

Цветовые значения в вебе поступают в нескольких форматах:

  • HEX (#ff0033, #f03)
  • RGB (rgb(255, 0, 51))
  • RGBA (rgba(255, 0, 51, 0.5))
  • HSL (hsl(348, 100%, 50%))
  • именованные цвета (tomato, black)

Перед анимацией любое цветовое значение приводится к унифицированной числовой модели. В Popmotion это обычно массив каналов:

  • RGB → [r, g, b]
  • RGBA → [r, g, b, a]
  • HSL → [h, s, l] или преобразованный в RGB формат

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

Интерполяция цветовых каналов

Базовый механизм анимации в Popmotion — линейная интерполяция:

[ f(t) = start + (end - start) t]

f(t) = start + (end - start) t

Для цвета это правило применяется к каждому каналу отдельно:

  • R: от r₁ до r₂
  • G: от g₁ до g₂
  • B: от b₁ до b₂

Таким образом цветовой переход превращается в движение точки в трёхмерном пространстве RGB.

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

Функция interpolate и цветовые значения

В Popmotion ключевым инструментом выступает interpolate. Она принимает диапазон значений и возвращает функцию, которая вычисляет промежуточные состояния.

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

import { interpolate } from 'popmotion';

const colorMixer = interpolate(
  ['#ff0000', '#0000ff'],
  { ease: t => t }
);

colorMixer(0);   // rgb(255, 0, 0)
colorMixer(0.5); // rgb(127, 0, 127)
colorMixer(1);   // rgb(0, 0, 255)

Внутри происходит:

  1. Парсинг HEX в RGB
  2. Преобразование в числовые каналы
  3. Интерполяция каждого канала
  4. Сборка результата обратно в строку или объект

Пространство HSL и визуальная равномерность

RGB не является перцептивно равномерным пространством. Для более естественных переходов используется HSL:

  • Hue (оттенок) — круговое значение
  • Saturation (насыщенность)
  • Lightness (светлота)

Особенность Hue — цикличность:

[ 0]

0

Это требует специальной обработки при интерполяции, чтобы переход происходил по кратчайшей дуге цветового круга.

При наивной интерполяции 350° → 10° система может пройти через весь круг (350 → 360 → 0 → 10), вместо короткого пути.

Нормализация угла оттенка

Для корректного перехода Hue применяется логика выбора минимальной разницы:

  • Δ₁ = end − start
  • Δ₂ = (end + 360) − start
  • Δ₃ = (end − 360) − start

Выбирается минимальное по модулю значение.

Это позволяет обеспечить визуально кратчайший переход оттенка.

Смешивание цветов через mix

Функция смешивания mix используется для статического или анимированного объединения двух значений.

import { mix } from 'popmotion';

const blend = mix('#ff0000', '#00ff00');

blend(0);   // красный
blend(0.5); // жёлто-зелёный
blend(1);   // зелёный

В отличие от interpolate, mix чаще используется как чистая функция без привязки к анимационному таймингу.

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

Альфа-канал и прозрачность

RGBA добавляет четвёртый канал, который интерполируется так же, как цветовые:

  • прозрачность также подчиняется линейной функции
  • 0 → полностью прозрачный
  • 1 → полностью непрозрачный

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

Финальный цвет может быть представлен как:

[ C = C_{foreground} + (1 - ) C_{background}]

C = C_{foreground} + (1 - ) C_{background}

Цвет как часть value-трекинга

В Popmotion цвет рассматривается как частный случай value-объекта. Это означает:

  • цвет можно анимировать как число
  • цвет можно комбинировать с другими свойствами (position, scale)
  • цвет может быть частью сложной анимационной сцены

При использовании value или tween цветовые значения автоматически проходят через трансформационный слой:

import { value, tween } from 'popmotion';

const color = value('#ff0000');

tween({
  from: '#ff0000',
  to: '#00ffff',
  duration: 1000
}).start(v => color.set(v));

Система сама определяет необходимость цветовой интерполяции и выбирает соответствующий трансформер.

Преобразования и производные цвета

Цветовые трансформации включают не только переходы между двумя значениями, но и вычисляемые изменения:

  • осветление/затемнение
  • изменение насыщенности
  • инверсия каналов
  • смешивание с белым или чёрным

Такие операции часто реализуются через промежуточные функции над RGB или HSL.

Осветление в HSL:

  • L = L + ΔL

При этом важно ограничивать диапазон:

  • 0 ≤ L ≤ 100

RGB-эквивалент требует пересчёта всех каналов с учётом ограничения 0–255.

Кривые анимации и влияние на цвет

Easing-функции в Popmotion изменяют параметр t до его применения в интерполяции. Это означает, что цветовые переходы подчиняются тем же законам ускорения и замедления, что и координаты или размеры.

Пример нелинейного перехода:

  • ease-in → медленное начало, ускорение в конце
  • ease-out → быстрое начало, замедление в конце
  • ease-in-out → комбинированная кривая

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

Пространственная интерпретация цвета

RGB можно рассматривать как точку в трёхмерном пространстве:

  • ось X — красный канал
  • ось Y — зелёный канал
  • ось Z — синий канал

Переход между цветами становится векторным движением:

[ (t) = + t( - )]

(t) = + t( - )

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

Ограничения линейных моделей

Линейная интерполяция имеет ряд ограничений:

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

Из-за этого в сложных визуальных системах иногда вводятся дополнительные корректирующие функции или переход в perceptual color spaces.

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

При одновременной анимации нескольких цветовых свойств возникает проблема композиции:

  • фон
  • тень
  • градиенты
  • наложения

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

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

Оглавление