lottie 的相关介绍与动画生成方法等请参考 官方说明。
1. 通过 npm 安装：
npm install --save @tbminiapp/lottie-miniapp
2. app.json 里添加 enableSkia 配置：
{ "pages": [ "pages/index/index" ], "window": { "defaultTitle": "My App", "enableSkia":"true" } }
3. axml 里传入 canvas 对象用于适配：
<canvas id="canvas" type="2d" onReady="onCanvasReady" style="width: 100%; height: 500px"></canvas>
4. 使用 lottie 接口：
import lottie from '@tbminiapp/lottie-miniapp' Page({ onCanvasReady() { this.canvas = my.createCanvas({ id: 'canvas', success: (canvas) => { var systemInfo = my.getSystemInfoSync(); canvas.width = 300 * systemInfo.pixelRatio; canvas.height = 500 * systemInfo.pixelRatio; lottie.setup(canvas); const context = canvas.getContext('2d') this.ani = lottie.loadAnimation({ loop: true, autoplay: true, // animationData: require('../../json/redbao.js'), path:'https://gw.alicdn.com/bao/uploaded/LB1JfFSHYr1gK0jSZR0XXbP8XXa.json', rendererSettings: { context: context, }, }) } }); } })
目前提供两个接口：
需要在任何 lottie 接口调用之前调用，传入 canvas 对象。
与原来的 loadAnimation 有些不同，支持的参数有：
① loop；
② autoplay；
③ animationData （支持内置 json 文件，需要以 js 形式内置在包内）；
④ path （只支持网络地址，走的是my.downloadFile的链路，需要阿里系域名）；
⑤ rendererSettings.context （必填）；
1. 注意：使用网络加载 json 的时候请将 json 资源放置在阿里系域名下，或者通过module.exports=将 json文件转为 js 文件2 内置在小程序包里，走本地加载 json 链路；
2. 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，可直接改变依赖的版本号。
3. 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。
