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

【问题标题】：How to fade in Lottie animation when it loads?Lottie 动画加载时如何淡入淡出？
【发布时间】：2021-01-29 01:15:30
【问题描述】：

我使用 Lottie 动画作为我网站的背景（使用纯 HTML/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 属性，例如过渡，但它似乎不起作用。我将不胜感激任何人可能有的任何帮助/想法。

【问题讨论】：

标签： javascript html css lottie

【解决方案1】：

您可以将其添加到动画的父包装器中并在起始帧上开始淡入淡出。此外，如果您正在使用循环并想要淡入淡出，您可以在最近的一帧期间使用 removeClass 或定义 bgAnim.onLoopComplete 函数。

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

【讨论】：