# uniapp-app-svga

**Repository Path**: isixe/uniapp-app-svga

## Basic Information

- **Project Name**: uniapp-app-svga
- **Description**: uniapp App svga示例项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-03
- **Last Updated**: 2026-02-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

一个 使用 svga 库封装的 uniapp APP svga 示例项目, 暂不支持声音播放

## 安装依赖

```sh
pnpm install svgaplayerweb
```

## 预览

<img src="https://gitee.com/isixe/uniapp-app-svga/raw/master/docs/preview.gif" width="200"/>

## 使用示例

```vue
<template>
	<view class="page">
		<button @click="playSvga">播放 SVGA</button>

		<!-- #ifdef APP-PLUS -->
		<svga-app-player ref="svgaRef" @ready="onSvgaReady" @end="onSvgaEnd" @error="onSvgaError" />
		<!-- #endif -->
	</view>
</template>

<script setup>
import { ref } from "vue";
import SvgaAppPlayer from "@/components/svga-app-player/svga-app-player.vue";

const svgaRef = ref(null);

const playSvga = () => {
	const url = "/static/svga/rose.svga";
	svgaRef.value?.play(url);
};

const onSvgaReady = () => {
	console.log("SVGA 已加载，开始播放");
};

const onSvgaEnd = () => {
	console.log("SVGA 播放结束");
};

const onSvgaError = (err) => {
	console.error("SVGA 播放失败：", err);
};
</script>

<style scoped></style>
```

## Method 实例方法

| 方法名 | 参数          | 返回值 | 说明                                     |
| ------ | ------------- | ------ | ---------------------------------------- |
| `play` | `src: string` | `void` | 播放指定 SVGA 文件（本地路径或网络 URL） |
| `stop` | —             | `void` | 停止当前播放并隐藏播放器                 |

## Events 事件
| 事件名  | 回调参数        | 说明                        |
| ------- | --------------- | --------------------------- |
| `ready` | —               | SVGA 资源加载完成，准备播放 |
| `end`   | —               | SVGA 播放完成               |
| `error` | `error: string` | 加载或解析失败              |