lottie 动画 -凯发app官方网站

组件概览

视图容器

基础内容

表单组件

导航

媒体组件

画布

地图

开放组件

无障碍访问

页面属性配置节点

扩展组件

更新时间：2024-12-17 13:55:45

订阅更新

我的文档

设置

简介

lottie 是一个用于 web 和 ios、android 的移动库，可使用 bodymovin 解析以 json 格式导出的 adobe after effects 动画，并将其本地呈现在移动设备上。以下为 lottie 动画库适配小程序的方法。有关 lottie 的详情可查看

和

。相关 api 详情可查看

my.createlottiecontext

。

使用限制

支付宝 10.1.35 版本及以上支持 lottie 动画。

使用

示例代码

.axml 示例代码

<lottie

assets-path="{{item.assetspath}}"

autoplay="{{item.autoplay}}"

id="{{item.id}}"

path="{{item.path}}"

repeat-count="{{item.repeatcount}}"

placeholder="{{item.placeholder}}"

class="item">

lottie>

.js 示例代码

.acss 示例代码

属性说明

属性	类型	必填	描述
autoplay	boolean	false	是否自动播放。默认值： false
path	string	false	lottie 资源地址。包含近端（包内地址）和远端（网络）的 json 文件地址。
speed	float	false	播放速度。正数为正向播放，负数负向播放。默认值： 1.0
repeat-count	number	false	循环次数。 ●如果是负数表示无限次。 ●如果是 0 表示不循环，播放一次。 ●如果是 1 表示循环一次，播放两次。默认值： 0 版本要求：支付宝客户端 10.1.80 及以上
auto-reverse	boolean	false	是否自动回播。默认值： false
assets-path	string	false	资源地址。"/" 表明是小程序根目录。版本要求：支付宝客户端 10.1.50 及以上
placeholder	string	true	兜底图或者降级图地址。 ●1. 支持本地资源，案例：'/image/lottie/lottie2_default.png'。 ●支持 http 的 cdn 地址、近端地址。版本要求：支付宝客户端 10.1.52 及以上
md5	string	false	在线资源的 md5 校验。可以使用 b.zip 加密获取 md5 值 md5="77c6c86fc89ba94cc0a9271b77ae77d2" 版本要求：支付宝客户端 10.1.52 及以上
optimize	boolean	false	降级。降级是指如遇低端设备，lottie 会降级展示为 placeholder。当 optimize 为 true ，并且传入了 placeholder 时，在低端设备上只会展示 placeholder，不展示 lottie。低端设备如下所示： ●ios ：小于等于 iphone6p ●android：内存容量小于 3g 默认值： false 版本要求：支付宝客户端 10.1.52 及以上
ondataready	eventhandle	-	当数据下载视图创建完成时触发。
ondatafailed	eventhandle	-	数据加载失败时触发。
onanimationstart	eventhandle	-	动画开始时触发。
onanimationend	eventhandle	-	动画结束时触发。
onanimationrepeat	eventhandle	-	动画一次重播结束。版本要求：支付宝客户端 10.1.52 及以上
onanimationcancel	eventhandle	-	动画取消。业务调用 cancel 时回调。
ondataloadready	eventhandle	-	参数化时，数据准备完成，等待业务传入参数化值。版本要求：支付宝客户端 10.1.72 及以上

功能介绍

支付宝小程序接入 lottie 支持如下功能：

●

资源文件处理：lottie 内如何处理图片、资源。

●

播放能力：如何在没有控制层的前提下有自定义播放能力。

资源文件处理

图片文件

ui 设计师提供的 lottie 动画可能会带有目录

images/

，里面保存的是一些静态图片。

目前有三种凯发app官方网站的解决方案，推荐前两种：

整体压缩为 zip 文件，将 zip 的路径放在 path 参数里。

将图片资源转成 base64 内链在 json 文件里，这样 json 路径放在 path 参数里。

如果图片资源和 json 文件是分离的，那么需要以下处理：动画描述的 .json 文件里，对图片资源是这样定位的：

●

w：宽度

●

h：高度

●

u：根目录

●

p：具体文件

因此如果图片资源统一放在一个单独 url 里，例如

http://xxx.xxx.com/images/img_0.png

，那么需要将

http://xxx.xxx.com/

配置在

assetspath

参数中。

base64 support

lottie 对资源的定义是

10.1.52 版本开始，p 节点支持 base64，当使用 base64 时，可以忽略 u 节点，例如：

注意：

如果在支付宝 10.1.52、10.1.60 版本中使用 base64 资源，需要在 json 文件中增加 assetspath="/" 作为参数，否则 ios 上可能无法显示。

常见问题

修复兼容性问题

如果提示“使用插件版本 5.5.0 ，客户端必须也是 5.5.0 ，ios/android 旧版播放器会闪退”，必须重新用兼容性模式导出 json。

真机测试

请尽量分别使用不同系统下的不同机型进行测试，提高正确性。

选用兼容版本

支付宝版本为 10.1.68 或更低版本时，如果有 ios 播放不完整、或者 android 播放闪退的情况，请 ui 设计师使用 ae 插件导出时选用兼容版本。

说明：

●

lottie 在 android 7.0 上硬件加速的问题请参见官方 issue：

；

●

客户端 10.1.82 版本默认对 android7.0 使用软件渲染的方式。

检查字体问题

支付宝版本 10.1.72 以下如果用到了 json 里面有 font-family="pingfang sc" 的字体，请检查字体问题。因为 android 没有这个字体，在 android 某些机器上（以下为部分闪退机型列表）会闪退。

mi 8

eml-al00

oppo r11

vivo y66l

mix 3

vivo nex a

vog-al10

pbet00

v1829a

vivo x20a

开发者选项中关闭动画

如果已经加载了 lottie 动画，可选择在开发者选项里面关闭动画，关闭后需要重启 app 或者重新加载才可以恢复 lottie。

应用切回前台需重新添加动画

ios 系统在应用切到后台的时候会自动移除动画，在应用切回前台时需要重新添加动画。

保证小程序组件 id 应用内唯一

小程序组件 id 需应用内保证唯一。不同的 page 的同一个 lottie 组件，页面切换后组件未必会销毁，因此不建议复用，例如：可翻页的视频页面中的点赞按钮。

文件压缩

请在文件当前目录直接进行压缩，不要在外层目录进行压缩。当前不支持遍历目录寻找 json 文件，如果解压后第一层未发现 json 文件则会被认为不合法。

支持本地 json 文件的解决办法：

相关问题