微信小程序 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 功能也是不支持的。
• 更多问题，请关注微信公众号 “动效网” 查询。