lottiejs-miniapp 当前版本号: 1.1.0

npm 地址：

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

npm 安装：

npm i lottiejs-miniapp

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

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

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

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

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

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

lottiejs-miniapp案例预览：

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

使用

通过 npm 安装：

npm install --save lottiejs-miniapp
在页面中预先添加 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,
      },
    });
  });
  }
})

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

微信小程序 Lottie 动画组件 lottiejs-miniapp V1.1.0 发布

使用

接口

lottie.setup(canvas)

lottie.loadAnimation(options)

说明