vue使用svga文件攻略

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

251

主题

251

帖子

1410

积分

管理员

Rank: 9Rank: 9Rank: 9

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




1.png

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();
  }

})




回复

使用道具 举报

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

高级模式

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