SVGA动画 | vue

直播项目中飘屏svga动画，例如：用户进场特效，全屏礼物动画等

1、安装依赖

npm install svgaplayerweb --save

2、项目使用

import SVGA from "svgaplayerweb";

var player = new SVGA.Player('#demo');
var parser = new SVGA.Parser('#demo');
parser.load('/svga/15541215.svga', function(videoItem) {
    // 开始处理
})

这里parser.load('svga路径')直接引入本地路径会报incorrect header check，可以放入线上地址，跨域在config文件index.js做下代理

// changeOrigin是否跨域需要填写true
proxyTable: {
  '/svga': {
    target: 'http://xxx.xxx.com/',
    changeOrigin: true
  }
}

跨域解决完成后重启下项目，就可以开始使用啦~

// loops播放次数 0循环播放
player.loops = 1;
player.setVideoItem(videoItem);
// start animation from zero frame
player.startAnimation();
// 结束动画处理
player.onFinished(()=>{
    // ...
})

当loops=0无限循环的情况下不会调用onFinished函数
详细内容请移步至GitHub

3、效果展示