一、使用场景
数据大屏中存在动效的情况下,需要使用此播放器进行处理,例如gmv动效
二、案例代码(html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
<div id="demoCanvas"></div>
<script>
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
let audio = new Audio('xxx/music-1.mp3');//目前谷歌浏览器不能自动播放
parser.load('xxx/gmv-1.svga', function (videoItem) {
player.setVideoItem(videoItem);
// console.log("videoItem", videoItem, player)
if(player){
player.startAnimation();
audio.play();
}
})
player.onFrame(frame => {
// console.log(frame)
})
</script>
</body>
</html>
二、案例代码(react)
js代码
//准备工作:"svgaplayerweb": "^2.3.2"
import SVGA from 'svgaplayerweb';
let fireworks_parser, fireworks_player, fireworks_audio;
let fireworks_bol = false, fireworks_load_bol = false;
let fireworks_videoItem;
let fireworks_parser1, fireworks_player1;
let fireworks_bol1 = false, fireworks_load_bol1 = false;
let fireworks_videoItem1;
//svga预加载(为了处理弱网情况下不能播放的问题)
svgaplayerPreLoad(){
fireworks_parser = new SVGA.Parser('#fireworksDOM');
fireworks_player = new SVGA.Player('#fireworksDOM');
fireworks_bol = false, fireworks_load_bol = false;
fireworks_videoItem;
fireworks_parser1 = new SVGA.Parser('#fireworksDOM1');
fireworks_player1 = new SVGA.Player('#fireworksDOM1');
fireworks_audio = new Audio(`${ossUrl}/xxx/music-1.mp3`);
fireworks_audio.play();
fireworks_audio.pause();
fireworks_bol1 = false, fireworks_load_bol1 = false;
fireworks_videoItem1;
fireworks_parser.load(ossUrl + `/xxx/gmv-1.svga`, function (videoItem) {
fireworks_player.clearsAfterStop = true;
fireworks_videoItem = videoItem;
fireworks_load_bol = true;
// if (!fireworks_bol && fireworks_load_bol) {
// fireworks_bol = true;
// fireworks_player.loops = 1;
// fireworks_player.setVideoItem(fireworks_videoItem);
// fireworks_player.setContentMode('AspectFill');
// // fireworks_audio.play();
// $('#fireworksDOM #gmvNum').html("");
// $('#fireworksDOM #gmvNum,#fireworksDOM .close').show();
// $("#fireworksDOM").show();
// fireworks_player.startAnimation();
// }
});
fireworks_parser1.load(ossUrl + `xxxx/gmv-2.svga`, function (videoItem) {
fireworks_player1.clearsAfterStop = true;
fireworks_videoItem1 = videoItem;
fireworks_load_bol1 = true;
// if (!fireworks_bol1 && fireworks_load_bol1) {
// fireworks_bol1 = true;
// fireworks_player1.loops = 0;//循环次数
// fireworks_player1.setVideoItem(fireworks_videoItem1);
// fireworks_player1.setContentMode('AspectFill');
// // fireworks_audio.play();
// }
});
}
//播放礼物动效
svgaplayerInit(value) {
// fireworks_parser = new SVGA.Parser('#fireworksDOM');
// fireworks_player = new SVGA.Player('#fireworksDOM');
// fireworks_bol = false, fireworks_load_bol = false;
// fireworks_videoItem;
// fireworks_parser1 = new SVGA.Parser('#fireworksDOM1');
// fireworks_player1 = new SVGA.Player('#fireworksDOM1');
// fireworks_bol1 = false, fireworks_load_bol1 = false;
// fireworks_videoItem1;
// const { gmvAnimateInfo } = this.state;
// let that = this;
// fireworks_parser.load(ossUrl + `xxxx/gmv-1.svga`, function (videoItem) {
// // let recordObj = {
// // relation_id: gmvAnimateInfo.id
// // }
// that.recordGMVPopStatusAjax(gmvAnimateInfo);
// fireworks_player.clearsAfterStop = true;
// fireworks_videoItem = videoItem;
// fireworks_load_bol = true;
// if (!fireworks_bol && fireworks_load_bol) {
// fireworks_bol = true;
// fireworks_player.loops = 1;
// fireworks_player.setVideoItem(fireworks_videoItem);
// fireworks_player.setContentMode('AspectFill');
// // fireworks_audio.play();
// $('#fireworksDOM #gmvNum').html("");
// $('#fireworksDOM #gmvNum,#fireworksDOM .close').show();
// $("#fireworksDOM").show();
// fireworks_player.startAnimation();
// }
// });
// fireworks_parser1.load(ossUrl + `xxxx/gmv-2.svga`, function (videoItem) {
// fireworks_player1.clearsAfterStop = true;
// fireworks_videoItem1 = videoItem;
// fireworks_load_bol1 = true;
// if (!fireworks_bol1 && fireworks_load_bol1) {
// fireworks_bol1 = true;
// fireworks_player1.loops = 0;//循环次数
// fireworks_player1.setVideoItem(fireworks_videoItem1);
// fireworks_player1.setContentMode('AspectFill');
// // fireworks_audio.play();
// }
// });
// console.log(fireworks_bol,fireworks_load_bol,!fireworks_bol && fireworks_load_bol)
const { gmvAnimateInfo } = this.state;
let that = this;
that.recordGMVPopStatusAjax(gmvAnimateInfo);
if (!fireworks_bol && fireworks_load_bol) {
fireworks_bol = true;
fireworks_player.loops = 1;
fireworks_player.setVideoItem(fireworks_videoItem);
fireworks_player.setContentMode('AspectFill');
// fireworks_audio.play();
$('#fireworksDOM #gmvNum').html("");
$('#fireworksDOM #gmvNum,#fireworksDOM .close').show();
$("#fireworksDOM").show();
fireworks_player.startAnimation();
fireworks_audio.play();
}
if (!fireworks_bol1 && fireworks_load_bol1) {
fireworks_bol1 = true;
fireworks_player1.loops = 0;//循环次数
fireworks_player1.setVideoItem(fireworks_videoItem1);
fireworks_player1.setContentMode('AspectFill');
// fireworks_audio.play();
}
fireworks_player.onFrame(frame => {
if (frame == 0) gmvStartTime = + new Date();
if (frame == 120) {
numScroll('gmvNum', Number(gmvAnimateInfo.gmv_money), 2000)
function numScroll(id, maxNum, time) {
let numDom = document.getElementById(id)
let numInit = 0
let addNum = maxNum / (time / 10)
let minTime = time / maxNum
let t = setInterval(function () {
if (numInit >= maxNum) {
clearInterval(t)
numDom.innerText = '¥ ' + Number(maxNum).toLocaleString()
} else {
numInit += addNum
numDom.innerText = '¥ ' + Number(Math.round(numInit)).toLocaleString()
}
}, 10)
}
}
})
fireworks_player.onFinished(frame => {
$('#fireworksDOM').hide();
$("#fireworksDOM1 #gmvNum,#fireworksDOM1 .close").show();
$("#fireworksDOM1").show();
fireworks_player1.startAnimation();
if (closeTimer) clearTimeout(closeTimer);
closeTimer = setTimeout(() => {
that.handleBtn('stopGmvAnimate')
}, value * 1000);
fireworks_bol = false;
})
fireworks_player1.onFrame(frame => {
})
fireworks_player1.onFinished(frame => {
gmvEndTime = + new Date();
if(!gmvArr || (gmvArr && gmvArr.length > 0)){
//1.gmv目标数据不存在 2.gmv目标数据存在 持续请求接口
//gmvStartTime>0过程中 gmvEndTime>0已结束
this.getGmvTargetInfoAjax();
}
fireworks_bol1 = false;
})
}
div代码
<div id='fireworksDOM'>
<p id="gmvNum"></p>
<img src={ossUrl + 'xxxx/close-1.png'} className="close" onClick={this.handleBtn.bind(this, 'stopGmvAnimate')} />
</div>
<div id='fireworksDOM1'>
<p id="gmvNum">¥ {handleNumFormat(gmvAnimateInfo.gmv_money)}</p>
<img src={ossUrl + 'xxxx/close-1.png'} className="close" onClick={this.handleBtn.bind(this, 'stopGmvAnimate')} />
</div>
