Vue3使用svga动画

SVGA 动画的优势

SVGA 动画是一种基于矢量图形的动画格式，相比传统的位图动画格式（如 GIF 或视频文件），它有以下几个优点：

1. 小文件体积：由于是矢量图形，它的文件体积比位图图像小，特别适合移动端或者低带宽环境下使用。
2. 无损缩放：矢量图形是基于数学公式的，可以在不同分辨率的设备上平滑缩放，保证图形清晰不失真。
3. 动画效果丰富：SVGA 支持多种复杂的动画效果（如路径动画、渐变、变形等），适合做交互式动画或过渡效果。
4. 性能优化：SVGA 动画相比视频格式占用的计算资源少，尤其是在移动端性能上，表现得更加高效。
5. 便于集成：SVGA 可以与 Web 或 App 项目中直接集成，不需要额外的播放器或编解码器。

Vue3使用svga动画

版本

1. svgaplayerweb：2.3.2
2. Vue：3.4.21
3. vite：5.4.10

pnpm add svgaplayerweb

核心代码

<template>
  <div class="svga-box">
    <div ref="svgaContainer" class="svga-player"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Parser, Player } from 'svgaplayerweb'
import svga from '@/assets/svgaFile.svga?url'

const svgaContainer = ref() // 获取动画容器引用
let player = null as any // 播放器实例
let parser = null as any // 解析器实例

// 加载并播放 SVGA
const playSvga = () => {
  try {
    // 初始化解析器
    parser = new Parser()
    // 初始化播放器
    player = new Player(svgaContainer.value)

    parser.load(
      svga,
      (videoItem: any) => {
        player.setVideoItem(videoItem)
        player.startAnimation()
        console.log(videoItem, '成功')
      },
      (error: any) => {
        console.log(error, '失败')
           },
      )
  } catch (error: any) {
    console.error('SVGA 加载失败:', error)
  }
}

// 当组件挂载时加载动画
onMounted(() => {
  playSvga()
})

onUnmounted(() => {
  // 组件销毁时清理资源
  if (player) {
    player.destroy()
  }
  if (parser) {
    parser.destroy()
  }
})
</script>

<style scoped lang="scss">
.svga-box {
  display: flex;
  align-items: center;
  color: var(--el-color-primary);
  margin-right: 28px;
  cursor: pointer;
}
.svga-player {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  margin-right: 4px;
}
</style>

遇到的问题

在引入svga文件的时候，刚开始是没有加?url，导入会报一些错误：

尝试采用将svga文件放在服务器和oss上，又出现了一些跨域问题，最后在导入的时候，加入?url就解决了问题。

区别总结

• 不加 ?url：Vite 会根据文件类型处理它，适用于大多数常见场景，图片等资源会被处理为模块。
• 加上 ?url：强制将文件作为静态资源处理，并返回文件的 URL。适用于确保某些资源（如图片、字体文件）以 URL 的形式引用，而不是模块引用。