微信小程序通过lottie库实现json动画

1. 通过npm安装Lottie库（注意微信小程序使用lottie-miniprogram，vue项目使用 lottie-web）

npm install --save lottie-miniprogram

2. 把ui提供的json文件动画改成js文件并通过module.exports导出文件

   

3. 在页面wxml文件创建一个canvas标签来存放动画（注意这里canvas需要包裹在view标签中并设置 style="width: 100%;height: 100%;）

<view style="width:750rpx;height:660rpx">
  <canvas id="lottie-demo" type="2d"  style="width: 100%;height: 100%;"></canvas>
</view>

4. 在页面ts文件中使用动画

5. json动画模糊问题处理（需要把像素比率计算进去，完美解决）

const width = res[0].width

    const height = res[0].height

    const canvas = res[0].node

    const ctx = canvas.getContext('2d')

    const dpr = w