В основе системы размеров лежит параметризация геометрии анимационных примитивов через числовые значения, задающие радиусы, габариты и коэффициенты трансформации. Векторная природа рендеринга обеспечивает независимость от пиксельной плотности, однако поведение визуальных элементов напрямую зависит от выбранной модели масштабирования и контекста контейнера.
Геометрия объектов формируется через набор параметров, задающих базовые размеры:
На уровне движка отсутствует единая «сцена» с фиксированной системой координат, поэтому каждый объект интерпретирует собственные размеры относительно локального контекста.
Радиус выступает универсальной величиной для большинства форм. При его изменении пересчитывается вся внутренняя геометрия фигуры, включая точки построения пути и распределение анимационных сегментов.
Каждый анимационный объект располагается в координатной системе контейнера, который определяет границы визуализации. Контейнер чаще всего представлен DOM-элементом с позиционированием, внутри которого создаётся SVG или canvas слой.
Размер контейнера влияет на визуальное восприятие без изменения логических параметров объектов. Это создаёт разделение между:
При изменении размеров контейнера без пересчёта параметров возникает эффект визуального несоответствия: элементы сохраняют абсолютные значения, но воспринимаются иначе из-за изменения масштаба окружения.
Одним из ключевых механизмов является трансформационный коэффициент scale. Он применяется ко всей геометрии объекта как пост-операция после расчёта базовых размеров.
s =
Где коэффициент масштабирования определяет отношение конечного визуального размера к исходному.
Масштабирование применяется равномерно или по осям, в зависимости от типа трансформации. При равномерном масштабировании сохраняются пропорции формы. При раздельном изменении по осям возникает искажение геометрии, используемое для создания динамических эффектов растяжения.
Параметр радиуса оказывает прямое влияние на плотность визуальных элементов в композиции. При увеличении радиуса:
При уменьшении радиуса наблюдается обратный эффект: траектории становятся более компактными, а взаимодействие элементов — более плотным.
Особое значение имеет соотношение радиуса и количества элементов в burst-композициях. При фиксированном числе частиц изменение радиуса приводит к перераспределению угловых интервалов и изменению плотности распределения.
Составные фигуры, включающие несколько геометрических примитивов, требуют синхронного масштабирования всех внутренних компонентов. В таких случаях используется общий коэффициент трансформации, применяемый ко всей группе элементов.
При этом сохраняются следующие зависимости:
Это разделение позволяет изменять визуальный размер без влияния на динамику движения.
Толщина линий представляет отдельный параметр, который может масштабироваться как вместе с геометрией, так и независимо. В зависимости от выбранной стратегии возникает два режима поведения:
Фиксированная модель используется для сохранения визуальной читаемости на разных масштабах. Пропорциональная модель применяется для сохранения естественного восприятия формы, где толщина линий является частью геометрии.
Для адаптивных интерфейсов используется относительная система измерений. Размеры вычисляются на основе параметров контейнера или окна.
Типичные зависимости включают:
w_{rel} = w_{container} k
Такой подход позволяет сохранять согласованность визуальной структуры при изменении размеров экрана без необходимости пересчёта каждого параметра вручную.
При изменении размеров viewport возникает задача синхронизации координатной системы и визуальных объектов. Основная сложность заключается в том, что изменение ширины и высоты редко происходит пропорционально.
При асимметричном изменении возникают эффекты:
Для компенсации используются пересчёты базовых коэффициентов масштабирования, зависящие от минимального из измерений контейнера.
k = (, )
Такой коэффициент обеспечивает сохранение пропорций при адаптации к изменяющемуся пространству.
В композициях типа burst масштабирование затрагивает не только радиус распространения частиц, но и угловое распределение. Увеличение масштаба приводит к:
При этом центральная точка остаётся фиксированной, что создаёт эффект «расширения из ядра».
При уменьшении масштаба частицы концентрируются ближе к центру, формируя более плотные кластеры.
В зависимости от режима рендеринга применяются различные механизмы масштабирования:
Каждый из методов имеет собственные особенности интерполяции. SVG обеспечивает точную геометрию, CSS — высокую производительность, canvas — максимальную гибкость при сложной отрисовке.
При комбинировании подходов возникает необходимость согласования коэффициентов масштабирования между слоями, чтобы избежать рассинхронизации визуальных элементов.
Точка трансформации определяет, относительно какого центра выполняется изменение размера. При смещённом центре масштабирование приводит к эффекту «смещения массы» визуального объекта.
Выделяются основные режимы:
При неправильной настройке центра возникают визуальные артефакты, выражающиеся в скачкообразных смещениях композиции.
В сложных сценах масштабирование применяется на нескольких уровнях:
Иерархия позволяет комбинировать эффекты без пересчёта всех параметров вручную. При этом итоговый размер каждого элемента определяется произведением коэффициентов всех уровней.
S_{total} = S_{global} S_{group} S_{local}
Такой подход обеспечивает гибкость при создании сложных анимационных структур с независимым управлением компонентами.
Человеческое восприятие размера нелинейно, поэтому линейное масштабирование не всегда соответствует визуальной логике. Для компенсации используются корректирующие коэффициенты, имитирующие логарифмическое или степенное восприятие.
При увеличении масштаба может применяться замедляющий коэффициент, уменьшающий визуальную экспансию элементов. При уменьшении — ускоряющий коэффициент, усиливающий ощущение динамики.
Такое преобразование позволяет сохранять визуальный баланс в композициях независимо от абсолютных размеров объектов.