Vue使用Svgaplayer进行.svga动画的播放，以及列表

直播业务里，礼物特效一般不会用gif，而是用一种svga格式的文件。

什么是Svga

SVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。Svga.io官网是如此介绍的。官网链接https://svga.io

Vue项目如何使用

1.安装

npm install svgaplayerweb —save

这里我使用的yarn进行包管理，所以命令是：

yarn add svgaplayerweb

2.引入

import SVGA from 'svgaplayerweb'

3.实例化对象

html部分使用了Element UI的table表格

 <el-table-column  min-width="58px;"
                label="测试展示" >
                 <template #default="{ row }"> 
                   <div :id='"svga"+row.id' style="width: 100px;height: 100px;"></div>
                </template>
        </el-table-column>

Script部分

//渲染列表方法
async renderList (params) {
          //请求数据
          const {data} = await test(params)
          this.tableData =data
     }
//展示svga方法
 async  showSvg(){
            //一定要使用$nextTick，等到页面加载完成再处理数据，否则会找不到页面元素，报Undefind的错误
            this.$nextTick(()=>{
                this.tableData.map((v,i)=>{
                    //这里动态给ID，列表
                    var player = new SVGA.Player('#svga'+v.id);
                    var parser = new SVGA.Parser('#svga'+v.id); 
                    //这里使用动态加载的方式，加载tableData返回的svga源（例如：http://a.svga)
                    parser.load(v.animation, function(videoItem) {
                        player.setVideoItem(videoItem);
                        player.startAnimation();
                    })
                })
            })
        },
  watch: {
      $route: {
        async handler(newVal) {
          await this.List();//这个是渲染列表的方法，给列表data赋值
          await this.showSvg(); //这个是实例化Svga对象的方法，一定要在列表加载后执行，否则会获取不到对象

        },
        immediate: true,
      },
    },

4.多个svga文件同时加载

var player = new SVGA.Player('#svga'+v.id);

我们可以看到，官方给的demo是#开头，即ID选择器。ID选择器全局唯一，所以我们使用v-bind方法，把id动态绑定，然后在实例化的时候，再动态拼接。就可以一个列表同时实例化多个SVGA对象。
需要注意的是，加载SVGA耗费内存较高，建议做分页处理。