lottiejs-miniapp当前版本号： 1.1.0
Npm地址：
安装Npm:
NPM I LOTTI EJS-MINIAPPLottieJS-MINIAPP是在微信小程序中实现LOTTIE动画的功能模块，由“
lottie 的相关介绍与动画生成方法等请参考官方说明
依赖微信小程序基础库版本 >= 2.8.0 的环境
lottiejs-miniapp 依赖 lottie-web 项目，并且版本号与其保持同步
当前使用的 lottie-web 版本号为: 5.8.1
lottiejs-miniapp 项目主要是参考了 lottie-miniprogram 项目，在其基础上进行优化后重新打包发布。
lottiejs-miniapp案例预览：
请在微信中搜索“动效”小程序查看。
使用
- 通过 npm 安装：
npm install --save lottiejs-miniapp- 在页面中预先添加 canvas 对象用于适配
<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" type="2d"></canvas>- js中使用如下代码进行动画的加载（示例代码）
import * as lottie from 'lottiejs-miniapp'
Page({
onReady() {
wx.createSelectorQuery().select('#lottiejs-canvas').node(res => {
const canvas = res.node;
const context = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 300;
lo(canvas);
lo({
loop: true,
autoplay: true,
//animationData: animationData,
path: lottie_json_path,
rendererSettings: {
context,
},
});
}).exec()
}
})或者
import * as lottie from 'lottiejs-miniapp'
Page({
onReady() {
wx.createSelectorQuery().select('#lottiejs-canvas').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;
c(dpr, dpr);
lo(canvas);
lo({
loop: true,
autoplay: true,
//animationData: animationData,
path: lottie_json_path,
rendererSettings: {
context: ctx,
},
});
});
}
})- Lottie 动效背景颜色 可以通过对 canvas 组件设置 background-color 背景颜色的方式，实现对 Lottie 动效背景颜色的设置。
接口
目前提供两个接口：
lo(canvas)
需要在任何 lottie 接口调用之前调用，传入 canvas 对象
lo(options)
与原来的 loadAnimation 有些不同，支持的参数有：
- loop
- autoplay
- animationData
- path （只支持网络地址）
- rendererSe （必填）
使用方式：
lo(canvas)
lo({
...
})
说明
- 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，我们会尽快同步 lottie-web 新版本，并发布新版 lottiejs-miniapp。
- 本项目依赖小程序基础库 2.8.0 里性能更好地 canvas 实现，支持 canvas 2d。
- 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。
- 更多问题，请关注微信公众号 “动效网” 查询。