大大大白鹅

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>

posted on 2021-12-25 15:06  大大大白鹅  阅读(771)  评论(0编辑  收藏  举报

导航