lottiejs-miniapp 当前版本号: 1.1.0

npm 地址：

https://www.npmjs.com/package/lottiejs-miniapp

npm 安装：

npm i lottiejs-miniapp

lottiejs-miniapp 是一款在微信小程序中实现 Lottie 动画的功能模块，由“动效网”打包发布，会持续与lottie-web 新版本进行同步更新。

lottie 的相关介绍与动画生成方法等请参考官方说明https://github.com/airbnb/lottie-web

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

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

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

lottiejs-miniapp 项目主要是参考了 lottie-miniprogram 项目，在其基础上进行优化后重新打包发布。https://github.com/wechat-miniprogram/lottie-miniprogram

lottiejs-miniapp案例预览：

请在微信中搜索“动效”小程序查看。

使用

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: 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;
    ctx.scale(dpr, dpr);


    lottie.setup(canvas);
    lottie.loadAnimation({
      loop: true,
      autoplay: true,
      //animationData: animationData,
      path: lottie_json_path,
      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 功能也是不支持的。
• 更多问题，请关注微信公众号 “动效网” 查询。