Hoạt hình carbon được lưu trữ trong mọi cây trên hành tinh

Bởi: Mikel Maron

Trong thời gian căng thẳng cho đến COP27, chúng tôi được yêu cầu sản xuất một video hoạt hình về carbon được lưu trữ trong mỗi cây trên hành tinh cho các CTrees đáng kinh ngạc . Chúng tôi đã thành công với Climate TRACE và mọi thứ khác tại Earthrise .. nhưng không thể cưỡng lại thử thách. Kết quả là một hình ảnh động hiệu quả sử dụng Mapbox Globe và mẫu kể chuyện .

“Yêu cầu” dành cho một video phóng to, xoay và xoay chậm qua các khu rừng và các cảnh quan khác trên khắp thế giới, minh họa phân tích carbon chi tiết của CTrees.

Lúc đầu, chúng tôi đã xem xét các phương pháp tiếp cận theo các đường dẫn Mapbox khác nhau như River Runner và hoạt hình tuyến đường điện ảnh của Tour de France và GL Director do Development Seed xây dựng khi ra mắt Mapbox 3D Terrain, nhưng chúng không cho phép điều khiển máy ảnh chúng tôi cần. Mẫu Storytelling hóa ra là sự phù hợp hoàn hảo — mẫu này cho phép điều khiển camera chính xác và chuyển tiếp hoạt ảnh qua từng chương văn bản của một câu chuyện thông qua một tệp cấu hình đơn giản. Đó là một giải pháp tao nhã và đơn giản, đồng thời đã được áp dụng và sửa đổi rộng rãi cho báo chí dữ liệu. Chuyển động thường được kiểm soát bằng cách cuộn xuống trang. Điều gì sẽ xảy ra nếu chuyển động đó đơn giản diễn ra tự động mà không cần đầu vào?Để chỉ đạt được hiệu ứng hoạt hình quả địa cầu mà không có câu chuyện, bạn chỉ cần ẩn hộp văn bản cho mỗi chương.

Sau nhiều lần lặp lại để thực hiện đúng hành vi, điều này hóa ra chỉ yêu cầu một vài bổ sung cho mẫu Kể ​​chuyện. Thay đổi quan trọng là tự động cuộn sang chương tiếp theo sau khi quá trình chuyển đổi hoạt ảnh kết thúc. Mẫu Kể ​​chuyện tạo các phần tử HTML cho từng chương dựa trên cấu hình, sau đó sử dụng scrollama để kích hoạt chuyển động và thay đổi trên bản đồ khi gặp từng chương. Scrollama gán thuộc tính “data-scrollama-index” cho từng thành phần chương trong câu chuyện. Vì vậy, khi hoạt ảnh dừng lại, chúng tôi truy vấn phần tử scrollama tiếp theo và cuộn đến phần tử đó. Nó đã làm việc!

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

Những thay đổi nhỏ có thể có kết quả lớn. Chúng tôi hy vọng phần bổ sung này cho Kể chuyện sẽ hữu ích cho những người khác. Chia sẻ cách bạn làm động các quả địa cầu của mình!