# svga-player

> svga 播放器

在 svga.lite 的基础上解决同时播放多个动画会加载不出来或错乱的问题

## 使用

<strong>注意</strong>

> 播放中的svga 修改参数不会生效,
> 需要重新触发组件的生命周期后才会生效; <br>
> 建议加svga的地址作为组件的key值来触发声明周期


```html
<svga-player src="https://s.xingqiu123.com/h5/zodiac/0.svga"></svga-player>
```

## 支持的属性

| 属性名  |   说明    |  类型  | 默认值 |                   备注                    |
| :-----: | :-------: | :----: | :----: | :---------------------------------------: |
|   src   | svga 地址 | string |   无   |                   必传                    |
| options | 播放参数  | object |   {}   | [options 支持的参数](#options-支持的参数) |

## options 支持的参数

|           属性名           |              说明               |  类型   |          默认值           |                           备注                           |
| :------------------------: | :-----------------------------: | :-----: | :-----------------------: | :------------------------------------------------------: |
|         cacheSvga          |    使用 IndexedDB 缓存 svga     | boolean | ios: false;android: true; |        IndexedDB 使用中不稳定，可能一直加载不出来        |
|        cacheTiemout        |  IndexedDB 取 svga 的超时时间   | number  |           5000            |                         单位: ms                         |
|            loop            |            循环次数             | number  |             0             |            0 为一直循环，且不会触发 end 事件             |
|          fillMode          |       最后停留的目标模式        | string  |        'forwards'         | 'forwards'或'backwards' , 类似于 css animation-fill-mode |
|          playMode          |            播放模式             | string  |        'forwards'         |                  'forwards','fallbacks'                  |
|         startFrame         |             开始帧              | number  |             0             |                                                          |
|          endFrame          |             结束帧              | number  |             0             |                     0 默认为最后一帧                     |
|        cacheFrames         |             缓存帧              | boolean |           false           |        对已绘制的帧进行缓存，提升重复播放动画性能        |
| intersectionObserverRender |      开启动画容器视窗检测       | boolean |           false           |   Intersection Observer API 检测动画容器是否处于视窗内   |
|      noExecutionDelay      | 使用 WebWorker 确保动画按时执行 | boolean |           false           |             利用 webworker，移动端不是很合适             |

## 支持的事件

| 事件名  |   说明   |         备注         |
| :-----: | :------: | :------------------: |
|  start  | 开始播放 |                      |
|  pause  | 暂停播放 |                      |
| resume  | 继续播放 |                      |
|  stop   | 停止播放 |                      |
|   end   | 结束播放 | loop 不为 0 时可触发 |
|  clear  | 清空动画 |                      |
| process |   处理   |                      |
|  error  |   错误   |      会返回错误      |

## 支持的方法

| 方法名 |         描述         |
| :----: | :------------------: |
| start  |     从头开始播放     |
| pause  |       暂停播放       |
| resume | 从暂停出开始继续播放 |
|  stop  |       停止播放       |
| clear  |       清空动画       |