微信小程序通过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 = wx.getSystemInfoSync().pixelRatio

    canvas.width = width * dpr

    canvas.height = height * dpr

    ctx.scale(dpr, dpr)

6. lottie封装函数

import lottie from 'lottie-miniprogram'
/**
 * @function json动画方法
 * @param {*} id canvas的id选择器
 * @param {*} width canvas的宽
 * @param {*} height canvas的高
 * @param {*} context this指向的对象
 * @param {*} loop 是否循环播放
 * @param {*} autoplay 是否立即播放
 * @author 徐声
 */
export function jsonAnimation ({
  context,
  id,
  width,
  height,
  path,
  loop = true,
  autoplay = true
}) {
  wx.createSelectorQuery()
    .in(context)
    .select(id)
    .node((res) => {
      const canvas = res.node
      const lottieContext = canvas.getContext('2d')
      const dpr = wxp.getSystemInfoSync().pixelRatio
      canvas.width = width * dpr
      canvas.height = height * dpr
      lottieContext.scale(dpr, dpr)
      lottie.setup(canvas)
      // context.lottieAnimation =
      lottie.loadAnimation({
        loop: loop,
        autoplay: autoplay,
        animationData: path,
        rendererSettings: {
          context: lottieContext
        }
      })
    })
    .exec()
}