# wx-svga-parser

**Repository Path**: ghkeeping/wx-svga-parser

## Basic Information

- **Project Name**: wx-svga-parser
- **Description**: 微信小程序解析svga播放动画
- **Primary Language**: TypeScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-05-08
- **Last Updated**: 2024-01-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# wx-svga-parser

#### 介绍
svga为美工设计的一个动画效果，导出为svga文件，可以通过代码修改svga里面指定图层的图片或文字。 wx-svga-parser在微信小程序中解析并实现播放动画效果。

#### 支持本仓库

轻点Star，让更多人看到该项目。

#### 软件架构
```
语言：Typescript
目录
    dist --> 打包产物
    Parser --> 解析svga文件
    Platform --> 抹平微信wx平台问题
    Player --> svga播放器
    Render --> 绘制渲染svga文件
    Types --> 公共的类型声明
    Utils --> 公共的工具函数
    main --> wx-svga-parser解析器的导出入口文件
```


#### 安装教程

1. 复制dist文件中的svga-parser-mini.js文件到微信小程序项目上；

2. 在需要添加播放器的`wxml`文件内，添加`canvas`组件（注意：`canvas`的id为必填，在实例播放器时会用到），type必须为2d。

   ```wxml
   <view class="container">
   	<canvas id="canvasId" type="2d" style="width: 300px; height: 300px;" />
   </view>
   ```

3. 在需要播放的时机，本demo选择`onLoad`，执行以下代码，即可播放动画。

   ```javascript
   import { Player } from './libs/svga-parser-mini.js'
   
   Page({
       onLoad() {
           // 实例化播放器 Player
           const player = new Player({
               id: '#canvasId',
               url: 'https://gygc-1253229355.cos.ap-guangzhou.myqcloud.com/image_mini/yjjy_home02.svga'
           })
           
           // 开始执行播放
           player.mount()
       }
   })
   ```

### API

实例时参数：

|    名称     |   类型    |  默认值   |                             说明                             | 必传 |
| :---------: | :-------: | :-------: | :----------------------------------------------------------: | :--: |
|     id      |  String   |     -     |                         canvas元素id                         |  Y   |
|     url     |  String   |     -     |               svga链接(网络地址、本地资源地址)               |  Y   |
|  component  | Component |     -     |           若该播放器在组件内，需传组件的实例`this`           |  N   |
| contentMode |  String   | AspectFit | 动画缩放模式，可选值：'Fill' \| 'AspectFit' \| 'AspectFill'  |  N   |
|    loops    |  Number   |     0     |                动画的循环次数。0表示无限循环                 |  N   |
|  fillMode   |  String   |  Forward  | 可选值：'Forward' \| 'Backward'。Backward表示动画结束时保留第一帧；Forward表示动画结束时保留最后一帧。 |  N   |

实例方法：

|      名称       |                            参数                            |                             描述                             |
| :-------------: | :--------------------------------------------------------: | :----------------------------------------------------------: |
|      mount      |                             -                              |                         开始播放动画                         |
|      start      |                    (reverse?: boolean)                     | 重新开始播放动画。`reverse`默认值为`false`。`reverse`为`true`反向播放动画 |
|      pause      |                             -                              |                         暂停播放动画                         |
|      stop       |                   (clear?: boolean):void                   | 停止播放动画。`clear`默认值为`false`。`clear`为`true`时，在停止播放动画后清空动画。 |
|      clear      |                             -                              |                           清空动画                           |
| startWidthRange |             (range: IRange, reverse?: boolean)             | 开始播放动画，在指定`IRange`内播放动画。`reverse`默认值为`false`。`reverse`为`true`时方向播放动画。 |
| setContentMode  |                    (mode: IContentMode)                    | 设置动画缩放模式。`IcontentMode`可选值：'Fill' \| 'AspectFit' \| 'AspectFill' |
|     setText     |        (dynamicText: IDynamicText, forKey: string)         |       添加指定文本到元素上。`forKey`为指定元素的`name`       |
|    setImage     | (src: Uint8Array \| string, forKey: string): Promise<void> |       使用图片替换指定元素。`forKey`为指定元素的`name`       |
|  clearDynamic   |                             -                              |                       清空所有替换元素                       |
|   onFinished    |                   (callback: () => void)                   |                         监听动画完成                         |
|     onFrame     |            (callback: (frame: number) => void)             |     监听动画播放过程中，当前帧的变化，`frame`为当前帧数      |
|  onPercentage   |          (callback: (percentage: number) => void)          |              监听动画播放过程中，当前进度的变化              |
|   stepToFrame   |   (callback: (frame: number, isPlay?: boolean) => void)    |    跳转动画到指定帧，`isPlay`为true时，从该帧开始播放动画    |
|  onPercentage   | (callback: (percentage: number, isPlay?: boolean) => void) |  跳转动画到指定百分比，`isPlay`为true时，从该帧开始播放动画  |

**变量类型：**

#### IRange

```typescript
interface IRange {
  location: number // 起始帧
  length: number // 长度
}
```

#### IDynamicText

```typescript
interface IDynamicText {
  text: string
  size: number
  family: string
  color: string
  offset: { x: number, y: number }
}
```




#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支N
3.  提交代码
4.  新建 Pull Request