LottieJS循环动画重播时出现0.2秒短暂消失问题如何解决

问题原因 #

你遇到的0.2秒闪烁问题核心是Lottie自带的循环逻辑和你自定义的暂停重播逻辑冲突：

• 初始化时你将loop参数设为了true，Lottie触发loopComplete事件时，会自动执行跳回第一帧、准备重新播放的内部逻辑
• 此时你又同步调用了pause()，两个逻辑的执行间隙就会导致渲染空白，出现闪烁现象

修复方案 #

完全关闭Lottie自带循环，手动控制整个播放流程即可消除间隙：

1. 调整初始化参数，关闭自带循环

var lottieLogo = lottie.loadAnimation({
      container: document.getElementById('icon_logo'), // 动画挂载的DOM元素
      renderer: 'svg',
      loop: false, // 关闭默认循环，全手动控制播放逻辑
      autoplay: false,
      path: 'path-to-json'
});
lottieLogo.play();

2. 修改事件监听和处理逻辑，关闭自带循环后监听complete事件（动画单次播放完成触发）而非loopComplete，重播时主动指定从第0帧开始播放，避免帧跳转间隙：

function logoAnimation() {
    lottieLogo.pause();
    setTimeout(function() {
        // 主动跳转到第0帧并播放，消除帧切换的渲染间隙
        lottieLogo.goToAndPlay(0, true);
    }, 10000);
}
lottieLogo.addEventListener('complete', logoAnimation);

补充排查方向 #

如果按上述修改后仍然有轻微闪烁，可以额外检查两点：

• 你使用的Lottie动画JSON文件的最后一帧和第一帧是否内容不连续，导致跳转时视觉上有跳变
• 可尝试将renderer参数改为canvas，部分低版本浏览器下SVG渲染的帧切换会有偶发空白

内容的提问来源于stack exchange，提问作者CJabber201