解决微信小程序加载lottie动画模糊问题

最新推荐文章于 2024-06-18 15:09:21 发布

酷酷的刘

最新推荐文章于 2024-06-18 15:09:21 发布

阅读量493

点赞数

分类专栏：微信小程序酷酷的刘文章标签：微信小程序小程序 lottie

本文链接：https://blog.csdn.net/kukudeliu/article/details/131682834

版权

酷酷的刘同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

微信小程序

4 篇文章 0 订阅

订阅专栏

该代码段展示了在微信小程序中如何选取canvas元素，并根据设备像素比调整尺寸，使用lottie库加载并播放JSON动画。通过wx.getSystemInfoSync获取像素比，然后设置canvas宽高及绘图上下文比例，最后加载并设置lottie动画参数。

摘要由CSDN通过智能技术生成

   wx.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      // 关键代码 START
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = canvas.width * dpr
      canvas.height = canvas.height * dpr
      context.scale(dpr, dpr)
      // 关键代码 END
      lottie.setup(canvas)
      lottie.loadAnimation({
        loop: true,
        autoplay: true,
        path: "https://temp-1251396483.cos.ap-beijing.myqcloud.com/lottie/animation_ljzcpaib.json",
        rendererSettings: {
          context
        }
      })
    }).exec()