本文演示了如何跑通lottie动画,并说明了在此期间遇到的问题。
演示视频
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动画。
- 转为GIF
之前我也踩过这个坑,上方有提到那个资源网站,因为我的动画文件都是从网站中下载来的,其网站本身提供了gif的展示方式,但是它下载下来很卡,也不是透明的。
这时可以选择download下的,customize gif ,里面可以裁剪尺寸和更换透明背景。建议尺寸调整在300X300,生成出来的图片不容易出现错乱。
当然如果你使用的是ui给的动画json,这里提供一个思路 :可以尝试将json放入该网站生成gif
- 封装组件
将每一个lottie展示动画封装为一个单独的组件或者通用的组件,写好销毁的方法。只展示一次的动画展示完成后尽量销毁,关于lottieview有哪些api方法可以参考上方lottie-web项目地址的文档。