Linear, exponential, cubic-bezier

В системе выражений Mapbox GL JS ключевую роль играет механизм интерполяции значений. Он используется для динамического изменения визуальных свойств слоёв в зависимости от масштаба, данных или других параметров. Основные режимы интерполяции — linear, exponential и cubic-bezier — определяют характер перехода между контрольными точками (stops) и позволяют управлять визуальной плавностью и акцентами карты.

Базовая структура interpolate

Интерполяция в стиле Mapbox GL JS реализуется через выражение:

[
  "interpolate",
  [<type>, <parameters?>],
  <input>,
  <stop1>, <value1>,
  <stop2>, <value2>,
  ...
]
  • input — переменная (чаще всего zoom или свойство данных)
  • stops — пары значений, между которыми происходит переход
  • type — способ интерполяции

Наиболее часто используемые типы:

  • "linear"
  • "exponential"
  • "cubic-bezier"

Linear интерполяция

Принцип работы

Линейная интерполяция задаёт равномерное изменение значения между двумя контрольными точками. График зависимости представляет собой прямую линию.

[
  "interpolate",
  ["linear"],
  ["zoom"],
  5, 0.5,
  10, 1.0
]

Поведение

Если zoom изменяется от 5 до 10, значение плавно растёт от 0.5 до 1.0 с постоянной скоростью.

Формально:

[ t = ]

[ value = v_0 + t (v_1 - v_0)]

Особенности применения

  • равномерное изменение без ускорения
  • предсказуемое поведение
  • используется для простых визуальных переходов

Типичные сценарии

  • увеличение толщины линий при приближении
  • плавное изменение прозрачности
  • базовые переходы между состояниями
"line-width": [
  "interpolate",
  ["linear"],
  ["zoom"],
  3, 1,
  10, 5
]

Exponential интерполяция

Принцип работы

Exponential интерполяция вводит нелинейное изменение скорости перехода. Значения изменяются быстрее или медленнее в зависимости от параметра base.

[
  "interpolate",
  ["exponential", 2],
  ["zoom"],
  5, 0.5,
  10, 1.0
]

Математическая модель

Функция использует степень:

[ t = ]

[ value = v_0 + t^{base}(v_1 - v_0)]

  • base = 1 → линейное поведение
  • base > 1 → ускорение в конце
  • 0 < base < 1 → ускорение в начале

Поведение при разных base

base = 2

  • медленное начало
  • резкое ускорение ближе к конечной точке

base = 0.5

  • резкое изменение в начале
  • замедление к концу

Практическое применение

Exponential интерполяция часто используется там, где требуется:

  • подчеркнуть визуальные изменения на определённых масштабах
  • усилить эффект приближения
  • создать ощущение «появления» объектов
"circle-radius": [
  "interpolate",
  ["exponential", 1.5],
  ["zoom"],
  5, 2,
  12, 20
]

Сравнение с linear

  • linear даёт равномерный рост
  • exponential управляет распределением «внимания» по диапазону значений
  • exponential позволяет смещать визуальный акцент

Cubic-bezier интерполяция

Общая идея

Cubic-bezier интерполяция заимствована из CSS-анимаций и позволяет задавать произвольную кривую перехода с помощью двух контрольных точек.

[
  "interpolate",
  ["cubic-bezier", 0.2, 0.8, 0.3, 1.0],
  ["zoom"],
  5, 0.5,
  10, 1.0
]

Геометрический смысл

Кривая задаётся четырьмя точками:

  • (0, 0)
  • (x1, y1)
  • (x2, y2)
  • (1, 1)

Контрольные точки:

  • x1, y1 — первая управляющая точка
  • x2, y2 — вторая управляющая точка

Поведение

Cubic-bezier позволяет:

  • моделировать ускорение и замедление
  • создавать естественные анимационные кривые
  • точно контролировать динамику изменения

Типовые профили кривых

ease-out

["cubic-bezier", 0.0, 0.0, 0.58, 1.0]
  • быстрое начало
  • плавное завершение

ease-in

["cubic-bezier", 0.42, 0.0, 1.0, 1.0]
  • медленное начало
  • ускорение в конце

ease-in-out

["cubic-bezier", 0.42, 0.0, 0.58, 1.0]
  • плавное начало и конец
  • ускорение в середине

Использование в Mapbox GL JS

"opacity": [
  "interpolate",
  ["cubic-bezier", 0.4, 0.0, 0.2, 1.0],
  ["zoom"],
  6, 0,
  8, 1
]

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

Сравнение трёх методов интерполяции

Linear

  • равномерное изменение
  • минимальная сложность
  • предсказуемость

Exponential

  • управляемая нелинейность
  • усиление визуального эффекта
  • настройка через base

Cubic-bezier

  • максимальная гибкость
  • сложное управление кривой
  • имитация физически естественного движения

Влияние интерполяции на визуальную иерархию карты

В Mapbox GL JS интерполяция напрямую влияет на восприятие пространственной информации:

  • линейная интерполяция формирует стабильную геометрию отображения
  • exponential управляет появлением объектов по масштабу
  • cubic-bezier создаёт «поведенческие» анимации, приближенные к естественным переходам

Интерполяция в связке с zoom-функциями

Наиболее частый сценарий — зависимость от масштаба карты:

[
  "interpolate",
  ["exponential", 1.2],
  ["zoom"],
  0, 0.2,
  5, 0.5,
  10, 1,
  14, 2
]

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

Множественные stops и поведение кривой

Количество контрольных точек напрямую влияет на характер интерполяции:

  • 2 точки → простая линейная/кривая зависимость
  • 3+ точек → сегментированная функция
  • увеличение числа stops усиливает локальный контроль

Пример:

[
  "interpolate",
  ["linear"],
  ["zoom"],
  3, 0,
  6, 0.3,
  9, 0.8,
  12, 1
]

Комбинирование с другими выражениями

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

  • case
  • match
  • step
  • арифметические выражения

Пример:

[
  "interpolate",
  ["exponential", 1.8],
  ["get", "population"],
  0, 1,
  1000000, 5
]

Здесь интерполяция работает не по zoom, а по данным слоя.

Практическая роль выбора типа интерполяции

Выбор метода влияет не только на визуальную эстетику, но и на читаемость карты:

  • linear — подходит для технических карт
  • exponential — для карт с плотной информацией и масштабной иерархией
  • cubic-bezier — для интерфейсных и интерактивных эффектов

Поведение на границах диапазона

Во всех типах интерполяции значения за пределами stops:

  • фиксируются на первом/последнем значении
  • не экстраполируются по умолчанию

Оптимизация визуальных переходов

В Mapbox GL JS интерполяция влияет на производительность рендеринга:

  • сложные cubic-bezier выражения увеличивают вычислительную нагрузку
  • большое количество stops повышает стоимость пересчёта стилей
  • exponential с высоким base может вызывать резкие визуальные скачки при быстром zoom
Оглавление