本文演示了如何跑通lottie动画,并说明了在此期间遇到的问题。

演示视频

https://www.bilibili.com/video/BV1kD4y1s77u/?spm_id_from=333.999.0.0&vd_source=38c67fbe46c91bd0abcb32a565b6d4f1

lottie的资料

小程序官网给出的文档地址如下:

微信小程序定义文件 | 微信开放文档

lottie-miniprogram

项目地址:GitHub - wechat-miniprogram/lottie-miniprogram: lottie for miniprogram

本项目为lottie 动画库适配小程序的版本

了解/学习lottie

项目有单独的代码片段:https://developers.weixin.qq.com/s/2TYvm9mJ75bF

首先先导入使用,导入此段代码很可能会遇到如下报错信息(截止本文发布之前)

  • 解决此问题的方法:需要更改微信开发者工具的调试基础库;即 顶部详情 - 本地设置 - 调试基础库将 ‘dev’ 改为较新的版本

项目不报错之后 点击init 。lottie动画便可展示出来了。

lottie-web版本更新

  • 如果不需要更新,跳过本小节即可

查看最新的lottie-web版本号:lottie-web,当前为5.9.6

更改lottie-miniprogram 中 package.json 对应的版本号

进入lottie-miniprogram目录下,运行 npm install

完成后 使用顶部微信开发者工具的 工具 - 构建npm;此时完成更新;

lottie动画的素材网站

Featured animations from our community 该网站有很多素材可免费提供使用,而且有gif、mp4等多种使用方式。这位本文后期lottie优化提供了解决办法。

lottie网络文件和本地文件使用方式

本地使用方式参照片段中的使用即可,以js的方式输出动画json

网络文件使用方式需要删除animationData,改用path。

this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        path: 'https://assets9.lottiefiles.com/packages/lf20_CZva9peGiW.json',
        rendererSettings: {
          context,
        },
      })
⚠️注意:网络文件使用方式存在问题,本人在ios真机预览的时候不会正常显示,打开开发者调试后,又能正常显示。此处请先实际验证后再改用网络的方式!

lottie动画模糊问题的解决方法

  • 如果你也遇到了真机显示模糊/失真的问题,请尝试如下方法解决
const width = wx.getSystemInfoSync().windowWidth
const height = wx.getSystemInfoSync().windowHeight
const canvas = res[0].node
const context = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
context.scale(dpr, dpr)

lottie.setup(canvas)

多个lottie使用小程序崩溃问题的优化方法

  • 小程序中使用lottie是用的canvas,本身存在性能瓶颈。不推荐使用过多的lottie动画。
  1. 转为GIF

之前我也踩过这个坑,上方有提到那个资源网站,因为我的动画文件都是从网站中下载来的,其网站本身提供了gif的展示方式,但是它下载下来很卡,也不是透明的。

这时可以选择download下的,customize gif ,里面可以裁剪尺寸和更换透明背景。建议尺寸调整在300X300,生成出来的图片不容易出现错乱。

当然如果你使用的是ui给的动画json,这里提供一个思路 :可以尝试将json放入该网站生成gif

  1. 封装组件

将每一个lottie展示动画封装为一个单独的组件或者通用的组件,写好销毁的方法。只展示一次的动画展示完成后尽量销毁,关于lottieview有哪些api方法可以参考上方lottie-web项目地址的文档。

最后修改:2022 年 11 月 29 日
如果觉得我的文章对你有用,奖励一杯咖啡吧!