【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 {
        player: null,
        parser: null,
    }
}

mounted() {
    this.initMachineSVGA();
}

initMachineSVGA() {
    let player = new SVGA.Player('#demoCanvas');
    let 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> 试水一波。