SVGAPlayer入门
下载：
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web
WEB本地运行：
SVGAPlayer-Web-master>http-server
目标：本地动画运行，背景透明
本地html代码：
<html>
<body style="text-align: center">
<div>
<div id="testCanvas" style="background-color: transparent; width:800px; height: 500px; margin: auto"></div>
<!-- <canvas id="testCanvas" width="500" height="500" style="background-color: #000000; "></canvas> -->
</div>
<script src="https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js"></script>
<!--[if lt IE 10]>
<script src="../build/svga.ie.min.js"></script>
<![endif]-->
<!--[if gte IE 10]><!-->
<script src="http://assets.dwstatic.com/common/lib/??jszip/3.1.3/jszip.min.js,jszip/3.1.3/jszip-utils.min.js" charset="utf-8"></script>
<script src="../build/svga.min.js"></script>
<!--<![endif]-->
<script>
var parser = new SVGA.Parser('#testCanvas')
var player = new SVGA.Player('#testCanvas')
parser.load("./samples/rose1.svga", function (videoItem) {
player.setImage('./samples/avatar.png', '99')
player.setVideoItem(videoItem);
player.setText({
text: 'Hello, World!',
size: "48px",
color: "#ffffff",
offset:{x: 10.0, y: 0.0}
});
player.startAnimation();
// player.startAnimationWithRange({location: 20, length: 1}, false);
}, function(error) {
alert(error.message);
})
</script>
</body>
</html>
展示效果：
相关参考：
直播App中Android酷炫礼物动画实现方案：SVGA由来与Lottie对比
https://www.aliyun.com/jiaocheng/1767918.html
SVGAPlayer学习总结
https://www.jianshu.com/p/31169385a39d
SVGA 框架 ImageKey 在flash软件中定义的办
https://blog.csdn.net/ripe_boy/article/details/80729164
