微信小程序接入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> 
相关推荐
Jing_jing_X1 天前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗1 天前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
weixin_lynhgworld1 天前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北1 天前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_915918411 天前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_915909062 天前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹2 天前
智尚房产中介小程序
微信小程序·小程序
狂团商城小师妹2 天前
预约洗车小程序
微信小程序·小程序
future_studio2 天前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#