Technical point

  1. canvas
  2. lottie-miniprogram

background

Recently, IN the development of small programs, I met a demand for click dynamic effect, which is about clicking a blind box, and then the blind box will have a jitter effect. Because the animation will stop after the jitter, we adopted lottie-MiniProgram, which has just been supported by wechatThe official document is here, resulting in an amazing bug:

The bug description

In the wechat developer tool preview motion effect is very clear, but on the real phone motion effect blurred, jagged, official Github also has similar issues, blur effect comparison is generally as follows:

Wechat developer tool effect

Effect of real machine

Cause of the problem

In a word: The high resolution of retina screen results in blurred, distorted and jagged images drawn by canvas. You only need to obtain the devicePixelRatio of the current device. Then scale devicePixelRatio with the canvas, width, height, and canvas context

Solution (directly to the code)

code

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/key code!!!!!! Json 'this.blindBoxData[I]. ANI = Lottie. LoadAnimation ({path, Loop: false, AutoPlay: false, rendererSettings: {context,},}) this.blindBoxData[I].ani.setSpeed(0.8)}).exec()Copy the code