48 lines
1.5 KiB
Markdown
48 lines
1.5 KiB
Markdown
<h3 align="center" style="margin:30px 0 30px;font-weight: bold;font-size:32px;">hx-lottie 使用说明</h3>
|
||
|
||
## 预览
|
||
[](https://imgtu.com/i/L8dXn0)
|
||
|
||
[](https://imgtu.com/i/L8wmND)
|
||
|
||
## 使用说明
|
||
|
||
* 引入使用
|
||
|
||
``` html
|
||
<!-- options 动画参数 -->
|
||
<hx-lottie :options="options" ref="lottie">
|
||
|
||
```
|
||
|
||
* 参数说明
|
||
|
||
|
||
| 属性值 | 参数说明 |
|
||
|----------|---------------------------|
|
||
| loop | 是否循环播放动画（Boolean 默认 true） |
|
||
| autoplay | 是否自动播放（Boolean 默认 true） |
|
||
| data | 动画数据（Object） |
|
||
| path | 动画网络路径 （String） |
|
||
|
||
* 方法说名 `组件内方法统一使用 call(funName, args) 调用
|
||
`
|
||
1. 使用示例
|
||
|
||
```js
|
||
// 播放动画
|
||
this.$refs.lottie.call('play')
|
||
// 暂停动画
|
||
this.$refs.lottie.call('pause')
|
||
```
|
||
|
||
1. 说明 `方法与lottie-web 方法保持一致` [详情可参考](http://airbnb.io/lottie/#/web?id=usage)
|
||
|
||
| 方法名 | 说明 |
|
||
|----------|---------------------|
|
||
| play | 播放动画 |
|
||
| pause | 暂停动画 |
|
||
| stop | 停止动画 |
|
||
| setSpeed | 设置动画速度，args = speed |
|
||
| … | ... |
|