uniapp中如何使用lottie动画

在uniapp中如何正确使用Lottie动画？我在项目中引入了Lottie-web插件，按照官方文档配置后动画无法正常显示。具体表现为：H5端可以播放但小程序端白屏，真机调试时偶现卡顿。想请教：1）uniapp兼容Lottie的最佳实践是什么？2）是否需要针对不同平台做特殊适配？3）有没有性能优化的建议？目前使用的Lottie版本是5.7.4，测试JSON文件大小约80KB。

2 回复

在uniapp中使用lottie动画，需先安装lottie-uniapp插件。然后在页面引入组件，通过JSON文件或URL加载动画，控制播放、暂停等操作。


在 UniApp 中使用 Lottie 动画，可以通过引入第三方插件或原生组件实现。以下是详细步骤：

方法一：使用 uni-lottie 插件（推荐）

  1. 安装插件：
    在 HBuilderX 中，通过「插件市场」搜索 uni-lottie 并导入项目，或通过 npm 安装：

    npm install uni-lottie

  2. 引入组件：
    在页面的 vue 文件中引入：

    <template>
  <view>
    <uni-lottie ref="lottie" :path="path" @ready="onReady" />
  </view>
</template>

<script>
import uniLottie from 'uni-lottie';
export default {
  components: { uniLottie },
  data() {
    return {
      path: '/static/lottie/animation.json' // Lottie JSON 文件路径
    };
  },
  methods: {
    onReady() {
      this.$refs.lottie.play(); // 动画加载完成后播放
    }
  }
};
</script>

  3. 配置动画：

    • 将 Lottie JSON 文件放在 static 目录下。
    • 支持动态控制（播放、暂停、循环等）：
      // 播放
this.$refs.lottie.play();
// 暂停
this.$refs.lottie.pause();
// 设置循环
this.$refs.lottie.setLoop(true);

方法二：使用原生 Lottie 组件（仅 App 端）

  1. 引入 Lottie 模块：
    仅适用于 App 端，需在 manifest.json 中配置：

    "app-plus": {
  "modules": {
    "Lottie": {}
  }
}

  2. 在页面中使用：

    <template>
  <view>
    <lottie :options="lottieOptions" @animCreated="handleAnimation" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      lottieOptions: {
        path: '/static/animation.json'
      },
      anim: null
    };
  },
  methods: {
    handleAnimation(anim) {
      this.anim = anim;
      this.anim.play();
    }
  }
};
</script>

注意事项：

  • 平台兼容性：
    uni-lottie 支持全平台（H5、App、小程序），原生 Lottie 仅支持 App 端。
  • 性能优化：
    避免使用复杂动画，JSON 文件不宜过大。
  • 路径问题：
    确保 JSON 文件路径正确，建议使用绝对路径。

通过以上方法，即可在 UniApp 中高效集成 Lottie 动画，增强交互体验。

回到顶部