微信小程序接入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> 
相关推荐
pearbing3 小时前
B站排名优化:知识、娱乐、生活类内容的差异化实操策略
人工智能·微信·小程序·生活·娱乐
流***陌3 小时前
旧物新生:一款回收小程序如何让环保成为举手之劳
小程序
尘似鹤5 小时前
微信小程序学习(五)
学习·微信小程序·小程序
计算机毕业设计小帅5 小时前
【2026计算机毕业设计】基于微信小程序的英语在线学习系统
学习·微信小程序·毕业设计·课程设计
一只小白菜~6 小时前
记录一下在微信小程序中的使用MobX做状态管理
微信小程序·小程序·mobx
weixin_lynhgworld8 小时前
淘宝扭蛋机小程序:如何用游戏化思维提升电商转化率
游戏·小程序
小小王app小程序开发15 小时前
潮玩盲盒抽赏小程序玩法拆解:不同视角下的增长逻辑分析
小程序
星光一影15 小时前
Java版旅游系统/文旅系统/旅游助手/旅游攻略/公众号/小程序/app全套源码
java·小程序·开源软件·旅游·源代码管理
小小王app小程序开发15 小时前
盲盒小程序爬塔玩法深度细分:非技术视角下的运营细节拆解
小程序
游戏开发爱好者815 小时前
苹果iOS26系统升级:液态玻璃与智能功能全解析
macos·ios·小程序·uni-app·objective-c·cocoa·iphone