微信小程序接入lottie动画

1、注意：canvas渲染出来的层级太高，当有弹窗的情况会暴露在弹窗外

模拟器上会有这个问题，线上版本不会有

2、需求

需要把lottie动画在小程序的环境下进行展示

3、什么是lottie动画

由Airbnb开发并开源。允许设计师将复杂的矢量动画导出为JSON文件，并通过lottie库在移动应用或者Web上无缝地渲染这些动画。这些动画可以在iOS、Android和Web等多个平台上使用，并且可以以高性能和高质量进行呈现。
和传统的GIF、Canvas有什么区别：

矢量动画：lottie动画是基于矢量图形的，动画中的所有元素都是以数学形式描述的，可以无限缩放而不会失真。GIF和Canvas动画通常是基于位图的，因此在缩放时可能会失去清晰度。
文件大小：相同动画的产生的文件，lottie的更小
可控制性：lottie有能够控制播放次数、播放快慢、播放开始和结束的监听等。
跨平台：类似java jvm，不同的平台有专门的处理，使得lottie只要数据一致，动画就会一致。

4、小程序如何引入lottie

package.json

{
  "dependencies": {
   "lottie-miniprogram": "^1.0.12"
  }
}

1
2
3
4
5
6

const lottieCharging = require('../../lottie/lottiename')

initialLottie() {
    if (this._inited) {
      return
    }
    const devicePixelRatio = wx.getSystemInfoSync().devicePixelRatio
    wx.createSelectorQuery().select('#c0').node((res) => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = 38 * devicePixelRatio
      canvas.height = 38 * devicePixelRatio
      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: lottieCharging,
        rendererSettings: {
          context
        }
      })
      this._inited = true
    }).exec()
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

 <canvas id="c0" type="2d" style="width: 38px; height: 38px;"></canvas> 
1