如何实现lottie动画全屏显示或适配容器全宽

解决方案 #

你遇到的动画尺寸小于容器的问题，可通过调整lottie加载配置、补充适配样式解决，具体修改如下：

1. 移除冗余加载逻辑
   你当前代码同时使用了**自动加载（HTML中带data-前缀的lottie属性）和手动加载（lottie.loadAnimation方法）**两种加载方式，会导致渲染冲突，二选一保留即可，这里推荐保留手动加载的方式，删除div上的data-animation-path、data-anim-loop等lottie专属属性，将动画路径配置到loadAnimation的path参数中。

2. 补充lottie自适应配置
   修改loadAnimation的入参，添加自适应相关配置项：

lottie.loadAnimation({
  container: document.getElementById("lottiesContainer"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "https://assets8.lottiefiles.com/private_files/lf30_jgz3zuii.json", // 动画路径移到这里
  preserveAspectRatio: 'xMidYMid meet',
  rendererSettings: {
    // 需要动画完整显示就填xMidYMid meet，需要完全铺满容器不留白就填xMidYMid slice
    preserveAspectRatio: 'xMidYMid meet'
  }
});

3. 补充适配样式
   给lottie渲染生成的svg/canvas元素添加宽高适配规则：

#lottiesContainer {
  width: 1140px;
  margin: auto;
  position: relative;
  background: #ccc;
  height: 100%;
}
/* 新增动画元素适配样式 */
#lottiesContainer svg,
#lottiesContainer canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

html,
body {
  height: 100%;
  margin: 0;
}

4. 全屏显示调整
   如果需要动画全屏显示，直接修改容器样式即可：

#lottiesContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
  background: #ccc;
}

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