安装依赖:

npm install svgaplayerweb --save
or 
yarn add svgaplayerweb 

html:

 <div class="svgaPage">
    <div class="btn" @click="playSvga">点击播放</div>
    <div id="svgaBox"></div>
  </div>

css: (设置容器的宽高)

<style scoped>
  .btn{
    width: 80px;
    height: 50px;
    background-color: #51e1e2;
    border: 1px solid #52b6ba;
    border-radius: 4px;
    text-align: center;
    line-height: 50px;
    color: #FFFFFF;
    cursor: pointer;
  }
  #svgaBox{
    width: 200px;
    height: 200px;
  }
</style>

js:

<script>
  import SVGA from 'svgaplayerweb';

  export default {
    name: 'SvgaPage',
    methods:{
      //点击播放svga
      playSvga(){
        const player = new SVGA.Player('#svgaBox');
        var parser = new SVGA.Parser('#svgaBox');
        //注意,这里必须是服务器地址,否则报错
        parser.load('//yun.tuisnake.com/h5-mami/pluginAct/takePack1/cai1.svga', function(videoItem) {       
          player.loops = 1;  // 设置循环播放次数是1
          player.setVideoItem(videoItem);
          player.startAnimation();
        });
      }
    }
  }
</script>
Logo

前往低代码交流专区

更多推荐