lottiejs-miniapp当前版本号： 1.1.0

Npm地址：

安装Npm:

NPM I LOTTI EJS-MINIAPPLottieJS-MINIAPP是在微信小程序中实现LOTTIE动画的功能模块，由“

Lottie的介绍和动画生成方法等请参考官方说明

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

Lottiejs-miniapp依赖Lottie-web项目，版本号与Lottie-web项目同步

当前使用的Lottie-web版本号为： 5.8.1

Lottiejs-miniapp项目主要参考lottie-miniprogram项目，优化后重新打包并发布。

Lottiejs-miniapp案例预览：

请在微信内搜索“操作”小程序。

使用

通过Npm安装：预先将NPM install-save lotti ejs-miniapp canvas对象添加到页面中，使其与canvas id=' lotti ejs-canvas ' canvas-id='相匹配

页面({

OnReady() {

Wx.createselectorquery()。select ('# lotti ejs-canvas ')。node (RES={

Const canvas=res.node

const context=canvas . get context(' 2d ')；

Canvas.width=300

Canvas.height=300

罗(canvas)；

Lo({

环路： true，

Autoplay: true、

//animation data : animation data、

Path: lottie_json_path，

RendererSettings: {

Context，

}，

})；

})。exec()

}

})或

import * as Lottie from ' lotti ejs-mini app '

页面({

OnReady() {

Wx.createselectorquery()。select ('# lottiejs-canvas ')。fields ({node: true，size3360 true)

Const canvas=res[0]。节点；

const CTX=canvas . get context(' 2d ')；

Constdpr=wx.getsysteminfosync()。pixel ratio

Canvas.width=res[0]。width * DPR

Canvas.height=RES [0]。height * DPR

C(dpr、DPR)；

罗(canvas)；

Lo({

环路： true，

Autoplay: true、

//animation data : animation data、

Path: lottie_json_path，

RendererSettings: {

Context: CTX、

}，

})；

})；

}

})Lottie活动背景颜色可以通过在canvas组件中设置background-color背景颜色来设置Lottie活动背景颜色。接口

目前提供了两个界面。

罗(canvas)

在调用任何Lottie接口之前，必须调用canvas对象

Lo(可选)

与原始加载动画不同，支持的参数如下：

如何使用“LoopautoplayanimationDatapath(仅支持网络地址)rendererSe(必需)”:

罗(canvas)

Lo({

.

})

说明

该项目以NPM方式依赖原始lottie-web项目，如果原始项目有新版本，请尽快同步Lottie-web的新版本，并发布新的lottiejs-miniapp。该项目在小程序基本库2.8.0中更好地实施canvas，并支持canvas 2d。小程序本身不支持执行动态脚本，因此也不支持Lottie的expression功能。更多问题请关注微信公众号“活动网”查询。