Ożywianie węgla przechowywanego w każdym drzewie na planecie

Autor: Mikel Maron

W intensywnych przygotowaniach do COP27 poproszono nas o stworzenie animowanego filmu o węglu zmagazynowanym w każdym drzewie na planecie dla niesamowitego CTrees . Byliśmy całkowicie skupieni na Climate TRACE i wszystkim innym w Earthrise… ale nie mogliśmy się oprzeć wyzwaniu. Rezultatem była efektowna animacja z użyciem Mapbox Globe i szablonu opowiadania historii .

„Zapytanie” dotyczyło filmu, który powiększał, przesuwał i obracał się powoli w lasach i innych krajobrazach na całym świecie, ilustrując szczegółową analizę węgla przeprowadzoną przez CTrees.

Na początku rozważaliśmy różne podejścia podążania ścieżkami Mapbox, takie jak River Runner i kinowe animacje tras Tour de France oraz GL Director stworzone przez Development Seed podczas premiery Mapbox 3D Terrain, ale nie pozwalały one na sterowanie kamerą potrzebowaliśmy. Szablon Storytelling okazał się idealnym rozwiązaniem — umożliwia precyzyjne sterowanie kamerą i animowane przejścia przez każdy tekstowy rozdział opowieści za pomocą prostego pliku konfiguracyjnego. Jest to eleganckie i proste rozwiązanie, które zostało szeroko przyjęte i zmodyfikowane na potrzeby dziennikarstwa danych. Ruch jest zwykle kontrolowany przez przewijanie strony w dół. Co by było, gdyby ten ruch po prostu nastąpił automatycznie, bez żadnego wkładu?Aby osiągnąć tylko efekt animacji kuli ziemskiej bez historii, wystarczyłoby ukryć pole tekstowe dla każdego rozdziału.

Po kilku iteracjach w celu wdrożenia odpowiedniego zachowania okazało się, że wymaga to tylko kilku dodatków do szablonu Storytelling. Kluczową zmianą było automatyczne przewijanie do następnego rozdziału po zakończeniu animowanego przejścia. Szablon Storytelling tworzy elementy HTML dla każdego rozdziału na podstawie konfiguracji, a następnie wykorzystuje scrollama do wyzwalania ruchu i zmian na mapie po napotkaniu każdego rozdziału. Scrollama przypisuje atrybut „data-scrollama-index” do każdego elementu rozdziału w historii. Więc kiedy animacja się zatrzymuje, pytamy o następny element scrollama i przewijamy do niego. Zadziałało!

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();
  });
}

Małe zmiany mogą mieć duże rezultaty. Mamy nadzieję, że ten dodatek do opowiadania historii okaże się przydatny dla innych. Podziel się tym, jak animujesz swoje globusy!