vue下引入YY的SVGA

官方文檔:https://github.com/yyued/SVGAPlayer-Web

官方沒有關於在VUE下的使用方法,在網上查了半天也沒找到,項目又急着用,就自己寫了個方法

// HTML
<div id="demoCanvas" ref="demoCanvas"></div>

// 在組件中引入
import SVGA from 'svgaplayerweb'

// 在方法中使用
    SVGA (msg) {
      let player = new SVGA.Player('#demoCanvas')
      let parser = new SVGA.Parser('#demoCanvas')
      parser.load(msg, function (videoItem) {
        player.loops = 1 // 設置循環播放次數是 1
        player.setVideoItem(videoItem)
        player.stepToFrame(0, true) // 從指定幀開始播放動畫
        player.onFrame((i) => {
          console.log(i) // 。這裏輸入的是動畫的幀數
          if (i >= 24 && i < 26) {
            console.log('111')
          } else if (i >= 70) {
            player.clear()
          }
        })
      })
    },

轉載請註明出處

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章