svga动画显示

最新推荐文章于 2024-03-12 17:07:42 发布

清净..

最新推荐文章于 2024-03-12 17:07:42 发布

阅读量223

点赞数 1

分类专栏： svga 文章标签： vue.js npm javascript

本文链接：https://blog.csdn.net/D5498543/article/details/134421020

版权

svga 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

PC端

一个社交app后台管理系统，客户要求新增上传svga格式的礼物，上传没有什么特别的，就是正常上传图片，后端返回一个文件地址

返回地址后想播放这个svga动画需要下载依赖

npm i svgaplayerweb

然后在vue组件中引入

import SVGA from "svgaplayerweb"; // 引入SVGA

<div id="canvas" :style="{width:50px,height:50px}"></div>

简单播放svga动画

let player = new SVGA.Player(`#canvas`);
      player.loops = this.loops || 0; // 0表示无限循环
      player.clearsAfterStop = false;  
      // 创建解析者
      let parser = new SVGA.Parser(`#canvas`);
      console.log(this.src); // svga动画地址
      parser.load(this.src,videoItem => {
          player.setVideoItem(videoItem);
          player.startAnimation();
        }
      );

可能出现的报错：

我发现报错的原因是因为这个 npm i svgaplayerweb 这个依赖不支持svga1.0的

解决方法：前往svga官网转换 svga版本，将1.0转成2.0 https://svga.io/svga-preview.html

➢TypeError: (this. _owner._ drawingCanvas 1 this. _owner.. container) .getContext is not a function

原因：就是播放的时候还没有获取到HTML元素

解决方法：可以考虑将代码放到mounted生命周期函数内执行

为了方便，我将svga播放封装成一个组件, 大家可以借鉴一下--->

<template>
  <div :id="svId" :style="styleObj || {}"></div>
</template>

<script>
import SVGA from "svgaplayerweb"; // 引入SVGA
let svgaId = 0; // id序号

export default {
  name: "svga",
  props: [
    "src", // String  资源路径
    "loops", // Number  循环播放次数 默认为最大正整数
    "onFrame", // Function 每帧执行回调
    "styleObj", // Object  style-obj 绑定的style样式
    "mode", // String  可选 "ScaleToFill" | "AspectFill" | "AspectFit"
    "onlyTag" // String  only-tag 唯一标识，每帧/执行完毕 函数回调时标识，用户同一动画，多出显示
  ],
  data() {
    return {
      svId: `svga-id-${svgaId++}` // 动态生成id,处理页面多个svga的情况
    };
  },
  watch: {
    src() {
      this.play(); // svga路径切换后重新播放
    }
  },
  mounted() {
    this.play(); 
  },
  methods: {
    // 播放
    play() {
      let player = new SVGA.Player(`#${this.svId}`);
      player.loops = this.loops || 0; // 0表示无限循环
      player.clearsAfterStop = false;  
      // 创建解析者
      let parser = new SVGA.Parser(`#${this.svId}`);
      console.log(this.src);
      parser.load(
        this.src,
        videoItem => {
          player.setVideoItem(videoItem);
          player.setContentMode(this.mode || "AspectFit");
          player.startAnimation();
          player.onFinished(() => this.onFinished?.(this.onlyTag));
          player.onFrame(frame => this.onFrame?.(frame, this.onlyTag));
        },
        err => {
          console.log(err);
          this.$emit("uploadError");
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped></style>