前端使用SVGA（亲测可用）

正在路上_

已于 2023-09-28 11:25:01 修改

阅读量2.7k

点赞数 2

文章标签：前端 javascript vue

于 2023-09-26 15:18:25 首次发布

本文链接：https://blog.csdn.net/weixin_53571467/article/details/133309346

版权

本文介绍了SVGA，一种轻量级且跨平台的动画格式，讲解了如何简单使用、处理本地与跨域问题，以及load函数的重要参数设置。通过实例演示了从安装到配置的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 认识了解svga

不想听俺啰嗦的可以去官网 svga官网地址
SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率，主要还是体积很小，对比前端的gif以及序列帧等动画来说体积很小。看实操：

2. 基本使用

草履虫都能学会的懒人使用法对着下面步骤走：

第一步：依赖下载

npm install svgaplayerweb —save

第二步：页面使用

// html  需要使用的容器
<div id="demoCanvas" class="demoCanvas"></div>

// javascript  引入下载的依赖
import SVGA from 'svgaplayerweb';

// mounted中  引入方法
mounted(){
// 如果首次进入会报错 或者不展示svga的话可以使用$nextTick  （我是加了的 不然首次不展示）
	this.$nextTick(() => {
		this.initMachineSVGA();
	})
}

// methods中方法
methods: {
	initMachineSVGA() {
		let player = new SVGA.Player('#demoCanvas');
		let parser = new SVGA.Parser('#demoCanvas');
		// '@/static/svga/xiaoren.svga' svga文件地址
		parser.load('@/static/svga/xiaoren.svga', function(videoItem) {
			player.setVideoItem(videoItem);
			player.startAnimation();
			console.log(videoItem, '成功')
		}, function(error) {
			console.log(error, '失败');
		})
	},
}

好结束。当你去运行时就会出现svga报错incorrect header check 大概原因就是因为你因为的svga地址是本地地址，暂不支持。很好解决只需把你的svga图片告诉后台，让他给你放在服务器上，最后给你一个地址，你使用这个地址来获取图片。实操如下：

解决报错incorrect header check：

// 例如这是后端给你的地址  这里需要有些注意的点后面讲
http://192.1.1.1:80/static/svga/xiaoren.svga

// 我们只需要把这个地址放在刚刚放文件的地址哪里替换一下
parser.load('http://192.1.1.1:80/static/svga/xiaoren.svga', function(videoItem) {})

// 这个时候就会解决incorrect header check这个问题

新问题就来了：（跨域）

当然这个很好解决配置config解决跨域呀

// vue.config.js
module.exports = {
	// changeOrigin是否跨域需要填写true
	proxy: {
		'/static': {
			target: 'http://192.1.1.1:80',  // 服务器地址
			changeOrigin: true
		}
	}
}

// 配置完跨域回到页面中 替换掉http地址
initMachineSVGA() {
	let player = new SVGA.Player('#demoCanvas');
	let parser = new SVGA.Parser('#demoCanvas');
	
	// 需要注意的点 不知道大家会不会遇到 我是这样搞得
	// 1. 这个地址中需要有/svga这个文件路径 也就是说需要后台新建一个svga的文件夹把这个svga
	//    放里面如果没有/svga这一项好像不太行 我是没成功之后找后台从新换的路径 如果是我理解
	//    错了希望大佬指点一二
	// 这样这里的/static到时就会匹配代理中的路径 解决跨域
	parser.load('/static/svga/xiaoren.svga', function(videoItem) {
	player.setVideoItem(videoItem);
		player.startAnimation();
		console.log(videoItem, '正确')
	}, function(error) {
		console.log(error, '错误');
	})
},