https://github.com/wechat-miniprogram/lottie-miniprogram
使用办法
通过 npm 安装:
npm install --save lottie-miniprogram
传入 canvas 对象用于适配
<canvas id="canvas" type="2d"></canvas>
wxss
覆盖默认的小程序的canvas的宽高样式
#canvas{
width:120rpx;
height:120rpx;
}
import lottie from 'lottie-miniprogram'
Page({
onReady() {
wx.createSelectorQuery().select('#canvas').node(res => {
const canvas = res.node
const context = canvas.getContext('2d')
//避免出现锯齿问题,要写下面的代码
context.scale(this.getPixelRatio(),this.getPixelRatio())
canvas.width = 120*this.getPixelRatio() //120是图片的宽度
canvas.height = 120*this.getPixelRatio() //120是图片的高度
lottie.setup(canvas)
lottie.loadAnimation({
loop: true,
autoplay: true,
//远程动画。一定要把json格式的文件放到服务器中,并且注意域名是合法的
path:"htttps//........a.json",
rendererSettings: {
context,
},
})
}).exec()
},
//获取设备的像素比
getPixelRatio(){
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
},
})
注意
1,如果出现开发者工具看的很完美但是手机上出现锯齿的问题。肯定是你少写了计算设备像素比。
2,样式也是必不可少的。否则可能会比你预想的大。
3,json文件可以向设计要,并且要传服务器上成为网络地址,域名要是合法的。