Lottie 小程序版：小程序内播放 Lottie 动画的 npm 接入与使用指南

lottie-miniprogram 是 Airbnb Lottie 动画库（lottie-web）适配微信小程序的版本，让你可以在小程序里直接加载 JSON 动画数据并用 Canvas 渲染矢量动画，广泛用于启动动效、营销页、图标动画等场景。

一、项目官方信息

二、官方图片

lottie-miniprogram 仓库社交预览图：

三、环境要求

• 微信开发者工具；
• 小程序基础库 >= 2.8.0（依赖性能更好的新版 Canvas 2D 实现）；
• 项目已开启 npm 构建能力（开发者工具菜单「工具 → 构建 npm」）。

四、部署/接入步骤

1. 安装 npm 依赖

npm install --save lottie-miniprogram

2. 在开发者工具中构建 npm

菜单「工具 → 构建 npm」，让微信开发者工具把 node_modules/lottie-miniprogram 构建成小程序可用的依赖。

3. 页面中放置 Canvas 2D

<canvas id="canvas" type="2d"></canvas>

五、使用方法

初始化与加载动画

import lottie from 'lottie-miniprogram'

Page({
  onReady() {
    this.createSelectorQuery()
      .select('#canvas')
      .node(res => {
        const canvas = res.node
        lottie.setup(canvas)
        this.ani = lottie.loadAnimation({
          loop: true,
          autoplay: true,
          animationData: require('./animation.json'),
          rendererSettings: {
            context: canvas.getContext('2d')
          }
        })
      })
      .exec()
  }
})

两个核心接口

• lottie.setup(canvas)：在任何 lottie 接口调用之前调用，传入 Canvas 2D 对象做适配；
• lottie.loadAnimation(options)：与 lottie-web 的 loadAnimation 类似，支持 loop、autoplay、animationData、path（仅支持网络地址）、rendererSettings.context（必填）。

页面退出销毁

onUnload() {
  this.ani.destroy()
}

官方示例代码片段可参考 https://developers.weixin.qq.com/s/2TYvm9mJ75bF。

六、常见问题 FAQ

Q1：lottie-miniprogram 是什么？ 它是 lottie-web 适配微信小程序的版本，以 npm 方式依赖原 lottie-web 项目，原项目有新版可直接改依赖版本号。

Q2：对基础库版本有要求吗？ 有，需要小程序基础库 >= 2.8.0，因为它依赖新版 Canvas 2D 实现。

Q3：支持 lottie 的 expression 表达式功能吗？ 不支持。小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能在小程序里不可用。

Q4：path 可以用本地 JSON 吗？ 不行，path 只支持网络地址；本地动画数据请用 animationData 传入。

Q5：页面退出后动画还在跑？ 记得在 onUnload 里调用 ani.destroy() 销毁实例，避免内存泄漏。

Q6：渲染效果和 Web 一致吗？ 基于新版 Canvas 2D 渲染，正常情况下矢量动画播放一致；官方称目前用在此处暂无明显问题。

七、跳转链接

• GitHub 仓库：https://github.com/wechat-miniprogram/lottie-miniprogram
• npm 包：https://www.npmjs.com/package/lottie-miniprogram
• 上游 lottie-web：https://github.com/airbnb/lottie-web
• 官方示例代码片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF