- npm 安装:
npm install --save lottie-miniprogram
- 传入 canvas 对象用于适配
<canvas id="canvas" type="2d"></canvas>
import lottie from 'lottie-miniprogram'
let query = wx.createSelectorQuery().in(this)
query.select(id).node((res) => {
if (!res) return
const width = 460
const height = 460
// 取得 canvas 节点
const canvas = res.node
const context = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
context.scale(dpr, dpr)
lottie.setup(canvas)
this.ani = lottie.loadAnimation({
loop: true, // 循环播放
autoplay: true, // 自动播放
animationData: jsonData,
rendererSettings: {
context,
},
})
}).exec()
- 注意这边的animationData不能使用网络地址,得用json数据
-
有时候用UI给的文件,会报错TypeError: eval is not a function。是因为小程序本身不支持动态执行脚本,因此 lottie 的 expression 功能也是不支持的。所以在导出 JSON 文件时禁用相关特性