https://github.com/wechat-miniprogram/lottie-miniprogram

lottie for miniprogram
https://github.com/wechat-miniprogram/lottie-miniprogram

Last synced: 2 days ago
JSON representation

lottie for miniprogram

• Host: GitHub
• URL: https://github.com/wechat-miniprogram/lottie-miniprogram
• Owner: wechat-miniprogram
• License: mit
• Created: 2019-08-19T04:24:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-07T14:53:30.000Z (8 months ago)
• Last Synced: 2024-12-25T04:04:50.811Z (9 days ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 367
• Watchers: 16
• Forks: 40
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lottie for MiniProgram

[![](https://img.shields.io/npm/v/lottie-miniprogram)](https://www.npmjs.com/package/lottie-miniprogram)

[![](https://img.shields.io/npm/l/lottie-miniprogram)](https://github.com/wechat-miniprogram/lottie-miniprogram)

lottie 动画库适配小程序的版本。

> lottie 的相关介绍与动画生成方法等请参考[官方说明](https://github.com/airbnb/lottie-web)

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

## 使用

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

1. 通过 npm 安装：

```

npm install --save lottie-miniprogram

```

2. 传入 canvas 对象用于适配

```

```

```

import lottie from 'lottie-miniprogram'

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](https://github.com/airbnb/lottie-web/wiki/loadAnimation-options) 有些不同，支持的参数有：

* loop

* autoplay

* animationData

* path （只支持网络地址）

* rendererSettings.context （必填）

## 说明

* 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。

* 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，由于还有些小问题~~没有正式开放~~（2.9.0 已正式对外），但目前用在此处暂无发现问题。

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