微信小程序接入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> 
相关推荐
chaosama4 小时前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww4 小时前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
ALLSectorSorft7 小时前
上门服务小程序会员系统框架设计
小程序·apache
甜甜的资料库9 小时前
基于小程序老人监护管理系统源码数据库文档
微信小程序
说私域14 小时前
基于定制开发开源AI智能名片S2B2C商城小程序的首屏组件优化策略研究
人工智能·小程序·开源·零售
Uyker1 天前
微信小程序动态效果实战指南:从悬浮云朵到丝滑列表加载
前端·微信小程序·小程序
happyCoder1 天前
uniapp 微信小程序实现定时消息订阅提醒(前后端)
微信小程序
Uyker2 天前
从零开始制作小程序简单概述
前端·微信小程序·小程序
打小就很皮...2 天前
HBuilder 发行Android(apk包)全流程指南
前端·javascript·微信小程序
说私域2 天前
定制开发开源AI智能名片驱动下的海报工厂S2B2C商城小程序运营策略——基于社群口碑传播与子市场细分的实证研究
人工智能·小程序·开源·零售