微信小程序接入lottie动画

1、注意:canvas渲染出来的层级太高,当有弹窗的情况会暴露在弹窗外

模拟器上会有这个问题,线上版本不会有

2、需求

需要把lottie动画在小程序的环境下进行展示

3、什么是lottie动画

由Airbnb开发并开源。允许设计师将复杂的矢量动画导出为JSON文件,并通过lottie库在移动应用或者Web上无缝地渲染这些动画。这些动画可以在iOS、Android和Web等多个平台上使用,并且可以以高性能和高质量进行呈现。

和传统的GIF、Canvas有什么区别:

矢量动画:lottie动画是基于矢量图形的,动画中的所有元素都是以数学形式描述的,可以无限缩放而不会失真。GIF和Canvas动画通常是基于位图的,因此在缩放时可能会失去清晰度。

文件大小:相同动画的产生的文件,lottie的更小

可控制性:lottie有能够控制播放次数、播放快慢、播放开始和结束的监听等。

跨平台:类似java jvm,不同的平台有专门的处理,使得lottie只要数据一致,动画就会一致。

4、小程序如何引入lottie

package.json

bash 复制代码
{
  "dependencies": {
   "lottie-miniprogram": "^1.0.12"
  }
}
bash 复制代码
const lottieCharging = require('../../lottie/lottiename')

initialLottie() {
    if (this._inited) {
      return
    }
    const devicePixelRatio = wx.getSystemInfoSync().devicePixelRatio
    wx.createSelectorQuery().select('#c0').node((res) => {
      const canvas = res.node
      const context = canvas.getContext('2d')
      canvas.width = 38 * devicePixelRatio
      canvas.height = 38 * devicePixelRatio
      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        animationData: lottieCharging,
        rendererSettings: {
          context
        }
      })
      this._inited = true
    }).exec()
  },
bash 复制代码
 <canvas id="c0" type="2d" style="width: 38px; height: 38px;"></canvas> 
相关推荐
mon_star°1 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero1 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅2 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
高压锅_12202 小时前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_805962932 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor8 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由17 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++
一只一只妖19 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设21 小时前
基于小程序的智能停车管理系统设计与开发
小程序