SVGA使用心得

1、什么是SVGA

SVGA是一种动画格式，可以兼容安卓、ios和web，可以实现很多复杂的动画，这样开发就不用头疼canvas来实现动画时的卡顿优化问题了。

2、引入SVGA

因为博主是前端方向的，所以这里只介绍web页面如何引入，这个是SVGA官方的web地址，如果大家感兴趣可以看一下

和正常js引入一样，我们是需要script引入即可。

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

在引入svga之后，我们需要在html中生命一个对象来存放svga动画。

<div id="demoCanvas" style="width: 30%;height: 30%;"></div>

这里只是简单定义。

3、让svga动起来

var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); 
parser.load('img/bb.svga', function(videoItem) {
    player.loops = 2;
    player.clearsAfterStop = false;
    player.setVideoItem(videoItem);
    player.startAnimation();
    player.onFrame(function (i) {
    });
})

我们可以看到，需要定义Player和Parser来统一完成一个动画的实现。

在load的callback函数中，我们可以设置

1. loop 循环次数
2. clearsAfterStop 动画结束都是否清楚内容，注意，这里如果不设置 默认true
3. setVideoItem 需要获取load返回参数才能生效
4. startAnimation 开始动画
5. pauseAnimation 暂停动画
6. stopAnimation  停止动画
7. onFrame 我们可以通过这个函数知道当前动画是播放的第几帧，然后根据具体业务需求展示效果。

4、svga的读取是依赖canvas的

可以看出 我们可以动过调节对象元素的样式来实现canvas的控制。

 

结语：

svga可以很好的节省动效开发的时间，而且具有很好的兼容性，还可以完美还原设计稿。但是svga毕竟是一个动画文件，毕竟动画的方式是唯一的，所以对于多样性的根据用户操作来实现个性化展示的 还是需要依托于基础的js或者css来控制实现。