【vue系列】SVGA在Vue項目中的使用(TypeScript)

在客戶端內嵌h5的動畫場景，很是適合SVGA。SVGA 是一種同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式。svga是全新的動畫格式，提供高性能動畫播放體驗。

svga 安裝和引用

// 安裝
npm install svgaplayerweb --save

// 引入svgaplayerweb插件
import SVGA from 'svgaplayerweb';

// 引入svga

複製代碼

1. 手動加載

自行建立 Player 和 Parse 並加載動畫 1.添加 Div 容器

<div id="drawBtn"></div>
複製代碼

2.添加動畫

data () {
    return {
        machineSVGAPlayer: null,
        machineSVGAParser: null,
    }
}

mounted() {
    this.initMachineSVGA();
}


var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); 
parser.load('rose_2.0.0.svga', function(videoItem) {
    player.setVideoItem(videoItem);
    player.startAnimation();
})
複製代碼

2. 預加載處理

使用場景：一列禮物上都須要展示svga，能夠讓全部的禮物都使用同一個svga展示，不須要加載屢次svga資源。

import svgaTools, { ISvgaPlayer } from './svgaTools';
複製代碼

// 頁面掛載後就執行svga動畫
mounted() {
    // this.initSVGA(LEN); // 你能夠直接出示化該svga

    // 可是若是你這個組件是在某個時機才展示，你才能獲取到目標元素，初始化svga，能夠經過定時器查詢，獲取到目標元素後再初始化svga
    this.$nextTick(() => {
        let el = document.getElementById('svga_pop_gift_0');
        this.timer = setInterval(() => {
            if(el) {
            this.initSVGA(LEN);
            clearInterval(this.timer);
            } else {
            el = document.getElementById('svga_pop_gift_0');
            }
            
        }, 50);
    });
}

/**
* 初始化svga
* GiftsLEN 禮物個數
*/
initSVGA(GiftsLEN: number) {
    this.SVGAArr.length = GiftsLEN;

    for (let i = 0; i < GiftsLEN; i++) {
    const curEl = `#svga_pop_gift_${i}`;
    svgaTools
        .loadSvga('smailActiveBox', curEl)
        .then((player: ISvgaPlayer) => {
        player.startAnimation();
        });
    }
}
複製代碼

你想要的 svgaTools.ts 文件在這裏：

import SVGA from 'svgaplayerweb';

// svga資源命名
type svgaNames =
  'bigActiveBox' |
  'smailActiveBox';

interface ISvgaSource {
  [key: string]: any;
}

export interface ISvgaPlayer {
  loops: number;
  fillMode: 'Backward' | 'Forward';
  startAnimation(): void;
  setVideoItem(item: any): void;
  onFinished(cb: Function): void;
  onFrame(cb: Function): void;
}

export interface ISvgaTools {
  cache: {
    [key: string]: any;
  };
  loadSvga(sourceName: svgaNames, elementId: string, loop?: number): Promise<ISvgaPlayer>;
  preload(): void;
}

// svga資源
export const svgaSource: ISvgaSource = {
  bigActiveBox: 'https://s.momocdn.com/w/u/others/2021/03/05/1614931412732-100_100.svga',
  smailActiveBox: 'https://s.momocdn.com/w/u/others/2021/03/05/1614931412813-78_78.svga',
};

const svgaTools: ISvgaTools = {
  cache: {
  },
  loadSvga(source: svgaNames, elementId: string, loop: number = 0) {
    return new Promise((resolve, reject) => {
      let svgaPlayer: ISvgaPlayer;
      const sourceItem = this.cache[source];
      const url = svgaSource[source];
      svgaPlayer = new SVGA.Player(`${elementId}`);
      if (sourceItem) {
        svgaPlayer.loops = loop; // 設置循環播放次數是 無限
        svgaPlayer.fillMode = 'Forward'; // 設置循環播放次數是 無限
        svgaPlayer.setVideoItem(sourceItem);

        resolve(svgaPlayer);
      } else {
        const parser = new SVGA.Parser(`${elementId}`);
        parser.load(url, (videoItem: any) => {
          this.cache[source] = videoItem;
          svgaPlayer.loops = loop; // 設置循環播放次數是 無限
          svgaPlayer.setVideoItem(videoItem);
          resolve(svgaPlayer);
        });
      }
    });
  },
  preload() {

  }
};

export default svgaTools;
複製代碼

支持音頻播放

svga還支持音頻播放，模擬出視頻的效果。後續能夠考慮經過 <script src="https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js"></script> 試水一波。