vue使用svga文件攻略

xiefandaren

原始攻略:点击跳转

---

谢凡总结

1.安装插件

1. 
   
2. yarn add svgaplayerweb
   
3. 
   
4. 或者
   
5. 
   
6. npm i svgaplayerweb --save
   
7. 
   

复制代码

2.引入依赖

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

复制代码

3.示例代码

1. //声明svga变量
   
2. var player;
   
3. var parser;
   
4. let nowPlay=true
   
5. // 播放svga的方法
   
6. function svga_player(url,num) {
   
7.   player = new SVGA.Player('#svgaImg');
   
8.   parser = new SVGA.Parser('#svgaImg');
   
9.   parser.load(url, function (videoItem) {
   
10.     //player.loops = 1;
    
11.     player.clearsAfterStop = false;
    
12.     player.setVideoItem(videoItem);
    
13.     player.startAnimation();
    
14.     if(num==1){
    
15.       player.pauseAnimation(true);
    
16.     //  player.clear();
    
17.     }
    
18.   });
    
19. }
    
20. svga_player('./img/svga/标题82.svga')
    
21. 
    
22. let btnS=document.getElementsByClassName('btn')[0].getElementsByTagName('button')[0]
    
23. console.log(btnS);
    
24. 
    
25. btnS.addEventListener('pointerdown',(e)=>{
    
26.   console.log('点击停止');
    
27.   //svga_player('./img/svga/线条.svga',1)
    
28. 
    
29.   nowPlay=!nowPlay
    
30.   if(nowPlay){
    
31.     player.pauseAnimation();
    
32.   }else{
    
33. player.pauseAnimation(false);
    
34.    player.startAnimation();
    
35.   }
    
36. 
    
37. })
    

复制代码