Transition duration и delay

В Mapbox GL JS анимация изменений визуальных свойств карты основана на системе transition, которая управляет плавностью изменения значений paint-параметров слоёв. Вместо мгновенной смены цвета, толщины линий или прозрачности используется интерполяция во времени, задаваемая двумя ключевыми параметрами: transition duration и transition delay.

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

Transition duration: длительность анимации

Transition duration определяет время, за которое значение свойства слоя полностью переходит от старого состояния к новому. Значение задаётся в миллисекундах.

t_{transition} =

Поведение duration в Mapbox GL JS

  • Определяет скорость интерполяции между двумя значениями
  • Применяется ко всем анимируемым paint-свойствам
  • Влияет на визуальную плавность изменений при обновлении стиля

Пример: изменение цвета заливки полигона

map.setPaintProperty('cities-layer', 'fill-color', '#ff0000');

Если задан transition duration 1000 ms, цвет будет плавно изменяться в течение одной секунды.

Практическое влияние

  • 200–300 ms — быстрые интерфейсные реакции (hover, selection)
  • 500–1000 ms — стандартные визуальные переходы
  • 1500+ ms — медленные атмосферные анимации (например, климатические карты)

Transition delay: задержка перед началом анимации

Transition delay задаёт время ожидания перед началом интерполяции. Это позволяет синхронизировать изменения нескольких слоёв или создавать последовательные эффекты.

t_{start} =

Поведение delay

  • Отсчитывается с момента изменения значения свойства
  • Не влияет на скорость анимации после начала
  • Может комбинироваться с duration для сложных эффектов

Пример:

map.setPaintProperty('roads-layer', 'line-color', '#00ff00');

Если delay = 500 ms и duration = 1000 ms:

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

Глобальная настройка transition в стиле

Mapbox GL JS позволяет задать общий объект transition на уровне всего стиля.

map.setStyle({
  version: 8,
  sources: { ... },
  layers: [ ... ],
  transition: {
    duration: 800,
    delay: 0
  }
});

Особенности глобального transition

  • Применяется ко всем слоям, если у них не переопределены локальные настройки
  • Используется как дефолтное поведение
  • Упрощает синхронизацию анимаций в больших стилях

Глобальный transition особенно важен при динамической перезагрузке стиля через setStyle, так как предотвращает резкие скачки визуального состояния.

Transition на уровне слоя и свойства

Mapbox GL JS поддерживает более точечную настройку через специальные transition-поля для каждого paint-свойства.

Пример для цвета заливки

map.setPaintProperty('parks', 'fill-color-transition', {
  duration: 1200,
  delay: 200
});

Пример для линии

map.setPaintProperty('roads', 'line-width-transition', {
  duration: 600,
  delay: 0
});

Логика приоритета

При конфликте уровней применяется следующая иерархия:

  1. *-transition свойства слоя
  2. глобальный style.transition
  3. внутренние значения по умолчанию Mapbox GL JS

Интерполяция значений и роль transition

Переходы работают только для свойств, поддерживающих интерполяцию:

  • цвета (fill-color, line-color)
  • числовые параметры (line-width, opacity)
  • некоторые выражения (interpolate, step)

Не все свойства анимируются одинаково: геометрические изменения источников данных не интерполируются автоматически, если не используется expression-based styling.

Динамическое обновление через API

При использовании методов API изменения могут триггерить transition автоматически:

map.setPaintProperty('water', 'fill-opacity', 0.3);

Если ранее было значение 0.8, произойдёт плавный переход.

Частые сценарии

Hover эффект

map.setPaintProperty('state-fill', 'fill-opacity', 0.6);
  • быстрый transition (150–250 ms)
  • создаёт эффект отклика интерфейса

Активация слоя

map.setPaintProperty('heatmap', 'heatmap-intensity', 1.0);
  • медленный transition (800–1500 ms)
  • используется для визуализации постепенного появления данных

Комбинирование delay и duration

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

Пример последовательного включения слоёв:

  • слой A: delay 0 ms
  • слой B: delay 300 ms
  • слой C: delay 600 ms

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

Производительность и особенности рендеринга

Transition в Mapbox GL JS реализованы на уровне GPU-рендеринга через WebGL, поэтому:

  • интерполяция выполняется эффективно без блокировки основного потока
  • большое количество одновременно анимируемых слоёв может увеличивать нагрузку GPU
  • сложные выражения в paint-параметрах могут замедлять пересчёт состояния

Рекомендации по оптимизации:

  • избегать слишком длинных transition (>2000 ms) для интерактивных карт
  • минимизировать количество одновременно анимируемых слоёв
  • использовать opacity вместо пересчёта геометрии при визуальных переключениях

Типичные ошибки при работе с transition

Отсутствие transition-поля

Без явного задания Mapbox GL JS использует дефолтные значения, что может приводить к непредсказуемым визуальным эффектам при смене стиля.

Несовместимость свойств

Попытка анимировать неинтерполируемые свойства приводит к мгновенному изменению без перехода.

Конфликт глобальных и локальных настроек

При одновременном использовании style.transition и *-transition слоя может возникать несогласованность временных параметров, особенно при частом вызове setPaintProperty.

Частое обновление свойств

Слишком частые вызовы изменения свойств могут “перезапускать” transition, из-за чего анимация никогда не завершается.

Синхронизация визуальных изменений

Transition используется не только для эстетики, но и для координации состояний карты:

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

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

Оглавление