Анимация по времени

Kepler.gl строится вокруг концепции временного измерения как полноценной оси визуализации. Любой слой, фильтр или анимационный режим опирается на явное или неявное наличие временного поля в данных. Временная анимация в этой системе не является отдельным модулем — она встроена в состояние фильтров и в логику рендеринга слоёв.

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

Подготовка данных для временной анимации

Ключевое требование — наличие поля времени в одном из поддерживаемых форматов:

  • UNIX timestamp (в миллисекундах или секундах)
  • ISO 8601 строка даты
  • числовое представление времени (реже, для кастомных шкал)

При загрузке данных Kepler.gl пытается автоматически определить тип поля, но корректная работа анимации зависит от строгой типизации.

Типичная структура записи:

  • координаты (latitude, longitude)
  • временное поле (timestamp, datetime, date)
  • дополнительные атрибуты (категории, значения, идентификаторы)

Ошибки в формате времени приводят к невозможности построения временного фильтра или к деградации анимации до статического отображения.

Временные фильтры как основа анимации

Вся логика временного движения в Kepler.gl реализована через фильтры visState.filters. Каждый фильтр может быть привязан к временной шкале и включать режим анимации.

Основные параметры временного фильтра:

  • dataId — источник данных
  • name — имя временного поля
  • typetimeRange
  • value — текущий диапазон отображения
  • animationWindow — режим окна анимации
  • speed — скорость проигрывания
  • enabled — активность анимации

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

Ключевые режимы окна:

  • full — отображение полного накопленного диапазона
  • incremental — добавление данных без удаления предыдущих
  • point — отображение строго одного момента времени

Механика временного слайдера

Интерфейс временной анимации строится вокруг временного слайдера, который управляет:

  • текущей позицией времени
  • диапазоном воспроизведения
  • границами данных
  • скоростью изменения

Слайдер синхронизирован с состоянием Redux-структуры Kepler.gl, где каждое изменение положения приводит к пересчёту видимых объектов.

При проигрывании:

  1. вычисляется текущий временной интервал
  2. фильтруются данные по условию попадания в диапазон
  3. обновляется состояние слоёв
  4. перерисовывается WebGL-сцена

Анимация точечных слоёв

Point Layer является базовым инструментом для временной визуализации. Каждый объект имеет момент появления и исчезновения в зависимости от временного фильтра.

Поведение точек во времени определяется:

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

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

Trip Layer и непрерывное движение

Отдельный класс временной визуализации — Trip Layer, предназначенный для отображения траекторий движения.

Структура данных для траекторий:

  • массив координат
  • массив временных меток
  • идентификатор маршрута

В отличие от статических точек, Trip Layer формирует непрерывную линию движения, где каждая точка траектории активируется последовательно.

Особенности:

  • интерполяция между точками
  • контроль “хвоста” движения (trail length)
  • возможность ускоренного воспроизведения

Внутренне траектория интерпретируется как временной граф, где каждое ребро активируется в зависимости от текущего времени анимации.

Параметры воспроизведения

Система анимации в Kepler.gl предоставляет набор управляющих параметров:

  • speed — скорость прогресса времени
  • timeFormat — формат отображения времени
  • currentTime — текущее положение на шкале
  • startTime / endTime — границы анимации
  • isAnimating — состояние проигрывания

Скорость влияет не на данные напрямую, а на шаг изменения временного окна между кадрами рендера.

Управление состоянием анимации

Вся временная логика хранится в глобальном состоянии приложения. Изменения происходят через действия (actions), которые обновляют:

  • фильтры
  • параметры визуализации
  • состояние проигрывания

Типичная последовательность обновления:

  • dispatch изменения времени
  • пересчёт фильтрации данных
  • обновление слоя
  • перерендер WebGL canvas

При этом Kepler.gl минимизирует перерасчёты, используя мемоизацию и частичное обновление геометрии.

Интерполяция и сглаживание времени

Для повышения визуальной плавности используется интерполяция между временными значениями. Это особенно важно при:

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

Интерполяция применяется:

  • к координатам (для движущихся объектов)
  • к значениям фильтров
  • к параметрам визуализации (например, opacity или size)

Работа с временными зонами

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

  • локальное время источника данных
  • UTC-нормализацию
  • смещение временных зон

Ошибки в нормализации приводят к сдвигам траекторий и разрыву временной логики отображения.

Рекомендуется приводить все данные к UTC перед загрузкой в Kepler.gl, чтобы исключить неоднозначность интерпретации.

Производительность временной анимации

При работе с большими датасетами временная анимация становится ресурсоёмкой задачей. Основные узкие места:

  • фильтрация миллионов записей по времени
  • пересчёт геометрии слоёв
  • рендер WebGL сцен

Оптимизации включают:

  • предагрегацию данных по временным бинам
  • использование бинарных форматов (Arrow)
  • сокращение количества уникальных временных точек
  • ограничение частоты обновления кадров

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

Каждый слой Kepler.gl может по-разному реагировать на временные изменения:

  • Point Layer — включение/исключение объектов
  • Arc Layer — изменение активности дуг
  • Line Layer — динамическое отображение сегментов
  • Heatmap Layer — изменение плотности во времени
  • Grid/Hexagon Layer — пересчёт агрегатов

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