uniapp加载json动画

一、添加canvas画布

<canvas id="lottie_demo" type="2d" style="display: inline-block;width: 148rpx; height: 148rpx;" />

二、引入依赖和JSON文件

安装依赖 npm install lottie-miniprogram --save

import lottie from 'lottie-miniprogram';
import lottieJson from "@/static/json/aiIdentify.json"

三、使用lottie加载json动画

    const state = reactive({
      that: getCurrentInstance(),
    })

      uni.createSelectorQuery().in(state.that).select('#lottie_demo').node(res => {
        const canvas = res.node
        const context = canvas.getContext('2d')
        lottie.setup(canvas)
        lottie.loadAnimation({
          loop: true,
          autoplay: true,
          animationData: lottieJson,
          rendererSettings: {
            context,
          },
        })
      }).exec()

结果