作者:从容嘛_100 | 来源:互联网 | 2023-08-29 10:37
原标题:抽奖动画 - 播放svga动画
svga动画
本文介绍的动画不是css,js动画,是使用插件播放svga文件。
1.需求
UI同学在做一个春节活动,活动中需要有个开场动画,原本想的简单,不涉及接口调用逻辑,就直接用做一个gif图片由前端来显示就好了,但是这个gif做出来之后图片太大了,页面加载慢,如下图1
gif图片还有一个问题,透明部分会显示成黑色,不符合预期。再者就是这个图片太大了,有1.3M。
后来UI同学换了一种格式,apng动画,APNG(Animated Portable Network Graphics)诞生于2004年,是PNG的位图动画扩展。可以简单地理解为PNG格式的动画版。但是UI同学做出来文件体积更大了,这个文件有2文章来源站点https://www.yii666.com/.9M,如下图2
最后UI同学尝试使用svga动画,这种格式动画体积小,只有33kb,但是有个问题svga文件不能在浏览器中直接播放,需要引用第三方插件,就诞生了这个需求。
2.思路
说是思路,其实就是使用svga插件来播放这个动画文件,官方已经有说明文档,只要照着这个文档来写就可以实现。
3.实现过程
这个项目是使用svelte来实现的,这个框架和vuewww.yii666.com有些类似,这里不展开说明,只介绍如何实现这个播放功能。
3.1 canvas容器
svga播放使用canvas容器来播放,html代码如下图:
3.2 播放器
初始化播放器参考官方文档照葫芦画瓢了,代码如下:
3.3调用方式
调用方式如下:
注意传入两个参数中第一个是svga文件地址,可以是本地或者远程cdn地址,第二个参数playerConfig是播放配置,覆盖默认配置,参考官方文档。
最后效果如下:
参考:
https://baijiahao.baidu.com/s?id=1681715610129777960&wfr=spider&for=pc
https://github.com/svga/SVGAPlayer-Web-Lite
来源于:抽奖动画 - 播放svga动画