前端使用SVGA（亲测可用）

文章目录

1. 认识了解svga2. 基本使用3. 效果展示4. 重要的load

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.jsmodule.exports = {// changeOrigin是否跨域需要填写trueproxy: {'/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, '错误');})},

3. 效果展示

这里是个动图 我只截个屏意思一下效果：

4. 重要的load

在load的callback函数中，我们可以设置对应参数及值

loop 循环的次数clearsAfterStop 动画结束都是否清除svga，这里不设置 默认truesetVideoItem 需要获取load返回参数才能生效startAnimation 开始动画pauseAnimation 暂停动画stopAnimation 停止动画onFrame 可以通过这个函数知道当前动画播放的第几帧

完结！ 有错误希望大佬指点 也是刚搞出来这个东西

本文链接：https://www.kjpai.cn/news/2024-04-29/163384.html，文章来源：网络cs，作者：付梓，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！