微信小程序 Lottie 动画库

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

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

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

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

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

使用

通过 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;

        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](https://github.com/airbnb/lottie-web/wiki/loadAnimation-options) 有些不同，支持的参数有：
* 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 功能也是不支持的。
更多问题，请关注微信公众号 “动效网” 查询。

Package detail

lottiejs-miniapp

readme

微信小程序 Lottie 动画库

使用

说明