本文演示了如何跑通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项目地址的文档。