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 对象用于适配
`

`
`
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 （必填）

说明

`
npm install
npm run build
``