vue3+vite+ts项目里使用svga动画测试篇

可选的svga播放器有很多种，我就选其一SVGAPlayer-Web-Lite来试试。

SVGAPlayer-Web-Lite：
这是一个 SVGA 在移动端 Web 上的播放器，它的目标是 更轻量、更高效。

优点：

• 体积 < 60kb (gzip < 18kb)
• 兼容 Android 4.4+ / iOS 9+
• 更好的异步操作
• 多线程 (WebWorker) 解析文件数据
• OffscreenCanvas / ImageBitmap

差异：

• 不支持播放 SVGA 1.x 格式
• 不支持声音播放

首先我们使用前需要安装：cnpm i svga

简单使用：

html部分：

<template>
  <div class="bg">
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

ts部分：

<script lang="ts" setup>
import { Parser, Player } from 'svga'

const startSvga = async function () {
  const parser = new Parser()
  const svga = await parser.load('./src/assets/1.svga')

  const doc: any = document.getElementById('canvas')
  const player: any = new Player(doc)
  await player.mount(svga)

  player.onStart = () => console.log('播放了')

  // 开始播放动画
  player.start()
}
startSvga()
</script>

style部分：

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.canvas {
  width: 100%;
  height: auto;
}
</style>

效果图：

（动效图怕引起版权问题，就不展示了）

然后我们发现这样每次不管首次进入初始化还是刷新都需要重新下载，有一段页面空白时间，达不到我们要的效果。那我们就考虑到用DB来优化加载效果。

ts部分：

import { Parser, Player, DB } from 'svga'
import url from '../assets/1.svga?url'

const startSvga = async function () {
  try {
    const db = new DB()
    let svga = await db.find(url)
    if (!svga) {
      const parser = new Parser({ isDisableImageBitmapShim: true })
      svga = await parser.load(url)
      await db.insert(url, svga)
    }
    const doc: any = document.getElementById('canvas')
    const player: any = new Player(doc)
    await player.mount(svga)

    player.onStart = () => console.log('播放了')

    // 开始播放动画
    player.start()
  } catch (error) {
    console.error(error)
  }
}
startSvga()

对比：

之前是不管第一次进入还是刷新都需要重新加载解析动画，优化后，就可以减少相同 SVGA 下载和解析，页面渲染完成更快了。

完整代码：

<template>
  <div class="bg">
    <canvas id="canvas" class="canvas"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { Parser, Player, DB } from 'svga'
import url from '../assets/1.svga?url'

const startSvga = async function () {
  try {
    const db = new DB()
    let svga = await db.find(url)
    if (!svga) {
      const parser = new Parser({ isDisableImageBitmapShim: true })
      svga = await parser.load(url)
      await db.insert(url, svga)
    }
    const doc: any = document.getElementById('canvas')
    const player: any = new Player(doc)
    await player.mount(svga)

    player.onStart = () => console.log('播放了')

    // 开始播放动画
    player.start()
  } catch (error) {
    console.error(error)
  }
}
startSvga()
</script>

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.canvas {
  width: 100%;
  height: auto;
}
</style>

最后贴上文档链接