vue使用svga文件攻略

[复制链接]
查看: 109   回复: 0

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
939
2023-10-20 14:51:51   显示全部楼层   阅读模式  
原始攻略:点击跳转




1.png

谢凡总结

1.安装插件


  1. yarn add svgaplayerweb

  2. 或者

  3. npm i svgaplayerweb --save

复制代码
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. let btnS=document.getElementsByClassName('btn')[0].getElementsByTagName('button')[0]
  22. console.log(btnS);

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

  26.   nowPlay=!nowPlay
  27.   if(nowPlay){
  28.     player.pauseAnimation();
  29.   }else{
  30. player.pauseAnimation(false);
  31.    player.startAnimation();
  32.   }

  33. })
复制代码



回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司