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.nodeconst context = canvas.getContext('2d')lottie.setup(canvas)lottie.loadAnimation({loop: true,autoplay: true,animationData: lottieJson,rendererSettings: {context,},})}).exec()

结果