lottie-miniprogram-modern

lottie 动画库适配小程序的版本，基于官方库进一步封装，用法和官方一致。

因官方库已经800年不维护更新了，UI给的较新版本的lottie json 动画文件使用该库已无法正常显示，故做了以下升级：

• 使用当前最新版本的 lottie 库，广泛支持更多版本的 lottie json 动画文件

  • 截止到2025年3月，最新版本为2.12.2

• 精简项目，直接使用js文件，不再依赖lottie-web包，js文件从bodymovin libraries获取，想用哪个用哪个。

• 使用Rollup打包，支持 esm 和 cjs 两种模块化方式

• 内置Taro版本的组件，参考 examples/taro/LottieAnim

lottie 的相关介绍与动画生成方法等请参考官方说明

依赖小程序基础库版本 >= 2.8.0 的环境

选择库文件时，请选择 lottie_canvas.js 文件 或 lottie_canvas.min.js 文件，因为小程序使用canvas来绘制lottie动画

使用

可参考该代码片段：https://developers.weixin.qq.com/s/2TYvm9mJ75bF。大致步骤如下：

1. 通过 npm 安装：

npm install --save lottie-miniprogram-modern

2. 传入 canvas 对象用于适配

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

import lottie from 'lottie-miniprogram-modern'

Page({
  onReady() {
    this.createSelectorQuery().select('#canvas').node(res => {
      const canvas = res.node
      lottie.setup(canvas)
    }).exec()
  }
})

3. 使用 lottie 接口

lottie.setup(canvas)
this.ani = lottie.loadAnimation({
  ...
})
this.ani.destroy() // 页面退出需销毁

接口

目前提供两个接口：

lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用，传入 canvas 对象

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同，支持的参数有：

• loop
• autoplay
• animationData
• path （只支持网络地址）
• rendererSettings.context （必填）

说明

• 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。

开发

npm install
npm run build