微信小程序 Lottie 动画库

lottiejs-miniapp 是一款在微信小程序中实现 Lottie 动画的功能模块。

lottie 的相关介绍与动画生成方法等请参考官方说明

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

lottiejs-miniapp 依赖 lottie-web 项目，并且版本号与其保持同步

当前使用的 lottie-web 版本号为: 5.8.1

使用

1. 通过 npm 安装：

npm install --save lottiejs-miniapp

2. 在页面中预先添加 canvas 对象用于适配

<canvas id="lottiejs-canvas" canvas-id="lottiejs-canvas" type="2d"></canvas>

3. 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;

			lottie.setup(canvas);
			lottie.loadAnimation({
				loop: true,
				autoplay: true,
				//animationData: animationData,
				path: that.lottie,
				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;
		ctx.scale(dpr, dpr);

		lottie.setup(canvas);
		lottie.loadAnimation({
			loop: true,
			autoplay: true,
			//animationData: animationData,
			path: that.lottie_json,
			rendererSettings: {
				context: ctx,
			},
		});
	});
  }
})

4. Lottie 动效背景颜色 可以通过对 canvas 组件设置 background-color 背景颜色的方式，实现对 Lottie 动效背景颜色的设置。

接口

目前提供两个接口：

lottie.setup(canvas)

需要在任何 lottie 接口调用之前调用，传入 canvas 对象

lottie.loadAnimation(options)

与原来的 loadAnimation 有些不同，支持的参数有：

• loop
• autoplay
• animationData
• path （只支持网络地址）
• rendererSettings.context （必填）

使用方式：

lottie.setup(canvas)
lottie.loadAnimation({
  ...
})

说明

• 本项目是以 npm 的方式依赖原 lottie-web 项目，若原项目有新版本，我们会尽快同步 lottie-web 新版本，并发布新版 lottiejs-miniapp。
• 本项目依赖小程序基础库 2.8.0 里性能更好的 canvas 实现，支持 canvas 2d。
• 由于小程序本身不支持动态执行脚本，因此 lottie 的 expression 功能也是不支持的。
• 更多问题，请关注微信公众号 “动效网” 查询。