The WeChat Mini Program uses the lottie-miniprogram plugin. Display animations in json format, jagged blur problem on mobile phones

https://github.com/wechat-miniprogram/lottie-miniprogram

How to use

1. Install via npm:

npm install --save lottie-miniprogram

2. Pass in the canvas object for adaptation

<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
    },
})

Notice

1. If the developer tool looks perfect, but there is a jagged problem on the phone. It must be that you have written less than the calculation device pixel ratio.

2. Style is also essential. Otherwise it might be bigger than you expected.

3. The json file can be requested from the designer and uploaded to the server as a network address, if the domain name is legal.