Lottie for Miniapp

Lottie 小程序版 LottieWeb

说明

小程序版主要依据 LottieWeb 改写，意在解决需要在小程序上播放 lottie 动画，因为工作需要所以写了这库考虑可能大家有这个需求所以开源出来。

目前支持工作上碰到一些简单的 lottie 动画，对于一些复杂动画可能会出现问题，故欢迎提交 issue 并提供对应的动画 json 以供复现，并在有时间精力的情况下会一一修复（由于小程序和 web 的 canvas 实现会有一定的差异导致某些功能无法实现），也欢迎大家提交 pr。

使用

安装

``cmd
npm i -S lottie-miniapp
`

使用

`xml
// 指定canvas-id 及 id 需一样

`

`es6
import lottie from "lottie-miniapp";

const canvasContext = wx.createCanvasContext("test-canvas");
// 请求到的lottie json数据
const animationData = {};
// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
const animationPath = "https://xxxxx";

// 指定canvas大小
canvasContext.canvas = {
width: 100,
height: 100,
};

// 如果同时指定 animationData 和 path， 优先取 animationData
lottie.loadAnimation({
renderer: "canvas", // 只支持canvas
loop: true,
autoplay: true,
animationData: animationData,
path: animationPath,
rendererSettings: {
context: canvasContext,
clearCanvas: true,
},
});
`

Component

（v1.4.0）增加小程序自定义组件

$3

使用小程序自带 npm 安装组件包

`json
{
"usingComponents": {
"lottie": "lottie-miniapp/component/lottie"
}
}
`

`xml

`

$3

| 参数名 | 描述 | 默认值 |
| ------------- | ----------------------------------------------------------------- | ------ |
| width | 指定显示宽度 | 100 |
| height | 指定显示高度 | 100 |
| path | 请求 lottie 的路径。注意开启 downloadFile 域名并且返回格式是 json | null |
| animationData | 请求到的 lottie 的 json 数据 | null |
| loop | 循环播放 | true |
| autoplay | 自动播放 | true |

$3

- canvas 默认样式宽高 100%,需要一个 container 指定宽高
- 如果想要获取lottie的实例

`js
Page({
getLottie() {
const lottieComponent = this.selectComponent("#lottie");
// here!
console.log(lottieComponent.lottie);
},
});
`

$3

lottie-miniapp@1.9.0 起支持 。初始化和原来有区别。

但是目前不推荐使用，可能会碰到许多问题。

#### 使用方式

参考官方示例 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

`xml


`

`js
// canvas.js
import lottie from "lottie-miniapp";
Page({
onReady() {
const query = wx.createSelectorQuery();
query
.select("#myCanvas")
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext("2d");

const dpr = wx.getSystemInfoSync().pixelRatio;
canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr, dpr);

lottie.loadAnimation({
renderer: "canvas", // 只支持canvas
loop: true,
autoplay: true,
animationData: animationData,
path: animationPath,
rendererSettings: {
// 这里需要填 canvas
canvas: canvas,
context: canvasContext,
clearCanvas: true,
},
});
});
},
});
`

调试

`cmd
yarn run build:debug --watch // 编译文件到example
``