Android中加载SVGA格式图片

下面主要讲的是 Android 中加载 SVGA 格式图片，先看效果图：

我的操作顺序是点击：动画二，动画三，动画一，可以看出是依次播放出来的，下面讲的是如何实现上面的效果。

下面主要讲的内容是

配置 gradle ，添加 SVGA 动画
自定义 SVGA 工具类
显示 SVGA 动画

分享一个直接播放 SVGA 动画的网站：http://svga.io/svga-preview.html

GitHub 下载地址：https://github.com/wuqingsen/MySVGA

1. 配置 gradle ，添加 SVGA 动画

首先再项目的 gradle 中添加下面代码：

maven { url 'https://jitpack.io' }

如下图所示：

其次在 app 的 gradle 中加入下面代码：

compile 'com.github.yyued:SVGAPlayer-Android:2.1.1'

如下图所示：

配置完成后，去找几个 SVGA 格式的动画，复制到项目中以便测试，我添加了四个动画，找不到的可以下载我的 Demo ，如下图所示：

2. 自定义 SVGA 工具类

准备工作完成后，就开始写程序了，首先根据需求自定义工具类以便使用，下面是我的工具类。

/*** author: wu* date: on 2018/11/28.* describe:SVGA工具类* 使用时首先调用初始化数据方法，* 然后再调用开始动画的方法*/public class SvgaUtils {private Context context;private ArrayList<String> stringList;private SVGAImageView svgaImage;private SVGAParser parser;public SvgaUtils(Context context,SVGAImageView svgaImage) {this.context = context;this.svgaImage = svgaImage;}/*** 初始化数据*/public void initAnimator() {parser = new SVGAParser(context);stringList = new ArrayList<>();//监听大动画的控件周期svgaImage.setCallback(new SVGACallback() {@Overridepublic void onPause() {Log.e("setCallback", "onPause");}@Overridepublic void onFinished() {//当动画结束，如果数组容器大于0，则移除容器第一位的数据，轮询播放动画。if (stringList != null && stringList.size() > 0) {stringList.remove(0);//如果移除之后的容器大于0，则开始展示新一个的大动画if (stringList != null && stringList.size() > 0) {try {parseSVGA();//解析加载动画} catch (Exception e) {}} else {stopSVGA();}} else {stopSVGA();}}@Overridepublic void onRepeat() {Log.e("setCallback", "onRepeat=" + stringList.size());stopSVGA();}@Overridepublic void onStep(int i, double v) {}});}/*** 显示动画*/public void startAnimator(String svgaName) {stringList.add(stringList.size(), svgaName + ".svga");//如果礼物容器列表的数量是1，则解析动画，如果数量不是1，则此处不解析动画，在上一个礼物解析完成之后加载再动画if (stringList.size() == 1) {parseSVGA();}}/*** 停止动画*/private void stopSVGA() {if (svgaImage.isAnimating() && stringList.size() == 0) {svgaImage.stopAnimation();}}/*** 解析加载动画*/private void parseSVGA() {if (stringList.size() > 0) {try {parser.parse(stringList.get(0), new SVGAParser.ParseCompletion() {@Overridepublic void onComplete(SVGAVideoEntity svgaVideoEntity) {//解析动画成功，到这里才真正的显示动画SVGADrawable drawable = new SVGADrawable(svgaVideoEntity);svgaImage.setImageDrawable(drawable);svgaImage.startAnimation();}@Overridepublic void onError() {//如果动画数组列表大于0,移除第一位的动画,继续循环解析if (stringList.size() > 0) {stringList.remove(0);parseSVGA();} else {stopSVGA();}}});} catch (Exception e) {}} else {stopSVGA();}}
}

可以看出，这里面主要有几个关键的方法：初始化数据，显示动画，停止动画和解析动画。

首先我们要初始化数据，里面添加了动画显示完成的监听，一旦完成便自动的显示下一个动画；其次调用开始动画的方法，里面创建了一个列表，先将动画存储在里面，然后一个个排队拿出来显示；最后是解析动画的方法，真正显示动画是在这个方法中进行的，解析动画完毕后，将动画显示出来。

3. 显示 SVGA 动画

首先要在布局中添加 SVGA ，如下面代码：

    <com.opensource.svgaplayer.SVGAImageViewandroid:id="@+id/svgaImage"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentTop="true"app:autoPlay="true"app:loopCount="1" />

其次去 Activity 中添加代码就可以显示出来动画了，如下面代码：

public class MainActivity extends AppCompatActivity {private Button button1, button2, button3, button4;private SVGAImageView svgaImage;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);button1 = findViewById(R.id.button1);button2 = findViewById(R.id.button2);button3 = findViewById(R.id.button3);button4 = findViewById(R.id.button4);svgaImage = findViewById(R.id.svgaImage);final SvgaUtils svgaUtils = new SvgaUtils(MainActivity.this,svgaImage);svgaUtils.initAnimator();button1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {svgaUtils.startAnimator("aixin");}});button2.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {svgaUtils.startAnimator("bujibao");}});button3.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {svgaUtils.startAnimator("shengri");}});button4.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {svgaUtils.startAnimator("youleyuan");}});}
}

上面代码中的 "aixin"、"bujubao"、"shengri"、"youleyuan" 这是 SVGA 我复制过来动画的名字。~~

更多开发文档参考：https://github.com/yyued/SVGAPlayer-Android