关于微信小程序如何使用lottie动画的说明_lottie-miniprogram
安装与初始化
通过 npm 安装 lottie-miniprogram：
npm install --save lottie-miniprogram查看最新版本
访问npm官网或使用命令行查询lottie-web的最新版本号。当前最新版本为5.13.0，与目标版本一致时无需变更。
修改依赖版本
在lottie-miniprogram项目的package.json文件中，定位到dependencies或devDependencies下的lottie-web条目。将版本号修改为\"^5.13.0\"或其他指定版本，保存文件。
安装依赖
在项目根目录打开终端，执行npm install命令。该操作会根据package.json更新node_modules中的依赖包，完成版本同步。
构建npm流程变更
微信开发者工具更新后，部分版本已自动处理npm构建。若未自动构建，需手动操作：在微信开发者工具界面，点击菜单栏\"工具\"→\"构建npm\"。若该选项消失，可通过删除miniprogram_npm目录后重新启动工具触发自动构建。
验证构建结果
检查项目目录下是否生成miniprogram_npm文件夹，并确认lottie-web相关文件已正确包含。在代码中尝试导入模块，确保无报错即表示更新成功。
页面布局与基础配置
在 WXML 文件中添加 Canvas 元素：
在 JS 文件中进行初始化：
初始化页面数据
Page({ data: { animation: null, // 存储Lottie动画实例 isPlaying: false // 动画播放状态标识 },页面加载生命周期
onLoad() { this.initLottie() // 页面加载时初始化Lottie动画 },Lottie动画初始化 并 设置Lottie动画
initLottie() { // 使用选择器获取canvas节点 wx.createSelectorQuery().select(\'#lottieCanvas\').node(res => { const canvas = res[0].node // 获取canvas DOM节点 const context = canvas.getContext(\'2d\') // 获取2D绘图上下文 // 适配高清显示处理 const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备像素比 canvas.width = 300 * dpr // 设置canvas实际宽度 canvas.height = 300 * dpr // 设置canvas实际高度 context.scale(dpr, dpr) // 缩放绘图上下文 lottie.setup(canvas) // 初始化Lottie // 加载动画数据并设置到页面数据中 this.setData({ animation: lottie.loadAnimation({ loop: true, // 设置循环播放 autoplay: true, // 自动播放 animationData: require(\'../../lottie/animation.json\'), // 动画JSON数据路径 rendererSettings: { context } // 渲染设置 }), isPlaying: true // 更新播放状态 }) }).exec() // 执行查询 },动画播放控制
toggleAnimation() { const { animation, isPlaying } = this.data if (isPlaying) { animation.pause() // 暂停动画 } else { animation.play() // 播放动画 } this.setData({ isPlaying: !isPlaying }) // 切换播放状态 },页面卸载处理
onUnload() { this.data.animation && this.data.animation.destroy() // 销毁动画实例释放资源 }})参数配置说明
loadAnimation 方法支持的参数：
lottie.loadAnimation(options) 支持的参数详注：
loop：
- 类型：
boolean或number - 默认值：
true - 说明：控制动画是否循环播放。若设置为
true，则动画会无限循环播放；若设置为一个具体的数字（且大于等于1），则表示动画会循环播放指定的次数
autoplay：
- 类型：
boolean - 默认值：
false - 说明：控制动画是否自动播放。若设置为
true，则动画在加载完成后会自动开始播放
ani,ationData：
- 类型：
object或array - 默认值：
null - 说明：Lottie动画的数据，通常是一个包含动画信息的JSON对象。它和
path参数是互斥的，即二者只能选择其一。如果使用animationData，可以直接传入本地的JSON数据。
path(只支持网络地址)：
- 类型：
string - 默认值：
null - 说明：Lottie动画的JSON文件路径，只支持网络地址。它和
animationData参数是互斥的，即二者只能选择其一。通过path可以加载远程的JSON文件。
rendererSettings.context(必填)：
- 类型：
object - 默认值：无
- 说明：这是Lottie动画渲染的一些配置中的一个必填项，用于指定渲染动画的上下文环境。在小程序中，通常是通过
canvas.getContext(\'2d\')获取的上下文对象。
注意事项：
animationData和path不可同时使用- 必须提供
rendererSettings.context - 基础库版本需 ≥ 2.8.0
性能优化建议
解决动画模糊问题：
const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = desiredWidth * dprcanvas.height = desiredHeight * dprcontext.scale(dpr, dpr)版本更新方法：
- 修改 package.json 中的 lottie-web 版本
- 执行
npm install - 在开发者工具中重新构建 npm
兼容性说明
已知限制：
- 不支持动态脚本执行
- Expression 功能不可用
- 推荐使用基础库 2.9.0+ 版本
- 远程 JSON 需配置域名白名单
lottie 动画库适配小程序的版本。
https://github.com/wechat-miniprogram/lottie-miniprogram
