Сохранение пропорций

Lottie-анимации основаны на композиции, созданной в After Effects и экспортированной через Bodymovin. Центральная единица измерения — размеры композиции (width/height), которые определяют исходное соотношение сторон. Любое отклонение от этого соотношения при рендеринге приводит к искажению графики, если не заданы корректные правила масштабирования.

Сохранение пропорций в Lottie Web реализуется через сочетание параметров рендера, контейнерной верстки и поведения SVG/Canvas на уровне браузера.

Базовое соотношение сторон композиции

Исходное соотношение сторон задаётся формулой:

a =

Это значение фиксируется в JSON-анимации в полях w и h. Например:

{
  "w": 800,
  "h": 600
}

Соотношение 4:3 становится эталоном для всех последующих масштабирований.

При любом изменении контейнера важно сохранять:

= const

Поведение SVG-рендера и preserveAspectRatio

При использовании SVG (renderer: "svg") ключевую роль играет атрибут preserveAspectRatio, который Lottie Web устанавливает автоматически, но может быть переопределён через настройки.

Типовое значение:

preserveAspectRatio="xMidYMid meet"

Семантика значений

  • xMidYMid — центрирование по обеим осям
  • meet — масштабирование с сохранением пропорций без обрезки
  • slice — заполнение контейнера с возможным обрезанием

Поведение:

  • meet сохраняет всю композицию целиком
  • slice заполняет область, но может обрезать края
  • none растягивает без сохранения пропорций

Настройки Lottie Web для управления масштабом

Основная точка конфигурации:

lottie.loadAnimation({
  container: element,
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "animation.json",
  rendererSettings: {
    preserveAspectRatio: "xMidYMid meet"
  }
});

Параметр rendererSettings.preserveAspectRatio влияет только на SVG-режим. В Canvas-режиме поведение определяется масштабированием контекста.

Масштабирование контейнера и CSS-ограничения

Наиболее стабильный способ сохранения пропорций — управление через контейнер:

.lottie-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Альтернативный вариант без aspect-ratio:

.lottie-wrapper {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

Внутренний canvas или svg растягивается:

.lottie-wrapper svg,
.lottie-wrapper canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

Canvas-рендер и внутреннее масштабирование

При renderer: "canvas" отсутствует SVG-атрибут preserveAspectRatio. Вместо этого используется масштабирование контекста:

  • фиксируется логический размер композиции
  • применяется scale-фактор по меньшей стороне

Формула масштабирования:

s = (, )

где:

  • W, H — размеры контейнера
  • w, h — размеры композиции

Это обеспечивает режим contain по умолчанию.

Режимы масштабирования и визуальная логика

Contain (сохранение полной видимости)

  • сохраняются пропорции
  • возможны пустые поля
  • используется минимальный коэффициент масштабирования

Cover (заполнение области)

  • пропорции сохраняются
  • края могут обрезаться
  • используется максимальный коэффициент масштабирования

s = (, )

Центрирование композиции

При масштабировании сохраняется точка привязки:

  • центр композиции (default)
  • координаты трансформации: transform-origin: 50% 50%

Для SVG это выражается через:

xMidYMid

Для canvas — через смещение контекста перед отрисовкой.

Адаптивное изменение размеров

При изменении размеров окна требуется пересчёт масштабного коэффициента. Типовой алгоритм:

function resizeAnimation(anim, container, w, h) {
  const cw = container.clientWidth;
  const ch = container.clientHeight;

  const scale = Math.min(cw / w, ch / h);

  anim.setRendererSettings({
    clearCanvas: true
  });

  anim.resize();
}

В большинстве реализаций Lottie Web пересчёт происходит автоматически, но при нестандартных контейнерах требуется ручное управление.

Переполнение и обрезка контента

При несоответствии пропорций возникают три сценария:

  1. Letterboxing — пустые поля по бокам
  2. Pillarboxing — пустые поля сверху/снизу
  3. Cropping — обрезка краёв

Поведение зависит от комбинации:

  • CSS контейнера
  • preserveAspectRatio
  • режима масштабирования canvas

Влияние viewBox на SVG-отрисовку

SVG-режим использует внутренний viewBox, совпадающий с размером композиции:

viewBox="0 0 800 600"

Любое несоответствие контейнера этому прямоугольнику приводит к масштабированию всей сцены как единого блока без деформации элементов.

Типовые ошибки при нарушении пропорций

  • фиксированная высота без учёта ширины контейнера
  • отсутствие aspect-ratio или padding-хаков
  • принудительное растяжение canvas через CSS без внутреннего scale
  • отключение preserveAspectRatio
  • смешивание SVG и canvas подходов в одном интерфейсе

Стабильная модель масштабирования

Корректное поведение достигается при трёх условиях:

  • контейнер хранит пропорции композиции
  • рендер сохраняет aspect ratio
  • масштабирование основано на минимальном коэффициенте по осям
Оглавление