Lottie
Lottie
支持情况：
类型
ComponentType<LottieProps>
LottieProps
| 参数 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| autoplay | boolean | false | 否 | 是否自动播放。 |
| path | string | 否 | Lottie 资源地址。包含近端（包内地址）和远端（网络）的 JSON 文件地址。 与 djangoId 二选一。 | |
| speed | number | 1.0 | 否 | 播放速度。正数为正向播放，负数负向播放。 |
| repeatCount | number | 0 | 否 | 循环次数。 如果是负数表示无限次。 如果是 0 表示不循环，播放一次。 如果是 1 表示循环一次，播放两次。 |
| autoReverse | boolean | false | 否 | 是否自动回播。 |
| assetsPath | string | 否 | 资源地址。"/" 表明是小程序根目录。 | |
| placeholder | string | 否 | 兜底图或者降级图地址。 1. 支持本地资源，案例：'/image/lottie/lottie2_default.png'。 支持 http 的 cdn 地址、近端地址。 小程序场景不支持 djangoId。 | |
| md5 | string | 否 | 在线资源的 md5 校验。 djangoId=https://b.zip。 可以使用 b.zip 加密 获取 md5 值 md5="77c6c86fc89ba94cc0a9271b77ae77d2" | |
| optimize | boolean | false | 否 | 降级。降级是指如遇低端设备，Lottie 会降级展示为 placeholder。 当 optimize 为 true ，并且传入了 placeholder 时，在低端设备上只会展示 placeholder，不展示 Lottie。 低端设备如下所示： iOS ：小于等于 iPhone6P Android：内存容量小于 3G |
| onDataReady | CommonEventFunction | 否 | 当数据下载+视图创建完成时触发。 | |
| onDataFailed | CommonEventFunction | 否 | 数据加载失败时触发。 | |
| onAnimationStart | CommonEventFunction | 否 | 动画开始时触发。 | |
| onAnimationEnd | CommonEventFunction | 否 | 动画结束时触发。 | |
| onAnimationRepeat | CommonEventFunction | 否 | 动画一次重播结束。 | |
| onAnimationCancel | CommonEventFunction | 否 | 动画取消。业务调用 Cancel 时回调。 | |
| onDataLoadReady | CommonEventFunction | 否 | 参数化时，数据准备完成，等待业务传入参数化值。 |
API 支持度
| API | 微信小程序 | 支付宝小程序 | H5 | React Native | Harmony |
|---|---|---|---|---|---|
| LottieProps.autoplay | ✔️ | ||||
| LottieProps.path | ✔️ | ||||
| LottieProps.speed | ✔️ | ||||
| LottieProps.repeatCount | ✔️ | ||||
| LottieProps.autoReverse | ✔️ | ||||
| LottieProps.assetsPath | ✔️ | ||||
| LottieProps.placeholder | ✔️ | ||||
| LottieProps.md5 | ✔️ | ||||
| LottieProps.optimize | ✔️ | ||||
| LottieProps.onDataReady | ✔️ | ||||
| LottieProps.onDataFailed | ✔️ | ||||
| LottieProps.onAnimationStart | ✔️ | ||||
| LottieProps.onAnimationEnd | ✔️ | ||||
| LottieProps.onAnimationRepeat | ✔️ | ||||
| LottieProps.onAnimationCancel | ✔️ | ||||
| LottieProps.onDataLoadReady | ✔️ |