Lottie web 圖像序列 - 加載圖像后啟動 animation

Question

我正在使用 Airbnb 的 Lottie 從加載頁面時播放的 jpg 序列創建 animation。 問題是 animation 在網頁打開后立即啟動，但似乎在圖像加載時 animation 已經一半甚至結束。 處理此問題的最佳方法是什么，以便用戶從一開始就看到 animation？

我試過同時使用DOMLoaded和data_ready事件監聽，但它們似乎都沒有解決問題。

目前我的代碼如下：

      var params = {
        container: document.getElementById('hero-anim'),
        animationData: animationData,
        renderer: 'svg',
        loop: false,
        autoplay: false,
      };

      var anim = lottie.loadAnimation(params);
      anim.addEventListener('DOMLoaded', lottie.play());

使用它的網站：test.romancecapsule.com

請問有關於如何解決這個問題的任何想法嗎？ 我遇到的另一個問題是在 Firefox（mac，v70.0.1）中，每個圖像之間閃爍白色。

謝謝

Answer 1

您可以使用jiagra預取代碼的圖像。

下載 js 庫並將其導入到您的代碼中。 然后預取之前要加載的圖像。

<script src="jiagra.js"></script>
...
<link rel="prefetch"  href="/images/animation_frame1.jpeg">

閱讀有關Chrome 預渲染的更多信息：

閱讀有關Firefox 預取的更多信息：

Answer 2

Lottie 有loaded_images事件，當所有圖像加載成功或失敗時觸發。 您可以將其用作：

anim.addEventListener('loaded_images', lottie.play());

在你的代碼中。 應該可以解決您的問題。