vue使用SVGA

 

背景vue2使用svga。

 

可用的JS库svga和svgaplayerweb

 

svga

import { Parser, Player } from 'svga'

<button @click="startPlayerSVGA">start</button>
<button @click="stopPlayerSVGA">stop</button>
<canvas class="learn-vga-container" id="svga-container"></canvas>

import { Parser, Player } from 'svga'

playerSVGA: null,
parserSVGA: null,


// 创建svga播放
    async creatPlayerSVGA(){
      this.parserSVGA = new Parser()
      const svga = await this.parserSVGA.load('/svg/index-01-an.svga')
      this.playerSVGA = new Player(document.getElementById('svga-container'))
      await this.playerSVGA.mount(svga)
      // console.log(this.playerSVGA)
      // this.playerSVGA.onStart = () => console.log('onStart')
      // this.playerSVGA.onResume = () => console.log('onResume')
      // this.playerSVGA.onPause = () => console.log('onPause')
      // this.playerSVGA.onStop = () => console.log('onStop')
      // this.playerSVGA.onProcess = () => console.log('onProcess', this.playerSVGA .progress)
      // this.playerSVGA.onEnd = () => console.log('onEnd')
      // 开始播放动画
      this.playerSVGA.start()
    },
    // 暂停svga
    stopPlayerSVGA(){
      this.playerSVGA.pause()
      // 继续播放动画
      // this.playerSVGA.resume()
    },
    // 重新开始svga
    startPlayerSVGA(){
      this.playerSVGA.start()
    },
    // 销毁svga
    destroyPlayerSVGA(){
      if (this.playerSVGA||this.parserSVGA) {  
        // 卸载动画资源，防止内存泄漏  
        this.parserSVGA.destroy()
        this.playerSVGA.destroy() 
        this.parserSVGA = null
        this.playerSVGA = null
      }  
    },
        
        
        
beforeDestroy() {  
    this.destroyPlayerSVGA()
    this.destroyPlayerSVGATwo()
    this.destroyPlayerSVGAThree()
}, 

 

 

 

 

svgaplayerweb

import SVGA from 'svgaplayerweb';

 

这个有个坑就是在销毁时需要清除调用的API居然是stopAnimation(true)

 

this.playerSVGA.stopAnimation(true)

this.playerSVGA.clearDynamicObjects()

this.playerSVGA.clear()  

this.playerSVGA = null;