Параметры анимации

Анимация в Mapbox GL JS строится вокруг управления камерой карты, переходами стилей слоёв и интерполяцией свойств. В основе лежит единая модель: любое изменение состояния карты может быть выполнено либо мгновенно, либо с плавной интерполяцией параметров во времени.

Ключевые области анимации:

  • перемещение камеры (центр, масштаб, наклон, поворот)
  • плавные переходы между состояниями карты
  • анимация свойств слоёв (paint/layout transitions)
  • управляемые “кинематографические” перемещения (flyTo, easeTo)

Камерные анимации и их параметры

easeTo — базовая анимация перехода камеры

Метод easeTo используется для плавного перемещения камеры к заданному состоянию.

Основные параметры:

  • center — координаты центра карты
  • zoom — масштаб
  • bearing — угол поворота
  • pitch — наклон
  • duration — длительность анимации в миллисекундах
  • easing — функция сглаживания
  • offset — смещение центра в пикселях
  • animate — включение/отключение анимации

Пример конфигурации:

map.easeTo({
  center: [69.5978, 42.3176],
  zoom: 10,
  bearing: 45,
  pitch: 60,
  duration: 2000,
  easing: (t) => t
});
duration

Параметр duration определяет длину анимации. При значениях:

  • 0 — мгновенный переход
  • 1000–3000 — стандартная плавная анимация
  • 5000+ — кинематографический эффект

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

easing — функция интерполяции

Функция easing принимает значение t в диапазоне от 0 до 1 и возвращает скорректированное значение прогресса.

Наиболее распространённые варианты:

  • линейная: t => t
  • ускорение в начале: t => t * t
  • плавное затухание: t => 1 - Math.pow(1 - t, 3)

Использование easing влияет на “характер” движения камеры, делая его механическим или естественным.

offset

Параметр offset задаёт смещение центра в пикселях:

map.easeTo({
  center: [69.6, 42.3],
  offset: [200, 0]
});

Применяется для:

  • смещения точки фокуса при открытии боковых панелей
  • центрирования объекта с учётом UI-элементов

flyTo — физически имитированное перемещение

Метод flyTo создаёт более сложную траекторию движения камеры, имитируя “полёт” над картой.

Ключевые параметры:

  • speed — скорость анимации
  • curve — кривизна траектории
  • bearing — направление
  • pitch — наклон
  • essential — флаг важности анимации
  • easing — функция сглаживания
map.flyTo({
  center: [69.6, 42.3],
  zoom: 12,
  speed: 1.2,
  curve: 1.5,
  pitch: 45,
  bearing: -30
});
speed

speed управляет тем, насколько быстро камера проходит маршрут.

  • 0.5 — медленный пролёт
  • 1.0 — стандарт
  • 2.0+ — ускоренный переход

При увеличении масштаба или дальних перемещениях speed становится ключевым параметром восприятия динамики.

curve

curve определяет форму траектории:

  • 1.0 — почти прямая линия

  • 1.0 — более выраженная дуга

  • <1.0 — более резкий, короткий путь

Эффект особенно заметен при перемещениях между удалёнными точками.

essential

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

jumpTo — мгновенное изменение состояния

Метод jumpTo отключает анимацию и мгновенно применяет новое состояние камеры.

map.jumpTo({
  center: [69.6, 42.3],
  zoom: 10,
  pitch: 30
});

Используется в случаях:

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

Переходы свойств слоёв (layer transitions)

Помимо камеры, Mapbox GL JS поддерживает анимацию визуальных свойств слоёв через transition.

transition в paint свойствах

Каждый слой может содержать блок переходов:

map.setPaintProperty('water-layer', 'fill-color', '#00f');

И отдельно:

map.setPaintProperty('water-layer', 'fill-color-transition', {
  duration: 1000,
  delay: 0
});
duration

Определяет длительность изменения свойства.

delay

Задаёт задержку перед началом анимации.

Примеры анимируемых свойств

  • fill-color
  • line-width
  • circle-radius
  • opacity
  • text-opacity

Каждое свойство интерполируется линейно или через встроенные функции интерполяции Mapbox.

Анимация через setStyle

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

map.setStyle('mapbox://styles/mapbox/satellite-streets-v12');

Параметры анимации здесь не задаются напрямую, но поведение зависит от:

  • сложности стиля
  • количества слоёв
  • наличия кешированных тайлов

Для управления ощущением плавности часто комбинируется с камерными анимациями:

map.easeTo({ zoom: 5, duration: 1500 });
map.setStyle('mapbox://styles/mapbox/light-v11');

Интеракция анимаций и событий

Анимационные методы связаны с событиями жизненного цикла карты:

  • movestart
  • move
  • moveend
  • zoomstart
  • zoom
  • zoomend

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

map.on('moveend', () => {
  console.log('камера завершила анимацию');
});

Параллельные анимации

Mapbox GL JS поддерживает одновременное выполнение:

  • анимации камеры
  • переходов свойств слоёв
  • обновления источников данных

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

Интерполяция и временная модель

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

  • прогресс нормализуется в диапазон [0, 1]
  • применяется easing-функция
  • вычисляются промежуточные состояния камеры или свойств

Камера представляется как набор параметров:

  • longitude / latitude
  • zoom
  • bearing
  • pitch

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

Ограничения и особенности поведения

  • слишком длинные анимации могут конфликтовать с пользовательским взаимодействием
  • быстрые повторные вызовы easeTo перезапускают интерполяцию
  • flyTo может переопределять текущую анимацию камеры
  • при низкой производительности длительные transition могут быть упрощены

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

Анимации часто привязываются к событиям интерфейса:

  • клики по маркерам
  • выбор объектов на карте
  • изменение фильтров слоёв

Пример связки:

map.on('click', (e) => {
  map.flyTo({
    center: e.lngLat,
    zoom: 14,
    speed: 1.4
  });
});

Комбинирование параметров для сложных сцен

Для построения сложных сцен обычно комбинируются:

  • flyTo для перемещения
  • pitch и bearing для ориентации
  • transition слоёв для синхронной визуализации данных
  • события moveend для запуска следующего этапа анимации

Такая композиция позволяет формировать последовательные “кадры” навигации, где карта ведёт себя как управляемая камера в пространстве.

Оглавление