vue3.0+antd 项目使用SVGA文件。

公司需求是用svga的动画效果，之前没接触过，在网上找到一些在结合我使用的实际需求做了些改动。

1.先下载第三方包，

代码如下：

 yarn add svgaplayerweb
 
 或者
 
 npm i svgaplayerweb --save

我用的是yarn 所以用的第一种；

2.在相应的页面引入下载好的插件；

代码如下：

 import SVGA from 'svgaplayerweb';

3.在html页面的写好播放svga动画的容器 代码如下：

<a-modal
     :visible="true"
     :zIndex="zIndex"
     :footer="null"
     @cancel="handleCancel"
     :destroyOnClose="true"
   >
     <div class="svgaContainer">
       <div id="svgaAnimation" class="svga"></div>
     </div>
   </a-modal>

注意需要设置容器的大小，容器的大小决定svga动画的大小；

.svga {
    width: 500px;
    height: 500px;
  }

4.创建svga,

   //声明svga变量
      var player;
      var parser;
   // 播放svga的方法
      function svga_player(url) {
        player = new SVGA.Player('#svgaAnimation');
        parser = new SVGA.Parser();
        parser.load(url, function (videoItem) {
          player.setVideoItem(videoItem);
          zIndex.value = 9999;
          player.startAnimation();
        });
      }
   // 停止播放
      const handleCancel = () => {
        player.stopAnimation(true);
        player.clear();
        zIndex.value = -1;
      };

效果：

注：url我用的是线上的地址，我用本地文件没有播放出来，如果你们用的本地地址播放不了的话，可以试试网络地址；

这样就完成svga的播放，因为需求是点击预览图，弹出模态框播放动画，由于设置antd中的visible属性是无法播放svga的，应该是这个属性为false的时候，这个节点就不会存在，所以就找不到 svgaAnimation这个节点，SVGA这个插件就会报错，所以我就用zIndex这个属性来控制模态框的展示和隐藏；有知道其它好的方法的小伙伴可以留言，感谢！

以上就是今天要讲的内容，本文仅仅简单介绍了svga的使用。