SVGA 是一種跨平台的開源動畫格式，同時兼容 iOS / Android / Web。SVGA 除了使用簡單，性能卓越，同時讓動畫開發分工明確，各自專注各自的領域，大大減少動畫交互的溝通成本，提升開發效率。在web中引用會將動畫轉為Canvas
1，安裝插件 npm install svgaplayerweb —save
2，在組件中引用 import SVGA from "svgaplayerweb"
3，使用
<template>
<div id="demoCanvas" ref="demoCanvas"></div>
</template>
<script>
import SVGA from "svgaplayerweb";
export default {
data(){
return{
bgImg:'https://file.nidong.com/upload/gift/20200520/upload_l3xlns9v1in4heomhwgbndzxt8quc9yb.svga'
}
},
mounted() { //
SVGA只能在頁面渲染好后執行因為需要獲取頁面中id為‘demoCanvas’的標簽
this.setFill();
this.SVGA();
},
methods: {
SVGA() {
let player = new SVGA.Player("#demoCanvas");
let parser = new SVGA.Parser("#demoCanvas");
parser.load(this.bgImg,function(videoItem) {
//this.bgImg，圖片路徑需要線上地址，本地引用會報錯
player.setVideoItem(videoItem);
player.startAnimation();
}
);
},
setFill() {
//適配不同屏
var $_canvas = document.getElementById("demoCanvas"),
w = window.innerWidth,
h = window.innerHeight,
screen_proportion = h / w,
svga_proportion = 16 / 9;
if (screen_proportion > svga_proportion) {
//長屏幕
$_canvas.style.width = h / svga_proportion + "px";
$_canvas.style.left = (w - h / svga_proportion) / 2 + "px";
} else {
$_canvas.style.height = w * svga_proportion + "px";
$_canvas.style.top = (h - w * svga_proportion) / 2 + "px";
}
}
}
};
</script>
<style lang="scss" scoped>
#demoCanvas {
//因需求背景為動態圖
position:fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
</style>