# svga直播礼物动效

**Repository Path**: qbaby/svga-open-source-version

## Basic Information

- **Project Name**: svga直播礼物动效
- **Description**: 直播礼物, 盲盒, 入场等动画特效, 支持uniapp,小程序、APP、H5。该项目内含svga文件。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2024-07-30
- **Last Updated**: 2024-07-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# svga直播礼物动效

#### 介绍
直播礼物, 盲盒, 入场等动画特效, 支持uniapp,小程序、APP、H5。该项目内含svga文件。

#### 小程序预览
![小程序预览](https://foruda.gitee.com/images/1717154517876698920/7399a4f4_8387213.jpeg "20240530154051.jpg")

#### 部分截图

<img src="https://foruda.gitee.com/images/1717154393218765663/d1c57a7d_8387213.jpeg" width="200" height="400">
<img src="https://foruda.gitee.com/images/1717154429661734358/ca6024ff_8387213.jpeg" width="200" height="400">
<img src="https://foruda.gitee.com/images/1717154445654190955/1a692ac4_8387213.jpeg" width="200" height="400"/>
<img src="https://foruda.gitee.com/images/1717154461619433484/5a3d48d3_8387213.jpeg" width="200" height="400">


#### 使用说明

1.  方式一

```
<view class="content" style="height: 750rpx">
    <l-svga src="https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga"></l-svga>
</view>
```

2.  方式二

```
<view class="content" style="height: 750rpx">
    <l-svga ref="svga"></l-svga>
</view>
```

```
this.$refs.svga.render(async (parser, player) => {
    const videoItem = await parser.load("https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga");
    await player.setVideoItem(videoItem);
    // 设置当前动画的循环次数，0代表无限循环 默认 0
    player.loops = 1
    // 开始播放动画，reverse = true 时则反向播放。
    player.startAnimation()
    // 监听动画完成
    player.onFinished(() => {
        console.log('动画结束')
    })
})
```

#### props

◼ loops = 0 属性，设置当前动画的循环次数，0代表无限循环。

◼ clearsAfterStop = true 属性，为 true 时，表示动画停止播放后默认清空画布。

◼ fillMode = "Forward" 属性，为 Forward 时，表示动画播放结束后保留在最后一帧。为 Backward 时，表示保留在第一帧。

◼ async setVideoItem(videoItem?: VideoEntity): Promise<any> 设置需要播放的 VideoEntity 动画实体。

◼ setContentMode(contentMode: string) 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit。

◼ startAnimation(reverse: boolean = false) 开始播放动画，reverse = true 时则反向播放。

◼ startAnimationWithRange(range: Range, reverse: boolean = false) 开始播放动画，在指定 Range 内播放。

◼ pauseAnimation() 暂停播放动画。

◼ stopAnimation(clear?: boolean) 停止播放动画，当 clear 为 true 时，清空画布。

◼ clear() 清空画布

◻ stepToFrame(frame: number, andPlay: boolean = false) 跳转动画的指定帧，andPlay 为 true 时，从该帧开始播放动画。

◻ stepToPercentage(percentage: number, andPlay: boolean = false) 跳转动画的指定进度百分比，andPlay 为 true 时，从该帧开始播放动画。

◼ async setImage(src: string, forKey: string): Promise<any> 使用图片替换指定元素

◼ setText(dynamicText: DynamicText, forKey: string) 添加文本到指定元素上

◻ clearDynamicObjects() 清空所有替换元素。

◼ onFinished(callback: () => void) 监听动画完成

◼ onFrame(callback: (frame: number) => void) 监听动画播放过程中，当前帧的变化。

◼ onPercentage(callback: (percentage: number) => void) 监听动画播放过程中，当前进度的变化。