技术点
- canvas
- lottie-miniprogram
背景
最近在小程序开发中遇到一个点击动效的需求,大概就是点击一个盲盒,然后盲盒会有一个抖动的效果,因为抖动完要停止动画,所以采用了微信刚支持不久的lottie-miniprogram 官方文档戳这里,结果就遇到了一个神奇的bug:
bug描述
在微信开发者工具里预览动效是很清晰的,但是到了真机上动效就模糊、有锯齿,官方github也有类似的issues戳这里 模糊效果对比大致如下:
微信开发者工具效果
真机效果
问题的原因
一句话:retina屏幕的高分辨率导致了canvas画出的图像模糊、失真、锯齿,只需要获取到当前设备的devicePixelRatio,然后将画布和宽高、canvas的上下文同时缩放devicePixelRatio倍(其实就是放大devicePixelRatio倍)即可
解决方案(直接上代码)
代码
wx.createSelectorQuery().select(`#blind-box-canvas`).node(res => {
const canvas = res.node
const context = canvas.getContext('2d')
// 关键代码 start !!!
context.scale(app.globalData.devicePixelRatio,app.globalData.devicePixelRatio)
canvas.width = 114*app.globalData.devicePixelRatio
canvas.height = 105*app.globalData.devicePixelRatio
// 关键代码 end !!!
lottie.setup(canvas)
// 盲盒动效地址
let path = `****blind_box.json`
this.blindBoxData[i].ani = lottie.loadAnimation({
path,
loop: false,
autoplay: false,
rendererSettings: {
context,
},
})
this.blindBoxData[i].ani.setSpeed(0.8)
}).exec()
复制代码