uniapp中使用svga动画,编译到app h5,不支持小程序
<template>
<view>
<div id="svgaBox" ></div>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onReady() {
},
methods: {
}
}
</script>
<script module="renderScript" lang="renderjs">
// 使用this.$ownerInstance.callMethod(‘组件的方法名’,‘参数’) 传参数给组件
// npm install svgaplayerweb —save
import SVGA from 'svgaplayerweb'
export default {
data() {
return {
player:{},
parser:{}
}
},
mounted() {
// 动态引入类库
const script = document.createElement('script')
script.src = SVGA
document.head.appendChild(script)
script.onload = this.ready()
},
methods: {
ready(){
this.player = new SVGA.Player(document.getElementById('svgaBox'));
this.parser = new SVGA.Parser(document.getElementById('svgaBox'));
//注意,这里必须是服务器地址,否则报错
this.parser.load('https://udimg.12861.ltd/lpz.svga',
(videoItem)=> {
this.player.loops = 100000; // 设置循环播放次数是1
this.player.setVideoItem(videoItem);
this.player.startAnimation();
// 动画播放至某帧后回调
this.player.onFrame((i)=>{
// console.log("播放到第"+i+"帧")
})
// 动画播放至某进度后回调
this.player.onPercentage((i)=>{
// console.log("播放到"+(i*100)+"%")
})
// 动画播放结束回调
this.player.onFinished(res=>{
console.log("动画结束")
// 清空画布
this.player.clear()
})
}
);
}
}
};
</script>
<style>
#svgaBox{
background-color: #07D4D2;
width: 750rpx;
height: 750rpx;
}
</style>