微信小程序接入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> 
相关推荐
ywyy67982 小时前
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
人工智能·小程序·短剧·推客系统·推客小程序·推客系统开发·推客小程序开发
华子w9089258595 小时前
基于“SpringBoot+uniapp的考研书库微信小程序设计与实现7000字论文
微信小程序·小程序·uni-app
浩宇软件开发5 小时前
基于微信小程序的校园二手交易平台
微信小程序·小程序·校园二手交易
weixin_177297220696 小时前
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
小程序
王——小喵6 小时前
启动已有小程序项目
小程序
说私域6 小时前
基于开源AI智能名片链动2 + 1模式S2B2C商城小程序的沉浸式体验营销研究
人工智能·小程序·开源·零售
柳中仙6 小时前
uniapp+vue3小程序分享
小程序·uni-app
烂笔头儿@7 小时前
uniapp开发小程序vendor.js 过大
小程序·uni-app
程序员小奕7 小时前
Springboot 高校报修与互助平台小程序
spring boot·后端·小程序
程序员阿龙10 小时前
计算机毕业设计微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统源码+论文+PPT+讲解 基于微信小程序的题库系统设计与实现
微信小程序·分类·课程设计·在线答题·题库系统·错题本管理·试题分类