如何在Lottie动画加载时淡入淡出？

Question

我使用一个Lottie动画作为我的网站的背景(由普通的超文本标记语言/CSS/JS组成)，通过滚动ScrollMagic来控制。但是，在显示其余内容后，动画大约需要1秒才能加载。它最初要长得多，但我能够减小文件大小并提高压缩率。我试图在Lottie加载时添加一个淡入动画，这样它就不会像突然出现的那样不那么刺耳。我当前用来呈现/加载Lottie的代码是

var animData = {
  container: elem,
  renderer: 'svg',
  loop: false,
  autoplay: false,
  rendererSettings: {
    progressiveLoad: false,
    preserveAspectRatio: 'xMidYMid meet'
  },
  path: './data3.json'
};
bgAnim = lottie.loadAnimation(animData);

我尝试向Lottie动画容器添加简单的css属性，但似乎不起作用。如果任何人有任何帮助/想法，我将不胜感激。

Answer 1

您可以将其添加到动画的父包装中，并从开始帧开始淡入淡出。此外，如果您正在使用循环，并且希望淡入和淡出，则可以在最后一帧或定义bgAnim.onLoopComplete函数期间使用removeClass。

CSS：

.parent-class {
 opacity: 0;
 transition: opacity 0.3s ease-in-out;
}
.fading-in {
 opacity: 1;
}

JS：

bgAnim.onEnterFrame = ({ currentFrame }) => {
  // not always an integer
  if (currentFrame < 1) {
    jQuery(elem)
      .parent('.parent-class')
      .addClass('fading-in');
  }
}