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

Posted 2023-03-14

【中文标题】Lottie 动画加载时如何淡入淡出？

【英文标题】：How to fade in Lottie animation when it loads?

【发布时间】：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 属性，例如过渡，但它似乎不起作用。我将不胜感激任何人可能有的任何帮助/想法。

【参考方案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');