SVGA在前端方面的使用

<script src="js/svga.min.js"></script>

2、声明一个 dom对象 

<div id="demo" style="width: 100%;height: 100%;"></div>

3、播放svga

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) {    });
})

是不是 感觉流程很熟悉！要的就是这种感觉！

至于svgaPlayer 只需要查阅其api说明就可以了！这个过程是任何api学习都省不掉的，还好svgaPlayer的api不是很多一会就能看完，这里不多说，自己查阅SVGA SVGAWeb。

svgaPlayer的本质

svgaPlayer的本质其实是canvas封装应用，解放了canvas来实现动画时候各种兼容卡顿刁钻的问题；就像jQuery库封装了js各种方法，让js变的so easy!

二、svga应用方面

简单动效

直播礼物动效、页面炫酷背景效果、......

交互实现

如果简单的理解svga只能提供简单的动效，就错了，如果您已经看到svgaplayer提供的api方法，就会发现svagplayer在播放动效过程中，能控制播放开始、播放某一帧、播放结束等整个过程的一套流程方法供你进行交互行为！详细可自行查阅SVGAWeb。

三、应用中的问题与解决方案

1、动画加载问题，复杂的动画，打包之后文件较大加载受到影响，特别是移动端，尤为明显；

举一个简单的例子，比如一个宝箱的开宝箱动画（当然可能不恰当，这里举例说一种思路方案），一般会有一个开宝箱的开宝箱的预备动效（我们暂且简称预备动效），打开之前一直重复同一段预备动效，然后是开宝箱打开的动效（我们暂且简称打开动效 ），通常会把这两部分做成一个 svga，分段控制动画播放，但是如果整个打包svga非常大的话，显示宝箱因为加载svga而感觉到延迟，那么怎么解决呢？
svga拆包 分段控制 因为预备动效是一段重复的相对简单的效果，那我们可以把svga单独做成svga，按需加载，这样预备动效的加载会很快，提高页面的实时交互渲染效果。

2、另一方面就是预加载方案，利用h5中rel属性的prefetch预加载功能（关于prefetch预加载其它方面的使用可以网络搜索了解）；

它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了。 方法简单如下

<link rel="prefetch" href="****.svga" as="fetch">

3、关于svga动画文件制作过程中文件优化的问题，设计师要特别注意，不管是从素材，还是帧率方面，这里不再细述。

四、svga优势

gif、css3、js实现的动效方面特点

gif：gif广泛的支持internet标准，支持无损耗压缩和透明度，但是gif只支持256色调色板，丢失图像颜色信息，特别是对透明度的支持略显逊色。

css3：css3在写元素的动态展现效果上堪称完美，但是对于复杂的动画，无法满足交互行为，而且动画的沟通成本有所增加，需要不停的修改到设计确认修改再到设计确认。

js动画：不管是写原生js还是用js库（通常jQuery等提供了各种基本的效果），最大的问题在于对，资源占用、性能的消耗。

svga动效的特点

1、看得见的视觉方面的提升，动画质量可控；
2、看不见的性能方面的提升；
3、svga的使用，让开发分工更明确；
设计师所想即所成，设计出效果直接导出svga文件，减少设计与前端不断调试动画效果的沟通成本，从而前段开发者可以专注逻辑开发！
4、svga支持音频播放；
这一点因没有实际需求用到此功能，暂时没哟尝试过功能的效果。

五、svga后面探索

有一个突出的特性，svga既然支持音频播放，考虑是否可以将视频转换成svga，模拟出视频的效果.