安装

cdn

<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>

npm

1. 或使用 npm install svgaplayerweb —save 添加依赖，
2. 并在需要使用的 js 中添加 require('svgaplayerweb') 或者 import SVGA from 'svgaplayerweb'
3. 添加 Div 容器，并加载动画。

使用

1. 添加 Div 容器

<template>
  <div :class="className"></div>
</template>

2. 加载动画

<script setup lang="ts" name="horseReady">
  import { onMounted, computed } from 'vue';
  import SVGA from 'svgaplayerweb';
  type svgaProperties = {
    loops?: number;
    fillMode?: string;
    clearsAfterStop?: boolean;
  };

  const props = defineProps<{
    classSuffix: string;
    src: any;
    config?: svgaProperties;
  }>();

  const className = computed(() => {
    return 'svga_' + props.classSuffix;
  });

  onMounted(() => {
    let player = new SVGA.Player('.svga_' + props.classSuffix);
    let parser = new SVGA.Parser();
    parser.load(props.src, function (videoItem: SVGA.VideoEntity) {
      if (props.config) {
        Object.assign(player, props.config);
      }
      player.setVideoItem(videoItem);
      player.startAnimation();
    });
  });
</script>

props 说明

1. classSuffix：容器的样式通过计算的方式来绑定 class, 因为一个页面可能加载很多个 savga动画，每个动画的样式可能有所不同，如果类名字一样那它的样式就不好控制了；另一个原因是让我们能通过后缀名来更加清晰的知道它是哪个动画；
2. src: 动画的资源路径
3. config: svga 的一些属性配置

• loops: 动画循环次数，默认值为 0，表示无限循环
• clearsAfterStop: 默认值为 true，表示当动画结束时，清空画布
• fillMode: 默认值为 Forward, 可选值 Forward / Backward，当 clearsAfterStop 为 false 时，Forward 表示动画会在结束后停留在最后一帧，Backward 则会在动画结束后停留在第一帧。

方法

• load: 接受三个参数：资源路径(url), 成功的回调 success: (videoItem: VideoEntity) ,失败的回调failure: (error: Error)
• startAnimation(reverse: boolean = false); - 从第 0 帧开始播放动画

填坑

1.vite 打包报错

解决方案：

vite.config.ts 文件添加 assetsInclude: ['**/*.svga']

2.Cannot find module '@/xxx.svga' or its corresponding type declarations.ts

解决方案： 添加声明文件

declare module '*.svga' {
  const content: string
  export default content
}

3.在使用了 position:absolute 移动端会出现空白区域

为什么会出现这样的问题？目前还没找到原因，即使它的父标签设置宽高和 overflow: hidden;還是不行。

解决方案：

这个要加在最外层，不能写在 css 作用域内（scoped）

<style>
canvas: {
  display: block;
}
</style>

其他问题

还有一些其他的方法，以及兼容性的问题，暂时还没遇到，不过官网有给一些方案，戳这里 (opens new window)