SVGA播放器集成
[svga官网](http://svga.io/integrated.html)
[svga Github地址](https://github.com/svga)
根据需要这里展示的是基于web开发
推荐使用[SVGAPlayer-Web-Lite](https://github.com/svga/SVGAPlayer-Web-Lite)
web版官方解释： 这是一个 SVGA 在移动端 Web 上的播放器，它的目标是 更轻量、更高效实现
`安装`
```bash
yarn add svga
# 或者
npm i svga
```
`CDN`
```html
<script src="https://cdn.jsdelivr.net/npm/svga/dist/index.min.js"></script>
```
`使用`
```html
<div id="demo" style="width: 100%;height: 100%;"></div>
```
```js
var player = new SVGA.Player('#demo');
var parser = new SVGA.Parser('#demo');
parser.load('**/**.svga', function(item) {
player.loops = 2;
player.clearsAfterStop = false;
player.setVideoItem(item);
player.startAnimation();
player.onFrame(function (i) { });
})
```
* 三大支持
`1. 支持webpack打包`
```js
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svga$/i,
use: 'url-loader'
}
]
}
}
// js
import { Parser } from 'svga'
import xx from './xx.svga'
const parser = new Parser()
const svga = await parser.load(xx)
```
`2. 支持TS`
```typescript
// global.d.ts
declare module '*.svga'
```
`3. 支持Vite`
```js
// vite.config.ts
export default defineConfig({
assetsInclude: [
'svga'
]
})
// js
import { Parser } from 'svga'
import xx from './xx.svga?url'
const parser = new Parser()
const svga = await parser.load(xx)
```
* 应用中的问题与解决方案
1、动画加载问题，复杂的动画，打包之后文件较大加载受到影响，例如移动端
举一个简单的例子，比如一个宝箱的开宝箱动画（当然可能不恰当，这里举例说一种思路方案），一般会有一个开宝箱的开宝箱的预备动效（我们暂且简称预备动效），打开之前一直重复同一段预备动效，然后是开宝箱打开的动效（我们暂且简称打开动效 ），通常会把这两部分做成一个 svga，分段控制动画播放，但是如果整个打包svga非常大的话，显示宝箱因为加载svga而感觉到延迟，那么怎么解决呢？
svga拆包 分段控制 因为预备动效是一段重复的相对简单的效果，那我们可以把svga单独做成svga，按需加载，这样预备动效的加载会很快，提高页面的实时交互渲染效果。
2. 预加载方案，利用h5中rel属性的prefetch预加载功能（关于prefetch预加载其它方面的使用可以网络搜索了解）；
它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了。 方法简单如下
```html
<link rel="prefetch" href="****.svga" as="fetch">
```
3、关于svga动画文件制作过程中文件优化的问题，设计师要特别注意，不管是从素材，还是帧率方面，这里不再细述。
* 本质
svgaPlayer的本质其实是canvas封装应用，解放了canvas来实现动画时候各种兼容卡顿刁钻的问题；就像jQuery库封装了js各种方法，让js变的so easy!
* 应用
#### 简单动效
直播礼物动效、页面炫酷背景效果、......
#### 交互实现
如果简单的理解svga只能提供简单的动效，就错了，如果您已经看到svgaplayer提供的api方法，就会发现svagplayer在播放动效过程中，能控制播放开始、播放某一帧、播放结束等整个过程的一套流程方法供你进行交互行为
#### 特点
1、看得见的视觉方面的提升，动画质量可控；
2、看不见的性能方面的提升；
3、svga的使用，让开发分工更明确；
设计师所想即所成，设计出效果直接导出svga文件，减少设计与前端不断调试动画效果的沟通成本，从而前段开发者可以专注逻辑开发！
4、svga支持音频播放；
网友评论