Lottie动画在移动端卡顿怎么办？

W″子慧提问于 2026-03-17 16:22:22 阅读 40

交互

我在项目里用 Lottie 加载了一个 JSON 动画，桌面端跑得很流畅，但一到手机上就明显卡顿，尤其在低端安卓机上几乎动不了。我试过把动画帧率从 60 降到 30，也压缩了 JSON 文件大小，但效果不明显。

目前是用 lottie.loadAnimation 直接加载的，有没有什么优化技巧？比如是否要开启硬件加速，或者用 canvas 渲染代替 SVG？

lottie.loadAnimation({
  container: document.getElementById('anim'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

JS动画动画效果用户体验

我来解答赞 11 收藏

反馈

1 条解答

彦森的笔记 Lv1

低端机卡顿优先换canvas渲染，svg在移动端性能差很多。然后用lottie-light版本，体积小很多。

// 改用 canvas 渲染，移动端性能比 svg 好很多

lottie.loadAnimation({

  container: document.getElementById('anim'),

  renderer: 'canvas',  // 改成 canvas

  loop: true,

  autoplay: true,

  path: 'animation.json',

  rendererSettings: {

    progressiveLoad: true  // 渐进式加载，减少首屏压力

  }

});

如果还卡可以考虑用 webp 序列帧或者直接用图片做帧动画，那是最稳的方案。

2026-03-17 23:04