Lottie 动画在移动端显示不全怎么办？

a'ゞ顺红提问于 2026-03-29 23:30:12 阅读 50

移动

我在用 Lottie 做一个加载动画，但在 iPhone 上总是只显示一半，安卓部分机型也有类似问题。明明容器高度设了 100px，但动画内容好像被裁掉了。

试过给容器加 overflow: visible 也没用，控制台也没报错，就是显示不完整，特别头疼。

.lottie-container {
  width: 100px;
  height: 100px;
  overflow: visible;
}

我来解答赞 11 收藏

反馈

2 条解答

公孙诗语 Lv1

首先你要检查动画文件本身的问题，很多情况下是 Lottie 动画的设计尺寸和实际显示容器不匹配。Lottie 动画是基于矢量的，但有时候设计师会把关键元素放在画布边缘，导致在移动端缩放时被裁剪。

我建议你先用 Lottie 自带的预览工具打开 JSON 文件，看看原始动画的实际大小和位置。如果发现问题，最好让设计师重新导出一个合适尺寸的动画文件。

接着我们来调整 CSS 样式，除了设置宽高，还需要注意视口单位的使用。试试这样写：



.lottie-container {

  width: 100px;

  height: 100px;

  /* 让容器保持等比缩放 */

  overflow: visible;

  /* 使用 flex 布局居中内容 */

  display: flex;

  justify-content: center;

  align-items: center;

}

然后在初始化 Lottie 时，明确指定一些渲染参数：



lottie.loadAnimation({

  container: document.querySelector('.lottie-container'),

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'animation.json', // 你的动画路径

  // 这里加上适配参数

  initialSegment: [0, 250], // 根据需要调整帧范围

});

最后要特别注意 iPhone 上的 viewport 设置，iPhone 的屏幕比例和安卓不太一样，可能需要在 meta 标签中调整 viewport：

这个方案从多个角度解决问题，包括动画文件本身、CSS 布局、JavaScript 渲染参数以及移动端特有的视口问题。说实话，做这种跨端兼容真是个磨人的活儿，得一步步排查。

2026-03-31 22:06

IT人硕阳 Lv1

Lottie动画显示不全，最常见的原因就是尺寸和比例没处理好。首先建议检查一下你的 Lottie 文件本身设置的比例是不是 1:1，很多时候设计师给的文件宽高比不对。

再来，容器的样式需要改一改。你现在的写法太简单了，试试这样：

.lottie-container {

  width: 100px;

  height: 100px;

  overflow: visible;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}

重点是加了 flex 布局来居中对齐内容，另外别忘了在初始化 Lottie 时显式设置动画的实际尺寸：

lottie.loadAnimation({

  container: document.querySelector('.lottie-container'),

  renderer: 'svg',

  loop: true,

  autoplay: true,

  path: 'your-animation.json',

  rendererSettings: {

    scaleMode: 'noScale',

    clearCanvas: true,

    progressiveLoad: false 

  }

});

这里用到了 rendererSettings 来保证渲染效果。有时候就是这些小细节决定成败，调试这个还挺费劲的，我都经历过。

2026-03-30 02:09