背景：服务端小哥写项目要用到svga图片，就帮他弄了一个组件，小哥直呼666。

官网地址：svga.lite - npm (npmjs.com)

一. 用vue3封装一个简单的SVGA组件，代码如下：

<template>
  <div class="SvgaPlayer">
    <canvas
      id="svga-canvas"
      :style="`width:${svgaWidth}px;height:${svgaHeight}px;`"
    ></canvas>
  </div>
</template>

<script setup>
import { defineProps, onMounted } from "vue";
import { Downloader, Parser, Player } from "svga.lite"; // 引入svga相关api
import defaultSvga from "../assets/svga/back.svga"; // 引入svga文件

const props = defineProps({
  svgaUrl: {
    type: String,
    default: defaultSvga || "",
  },
  loop: {
    type: Number,
    default: 0,
  },
  svgaWidth: {
    type: Number,
    default: 100, // px
  },
  svgaHeight: {
    type: Number,
    default: 100, // px
  },
});

const render = async () => {
  const downloader = new Downloader();
  // 默认调用 WebWorker 线程解析
  // 可配置 new Parser({ disableWorker: true }) 禁止
  const parser = new Parser();
  // #svga-canvas 是 HTMLCanvasElement
  const player = new Player("#svga-canvas");
  const fileData = await downloader.get(props.svgaUrl);
  const svgaData = await parser.do(fileData);

  player.set({ loop: props.loop });
  await player.mount(svgaData);

  player
    // 开始动画事件回调
    .$on("start", () => console.log("event start"))
    // 暂停动画事件回调
    .$on("pause", () => console.log("event pause"))
    // 继续播放动画事件回调
    .$on("resume", () => console.log("event resume"))
    // 停止动画事件回调
    .$on("stop", () => console.log("event stop"))
    // 动画结束事件回调
    .$on("end", () => console.log("event end"))
    // 清空动画事件回调
    .$on("clear", () => console.log("event clear"));
  // 动画播放中事件回调
  // .$on("process", () => console.log("event process", player.progress));

  // 开始播放动画
  player.start();

  // 暂停播放动画
  // player.pause()

  // 继续播放动画
  // player.resume()

  // 停止播放动画
  // player.stop()

  // 清空动画
  // player.clear()
};

onMounted(() => {
  render();
});
</script>

<style lang="scss">
.SvgaPlayer {
}
</style>

二、可能会出现报错

 如图：

报错：Uncaught Error: Module parse failed: Unexpected character '�'；

原因：报错的原因主要就是黄色框里说的那样，缺少一个解析当前类型文件的loader；

三、解决报错

在vue.config.js中添加loader配置，如下图，注意加完配置后要重新跑一下项目哦；

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,

  // 添加webpack配置
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg|svga)(\?.*)?$/,
          loader: "url-loader",
          options: {
            limit: 10000,
          },
        },
      ],
    },
  },
});

四、使用

<SvgaPlayer :svgaWidth="100" :svgaHeight="80" />

好了，一个简单的svga组件就完成了，官网还提供了许多功能，有时间再研究吧。