更新记录

v0.1.3（2026-07-08） 下载此版本

• 增加参数canvasId支持多实例
• 增加参数loop支持播放次数控制
• 修复预加载失败, 以及播放缓存失效

v0.1.2（2026-07-02） 下载此版本

增加preload参数，预加载svga资源

v0.1.1（2026-07-02） 下载此版本

调整背景层显示与svga播放时机一致

平台兼容性

uni-app(3.7.13)

一个使用 svga 库封装的 uniapp H5 SVGA 播放组件示例项目

预览

安装依赖

pnpm install svga

基本使用

<script setup lang="ts">
import svgaPlayer from '@/components/svga-player/svga-player.vue'

const svgaPlayerRef = ref<InstanceType<typeof svgaPlayer>>()

const svgaUrl = new URL('@/static/svga/angel.svga', import.meta.url).href

onMounted(() => {
  svgaPlayerRef.value?.play(svgaUrl)
})
</script>

<template>
  <svga-player ref="svgaPlayerRef" />
</template>

完整示例

<script setup lang="ts">
import svgaPlayer from '@/components/svga-player/svga-player.vue'

const svgaPlayerRef = ref<InstanceType<typeof svgaPlayer>>()

const svga = [
  new URL('@/static/svga/angel.svga', import.meta.url).href,
  new URL('@/static/svga/rose.svga', import.meta.url).href,
]

const loop = ref(1)

onMounted(() => {
  svgaPlayerRef.value?.play(svga[0])
  svgaPlayerRef.value?.preload(svga[1])
})

async function handlePlay(url: string) {
  await svgaPlayerRef.value?.play(url)
}

function handleStop() {
  svgaPlayerRef.value?.stop()
}

function onReady() {
  console.info('SVGA ready')
}

function onEnd() {
  console.info('SVGA playback ended')
}

function onError(e: unknown) {
  console.error('SVGA error:', e)
}

function onLoopChange(e: any) {
  loop.value = e.detail.value
}
</script>

<template>
  <view>
    <slider :value="loop" :min="1" :max="10" show-value @change="onLoopChange" />
    <button @click="handlePlay(svga[0])">天使</button>
    <button @click="handlePlay(svga[1])">玫瑰</button>
    <button @click="handleStop">停止</button>

    <svga-player
      ref="svgaPlayerRef"
      :loop="loop"
      canvas-id="svga-main"
      @ready="onReady"
      @end="onEnd"
      @error="onError"
    />
  </view>
</template>

Props 属性

Method 实例方法

Events 事件

工作流程

preload(url)  ──→  加载 + 挂载 SVGA  ──→  缓存到内存
                                           │
play(url)     ──→  已缓存? ──→ 直接 start()  ──→  onEnd()
                  未缓存? ──→ 重新加载 + 挂载  ──→  start()