标签：动画 SVGA web player csdn 使用 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
标签：动画,SVGA,web,player,csdn,使用,svga,心得 来源： https://www.cnblogs.com/dhjy123/p/15438237.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。