지구상의 모든 나무에 저장된 탄소 애니메이션

작성자: 미켈 마론

COP27까지의 치열한 경쟁에서 우리는 놀라운 CTrees를 위해 지구상의 모든 나무에 저장된 탄소의 애니메이션 비디오를 제작하라는 요청을 받았습니다 . 우리는 Earthrise 에서 Climate TRACE 와 그 밖의 모든 것에 완전히 열중했지만 .. 도전에 저항할 수 없었습니다. 그 결과 Mapbox Globe와 스토리텔링 템플릿 을 사용한 효과적인 애니메이션이 탄생 했습니다.

"요청"은 CTrees의 상세한 탄소 분석을 보여주는 전 세계의 숲과 다른 풍경을 가로질러 확대/축소, 패닝 및 천천히 회전하는 비디오에 대한 것이었습니다.

처음에는 River Runner 와 Tour de France의 시네마틱 경로 애니메이션 , 그리고 Development Seed가 Mapbox 3D Terrain 출시 당시 구축한 GL Director 와 같은 다양한 Mapbox 경로 추적 접근 방식을 고려 했지만 카메라 제어를 허용하지 않았습니다. 우리는 필요했습니다. Storytelling 템플릿 은 완벽하게 맞는 것으로 판명되었습니다. 간단한 구성 파일을 통해 스토리의 각 텍스트 챕터를 통해 정확한 카메라 제어 및 애니메이션 전환이 가능합니다. 우아하고 단순한 솔루션이며 데이터 저널리즘을 위해 널리 채택되고 수정되었습니다. 이동은 일반적으로 페이지를 아래로 스크롤하여 제어합니다. 그 움직임이 입력 없이 자동으로 일어난다면 어떨까요?스토리 없이 지구본 애니메이션 효과만 얻으려면 각 장의 텍스트 상자를 숨기기만 하면 됩니다.

올바른 동작을 구현하기 위해 여러 번 반복한 후에 Storytelling 템플릿 에 몇 가지만 추가 하면 된다는 것이 밝혀졌습니다. 주요 변경 사항은 애니메이션 전환이 끝나면 자동으로 다음 장으로 스크롤하는 것입니다. Storytelling 템플릿은 구성을 기반으로 각 장에 대한 HTML 요소를 생성한 다음 scrollama 를 사용 하여 각 장을 만날 때 지도에서 이동 및 변경을 트리거합니다. 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();
  });
}

작은 변화가 큰 결과를 가져올 수 있습니다. 스토리텔링에 추가된 이 기능이 다른 사람들에게 유용하기를 바랍니다. 지구본 애니메이션 방법을 공유하세요!