1. 什么是SVGA

SVGA 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Web。SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。动画设计师专注动画设计,通过工具输出 svga 动画文件,提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单!
SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。
动画设计师专注动画设计,通过工具输出 svga 动画文件,提供给开发工程师在集成 SVGAPlayer 之后直接使用。

2. 效果图

在这里插入图片描述

3. 安装依赖
npm install svgaplayerweb --save
4. svga.vue
<template>
    <div class="container">
        <div id="demoCanvas" class="svga" ref="canvas"></div>
    </div>
</template>
<script>
import SVGA from "svgaplayerweb";

export default {
    data() {
        return {};
    },
    created() {},
    mounted() {
        var player = new SVGA.Player("#demoCanvas");
        var parser = new SVGA.Parser("#demoCanvas");
        parser.load("/svga/01.svga", function(videoItem) {
            player.setVideoItem(videoItem);
            player.startAnimation();
        });
    }
};
</script>
<style>
.svga {
    width: 200px;
    height: 200px;
    margin: 100px auto;
}
</style>
5. incorrect header check解决办法

之前有同学问我这个,确实开发中也遇到了,这里补充下怎么解决的。
在这里插入图片描述
因为是之前这里写的是直接引入本地文件,默认是访问不到会出现 incorrect header check 报错问题
在这里插入图片描述
之前我做的时候也遇到了这个问题,是跟后端沟通,把文件放在服务器上,然后本地去做访问。
在这里插入图片描述

那我们可以通过后端给的地址,通过服务器地址访问试下。
在这里插入图片描述
好家伙,又出现了跨域,因为本地项目地址和服务器的域名地址不一致所以会出现跨越。
在这里插入图片描述
那我们可以在通过 vue.config.js 里面做代理处理(因为我是把文件直接放在 svga 文件夹下的,所以可以通过 /svga 去匹配到这个地址)
在这里插入图片描述
注意的是,这里改了,页面引入就要改成 /svga/01.svga 才能匹配到代码地址

parser.load("/svga/01.svga", function(videoItem) {
  	player.setVideoItem(videoItem);
   player.startAnimation();
});

不用担心发布后能不能访问,发布打包后项目会处于同一域名,不会出现跨越问题。

Logo

前往低代码交流专区

更多推荐