Оживление углерода, хранящегося в каждом дереве на планете

Автор: Микель Марон

В преддверии COP27 нас попросили создать анимационное видео об углероде, хранящемся в каждом дереве на планете, для невероятных CTree . Мы были на пределе возможностей в отношении Climate TRACE и всего остального в Earthrise… но не смогли устоять перед вызовом. В результате получилась эффективная анимация с использованием шаблона Mapbox Globe и сторителлинга .

«Спрос» был для видео, которое масштабировалось, панорамировалось и медленно вращалось по лесам и другим ландшафтам по всему миру, иллюстрируя подробный анализ углерода CTrees.

Сначала мы рассмотрели различные подходы к прохождению путей в Mapbox, такие как River Runner и кинематографические анимации маршрута Тур де Франс , а также GL Director , созданный Development Seed при запуске Mapbox 3D Terrain, но они не позволяли управлять камерой. нам нужно. Шаблон Storytelling оказался идеальным решением — он обеспечивает точное управление камерой и анимированные переходы между каждой текстовой главой истории с помощью простого файла конфигурации. Это элегантное и простое решение широко применяется и модифицируется для журналистики данных. Движение обычно контролируется прокруткой страницы вниз. Что, если это движение просто произошло автоматически без какого-либо вмешательства?Чтобы добиться только эффекта анимации земного шара без истории, потребуется только скрыть текстовое поле для каждой главы.

После нескольких итераций для реализации правильного поведения оказалось, что для этого требуется всего несколько дополнений к шаблону Storytelling. Ключевым изменением стала автоматическая прокрутка к следующей главе после окончания анимированного перехода. Шаблон Storytelling создает элементы HTML для каждой главы на основе конфигурации, а затем использует прокрутку для запуска движения и изменений на карте при встрече с каждой главой. Scrollama присваивает атрибут data-scrollama-index каждому элементу главы в истории. Поэтому, когда анимация останавливается, мы запрашиваем следующий элемент scrollama и прокручиваем его. Это сработало!

if (config.auto) {
  var next_chapter = (current_chapter + 1) % config.chapters.length;
  map.once('moveend', () => {
    document.querySelectorAll(
      '[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
  });
}

Небольшие изменения могут иметь большие результаты. Мы надеемся, что это дополнение к Storytelling окажется полезным для других. Поделитесь, как вы оживляете свои глобусы!