更新时间:2022-12-21 10:47:02贡献者收藏我的文档设置返回文档场景说明如何在小程序中使用 lottie 动画组件。使用限制支持支付宝 10.1.35 版本及以上。接入前准备●让 ui 设计师使用 ae 工具制作 lottie 动画,制作完成后导出。●ui 设计师已完成的物料资源请先在 lottie 平台 上做一次检测,保证物料包的内容文件符合小程序规范。说明:有关 lottie 的详细信息请查看 lottie 动画文档中提供的关联资料: lottie 官方文档 和 lottie 官方支持能力列表。在小程序中使用在线lottie动画1将 lottie 导出后放到三方或者商家自己的在线地址中,需要保证外网能够正在下载和访问该资源。 例如:2使用一下流程在小程序中接入即可。使用本地的lottie资源在小程序中使用将本地项目的根目录新建一个lottie文件夹,在文件中放入lottie文件。结构参考如下。在小程序中使用:属性类型默认值必填描述最低版本autoplaybooleanfalsefalse是否自动播放-pathstring空falselottie 资源地址。包含近端(包内地址)和远端(网络)的 json 文件地址。与 djangoid 二选一-speedfloat1.0false播放速度。正数为正向播放,负数负向播放-repeatcountnumber0false循环次数。●如果是负数表示无限次●如果是 0 表示不循环,播放一次●如果是 1 表示循环一次,播放两次10.1.80autoreversebooleanfalsefalse是否自动回播-assetspathstring-false资源地址。"/" 表明是小程序根目录10.1.50placeholderstring-true兜底图或者降级图地址。1支持本地资源,案例:'/image/lottie/lottie2_default.png'2支持 http 的 cdn 地址、近端地址。3小程序场景不支持 djangoid。10.1.52djangoidstring-falselottie 在线资源。远端的 zip 文件地址。lottie 组件会执行 md5 校验、解压、获取等过程,在过程中显示 placeholder 图片。与 path 二选一10.1.52md5string-false在线资源的 md5 校验。djangoid=https://b.zip可以使用 b.zip 加密获取 md5 值md5="77c6c86fc89ba94cc0a9271b77ae77d2"。10.1.52optimizebooleanfalsefalse降级。降级是指如遇低端设备,lottie 会降级展示为 placeholder。当 optimize 为 true ,并且传入了 placeholder 时,在低端设备上只会展示 placeholder,不展示 lottie。低端设备如下所示:●ios :小于等于 iphone6p●android:内存容量小于 3g10.1.52实例方法方法名描述参数默认值最低版本play开始播放---stop停止播放---pause暂停---setspeed设置播放速度正数为正向播放,负数负向播放value:numeric value1-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.52ondnimationcancel动画取消业务调用 cancel 时回调-ondataloadready参数化时,数据准备完成,等待业务传入参数化值-10.1.72