svga动画图在vue中使用

September 18, 2021 850

一、svga在vue中使用：

  1. 安装依赖：
    1
    npm install svgaplayerweb --save
  2. 引入方式：
    1
    2
    3
    //   parser.load("@/assets/img/byb.svga", videoItem => { // 错误的引入方式，会报错incorrect header check
    //   parser.load("../../assets/img/svga/byb.svga", videoItem => { // 错误的引入方式
    //   使用@ 或者是../的形式都会报错，图片放在static中也是会报错，我的解决办法是放在了public的img文件夹中
  3. js中调用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    loadSvga() {
          let that = this;
          var player = new SVGA.Player("#demoCanvas");
          var parser = new SVGA.Parser("#demoCanvas");
          parser.load(
            "svga/background.svga",
            function(videoItem) {
              player.setVideoItem(videoItem);
              player.startAnimation();
              that.isShowBackground = false;
            },
            function(err) {
              console.log("ERR", err);
            }
          );
        },