vue使用svga文件攻略

xiefandaren

原始攻略:点击跳转

---

https://svga.dev/designer.html

如果ae插件官网链接挂壁得话 去gitup上下载

https://github.com/svga/SVGA-AEConverter

谢凡总结

1.安装插件

 yarn add svgaplayerweb
 
 或者
 
 npm i svgaplayerweb --save

2.引入依赖

import SVGA from 'svgaplayerweb';//引入 svga依赖

3.示例代码

 //声明svga变量
var player;
var parser;
let nowPlay=true
// 播放svga的方法
function svga_player(url,num) {
  player = new SVGA.Player('#svgaImg');
  parser = new SVGA.Parser('#svgaImg');
  parser.load(url, function (videoItem) {
    //player.loops = 1;
    player.clearsAfterStop = false;
    player.setVideoItem(videoItem);
    player.startAnimation();
    if(num==1){
      player.pauseAnimation(true);
    //  player.clear();
    }
  });
}
svga_player('./img/svga/标题82.svga')

let btnS=document.getElementsByClassName('btn')[0].getElementsByTagName('button')[0]
console.log(btnS);

btnS.addEventListener('pointerdown',(e)=>{
  console.log('点击停止');
  //svga_player('./img/svga/线条.svga',1)

  nowPlay=!nowPlay
  if(nowPlay){
    player.pauseAnimation();
  }else{
player.pauseAnimation(false);
   player.startAnimation();
  }

})