FlyTo, jumpTo, easeTo

В Mapbox GL JS управление камерой карты реализовано через набор методов, которые позволяют программно изменять положение, масштаб, наклон и вращение вида. Среди базовых инструментов навигации ключевую роль играют flyTo, jumpTo и easeTo. Эти методы решают одну задачу — перемещение камеры — но делают это принципиально разными способами: мгновенно, плавно или с имитацией «полёта».

Общая модель камеры

Камера в Mapbox GL JS описывается объектом состояния, включающим:

  • center — координаты центра карты
  • zoom — уровень масштабирования
  • bearing — угол поворота карты
  • pitch — наклон камеры

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

jumpTo: мгновенное перемещение камеры

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

Сигнатура

map.jumpTo(options);

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

map.jumpTo({
  center: [longitude, latitude],
  zoom: number,
  bearing: number,
  pitch: number
});

Поведение

jumpTo изменяет состояние карты без промежуточных кадров. Камера «телепортируется» в новое положение.

Когда использовать

  • При необходимости мгновенного переключения между состояниями
  • В интерфейсах, где анимация нежелательна (например, кнопки быстрого перехода)
  • При синхронизации с внешними событиями (фильтры, слои, табы)

Особенности

  • Не нагружает GPU анимацией
  • Может выглядеть резким для пользователя
  • Подходит для логических переходов, а не визуальных эффектов

easeTo: управляемая плавная анимация

Метод easeTo обеспечивает плавное перемещение камеры с контролем кривой анимации и длительности.

Сигнатура

map.easeTo(options);

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

map.easeTo({
  center: [lng, lat],
  zoom: number,
  duration: number,
  easing: function,
  bearing: number,
  pitch: number,
  offset: [x, y]
});

Поведение

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

Ключевой параметр easing

easing: (t) => t
  • t — прогресс анимации от 0 до 1
  • Позволяет задавать собственную кривую движения
  • Например, ускорение в начале и замедление в конце

Пример использования

map.easeTo({
  center: [37.6173, 55.7558],
  zoom: 10,
  duration: 1500,
  easing: (t) => t * (2 - t)
});

Особенности

  • Баланс между контролем и визуальной плавностью
  • Подходит для пользовательской навигации
  • Позволяет создавать «интерактивные переходы»

flyTo: имитация полёта камеры

Метод flyTo создаёт анимацию, напоминающую полёт над картой: камера сначала отдаляется, затем перемещается по дуге и приближается к цели.

Сигнатура

map.flyTo(options);

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

map.flyTo({
  center: [lng, lat],
  zoom: number,
  speed: number,
  curve: number,
  easing: function,
  essential: boolean
});

Поведение

flyTo разбивает движение камеры на траекторию, имитирующую физическое перемещение в пространстве. В отличие от easeTo, траектория не линейная, а дугообразная.

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

speed

Определяет скорость анимации. Чем выше значение, тем быстрее происходит «полёт».

speed: 1.2

curve

Контролирует кривизну траектории:

  • Малые значения — более «плоский» путь
  • Большие значения — выраженная дуга
curve: 1.5

essential

Флаг важности анимации:

essential: true

Используется для доступности интерфейса, чтобы учитывать системные настройки уменьшенной анимации.

Пример использования

map.flyTo({
  center: [2.3522, 48.8566],
  zoom: 12,
  speed: 1.6,
  curve: 1.2
});

Особенности

  • Наиболее выразительный метод навигации
  • Подходит для сторителлинга и визуальных переходов
  • Создаёт эффект пространственного перемещения
  • Требует больше вычислений, чем easeTo и jumpTo

Сравнение методов

jumpTo

  • Мгновенное изменение
  • Нет анимации
  • Минимальная нагрузка
  • Используется для логических переключений

easeTo

  • Плавная линейно-кривая анимация
  • Полный контроль над easing
  • Средний уровень сложности
  • Универсальный вариант

flyTo

  • Пространственная анимация с дугой
  • Автоматическая траектория полёта
  • Высокая визуальная выразительность
  • Подходит для презентационных сценариев

Взаимодействие с текущим состоянием камеры

Все три метода работают относительно текущего состояния карты. Это означает:

  • Если указаны только zoom, остальные параметры сохраняются
  • Частичное обновление не сбрасывает состояние камеры
  • Анимации могут прерываться новым вызовом метода

Прерывание и цепочки вызовов

Любой новый вызов flyTo, easeTo или jumpTo немедленно отменяет текущую анимацию.

Это позволяет создавать динамические сценарии:

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

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

Переключение между слоями данных

map.jumpTo({
  center: layerCenter,
  zoom: 8
});

Плавное приближение к объекту

map.easeTo({
  center: feature.geometry.coordinates,
  zoom: 14,
  duration: 1000
});

Презентационный полёт к локации

map.flyTo({
  center: [13.4050, 52.5200],
  zoom: 13,
  speed: 1.3,
  curve: 1.4
});

Поведение при ограничениях карты

Если установлены ограничения (maxZoom, minZoom, maxBounds), методы навигации учитывают их автоматически:

  • камера не выйдет за границы
  • zoom будет зажат в допустимом диапазоне
  • анимация адаптируется к ограничениям без ошибок

Особенности производительности

  • jumpTo — практически нулевая нагрузка
  • easeTo — линейная нагрузка, зависит от длительности
  • flyTo — наиболее затратный из-за вычисления траектории

При большом количестве частых вызовов рекомендуется:

  • избегать параллельных анимаций
  • использовать debounce для событий мыши
  • ограничивать длительность анимации

Работа с offset

Во всех методах можно использовать смещение центра:

offset: [100, -50]

Это позволяет:

  • сместить фокус карты под UI-элементы
  • выделить объект не строго по центру
  • адаптировать интерфейс под панели и модальные окна

Взаимодействие с пользовательскими событиями

Навигационные методы часто привязываются к:

  • click на маркерах
  • событиям слоёв (layer)
  • поисковым запросам
  • изменению фильтров данных

Каждое событие может инициировать один из трёх типов перемещения, в зависимости от требуемого UX: мгновенного, плавного или выразительного.

Оглавление