更新记录
0.1.2(2023-12-08) 下载此版本
- 修复微信小程序无法播放的问题
- 更新插件小程序支持范围
0.1.0(2023-11-24) 下载此版本
基础功能
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | × | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | - | √ | √ | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
<zui-animator />
Lottie 动画图标
Lottie 是一个由 Airbnb 开源的移动端动画解决方案,在项目中引入 lottie 将给应用带来不一样的生命力
快速开始
0. 安装依赖
复制代码npm install lottie-web
# 或者
yarn add lottie-web
1. 引入组件, 并指定动画数据
复制代码<zui-animator :frames="lottieJsonData" />
如果需要在微信小程序中运行,请先安装 lottie-miniprogram
依赖
参数
prop: string
width: number | string
动画宽度
默认: 48
height: number | string
动画高度
默认: 48
frames: object
动画帧数据, JSON
loop: boolean
循环播放
默认: true
autoplay: boolean
自动播放
默认: true
speed: number
播放速度
默认: 1
方法
支持 lottie-web 标准方法。
- play()
- stop()
- pause()
- setLocationHref(locationHref)
- setSpeed(speed)
- gotoAndStop(value, isFrame)
- gotoAndPlay(value, isFrame)
- setDirection(direction)
- playSegments(segments, forceFlag)
- setSubframe(flag)
具体使用说明参照:https://www.npmjs.com/package/lottie-web#usage
🍓 支持
如果组件对您有帮助,请不吝打赏。肥宅快乐水🥤是创作动力!🥤🥤🥤
不支持钉钉你乱勾什么?浪费人时间,评论区全是运行异常你倒是勾了个全