【笔记】在vue中使用svga动画
安装依赖:npm install svgaplayerweb --saveoryarn add svgaplayerwebhtml:<div class="svgaPage"><div class="btn" @click="playSvga">点击播放</div><div id="svgaBox"></div></div>j
·
安装依赖:
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>
更多推荐
已为社区贡献1条内容
所有评论(0)