开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 案例分析 > 小程序lottie组件能力介绍
贡献者
收藏
我的文档
设置
场景说明
如何在小程序中使用 lottie 动画组件。
使用限制
支持支付宝 10.1.35 版本及以上。
接入前准备
让 ui 设计师使用 ae 工具制作 lottie 动画,制作完成后导出。
ui 设计师已完成的物料资源请先在 lottie 平台 上做一次检测,保证物料包的内容文件符合小程序规范。

说明:有关 lottie 的详细信息请查看 lottie 动画文档中提供的关联资料: lottie 官方文档 和 lottie 官方支持能力列表。

在小程序中使用在线lottie动画
1将 lottie 导出后放到三方或者商家自己的在线地址中,需要保证外网能够正在下载和访问该资源。 例如:
2使用一下流程在小程序中接入即可。
使用本地的lottie资源在小程序中使用
将本地项目的根目录新建一个lottie文件夹,在文件中放入lottie文件。结构参考如下。

在小程序中使用:
属性
类型
默认值
必填
描述
最低版本
autoplay
boolean
false
false
是否自动播放
-
path
string

false
lottie 资源地址。包含近端(包内地址)和远端(网络)的 json 文件地址。
与 djangoid 二选一
-
speed
float
1.0
false
播放速度。正数为正向播放,负数负向播放
-
repeatcount
number
0
false
循环次数。
如果是负数表示无限次
如果是 0 表示不循环,播放一次
如果是 1 表示循环一次,播放两次
10.1.80
autoreverse
boolean
false
false
是否自动回播
-
assetspath
string
-
false
资源地址。
"/" 表明是小程序根目录
10.1.50
placeholder
string
-
true
兜底图或者降级图地址。
1支持本地资源,案例:'/image/lottie/lottie2_default.png'
2支持 http 的 cdn 地址、近端地址。
3小程序场景不支持 djangoid。
10.1.52
djangoid
string
-
false
lottie 在线资源。远端的 zip 文件地址。lottie 组件会执行 md5 校验、解压、获取等过程,在过程中显示 placeholder 图片。
与 path 二选一
10.1.52
md5
string
-
false
在线资源的 md5 校验。
djangoid=https://b.zip
可以使用 b.zip 加密获取 md5 值
md5="77c6c86fc89ba94cc0a9271b77ae77d2"
10.1.52
optimize
boolean
false
false
降级。降级是指如遇低端设备,lottie 会降级展示为 placeholder。
当 optimize 为 true ,并且传入了 placeholder 时,在低端设备上只会展示 placeholder,不展示 lottie。
低端设备如下所示:
ios :小于等于 iphone6p
android:内存容量小于 3g
10.1.52
实例方法
方法名
描述
参数
默认值
最低版本
play
开始播放
-
-
-
stop
停止播放
-
-
-
pause
暂停
-
-
-
setspeed
设置播放速度
正数为正向播放,负数负向播放
value:numeric value
1
-
gotoandstop(value)
goto 到 value 并停在该进度。
示例:gotoandstop({value: 对应的值]})
value: numeric value.进度 [0.0~1.0]
-
-
gotoandplay(value)
goto 到 value 并从该进度开始播。
示例:gotoandplay({value: 对应的值]})
value: numeric value.进度 [0.0,1.0]
-
-
playfrommintomaxprogress(min,max)
从最小到最大的进度区间进行播放。
示例:playfrommintomaxprogress({min:对应的值,max:对应的值})
min:最小进度
max:最大进度
百分比
[0.0,1.0]
-
-
playfrommintomaxframe(min,max)
从最小到最大的 frame 区间进行播放。
示例:
playfrommintomaxframe({min:对应的值,max:对应的值})
min:最小帧
max:最大帧
整数值
-
-
downgradetoplaceholder
当前 lottie 视图指定降级为展示 placeholder
-
-
10.1.52
监听事件
当使用方法调用 pause 和 stop 时,都会先后收到 animationcancel、animationend 两个事件。
事件名
描述
参数
最低版本
ondataready
数据下载 视图创建完成
-
-
ondatafailed
数据加载失败
-
-
ondnimationstart
动画开始
-
-
ondnimationend
动画彻底结束
-
-
ondnimationrepeat
动画一次重播结束
-
10.1.52
ondnimationcancel
动画取消
业务调用 cancel 时回调
-
ondataloadready
参数化时,数据准备完成,等待业务传入参数化值
-
10.1.72
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录
网站地图