- 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 文件時禁用相關特性
