微信小程序接入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"}
}

const lottieCharging = require('../../lottie/lottiename')initialLottie() {if (this._inited) {return}const devicePixelRatio = wx.getSystemInfoSync().devicePixelRatiowx.createSelectorQuery().select('#c0').node((res) => {const canvas = res.nodeconst context = canvas.getContext('2d')canvas.width = 38 * devicePixelRatiocanvas.height = 38 * devicePixelRatiolottie.setup(canvas)this.ani = lottie.loadAnimation({loop: true,autoplay: true,animationData: lottieCharging,rendererSettings: {context}})this._inited = true}).exec()},

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