转： SVGA使用心得

https://blog.csdn.net/bjhan_csdn/article/details/96182709

 

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函数中，我们可以设置

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

 

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

 

结语：

svga可以很好的节省动效开发的时间，而且具有很好的兼容性，还可以完美还原设计稿。但是svga毕竟是一个动画文件，毕竟动画的方式是唯一的，所以对于多样性的根据用户操作来实现个性化展示的 还是需要依托于基础的js或者css来控制实现。
————————————————
版权声明：本文为CSDN博主「永远的大白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bjhan_csdn/article/details/96182709