Android中加载SVGA格式图片

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

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

下面主要讲的内容是

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

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() {
            @Override
            public void onPause() {
                Log.e("setCallback", "onPause");
            }

            @Override
            public 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();
                }
            }

            @Override
            public void onRepeat() {
                Log.e("setCallback", "onRepeat=" + stringList.size());
                stopSVGA();
            }

            @Override
            public 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() {
                    @Override
                    public void onComplete(SVGAVideoEntity svgaVideoEntity) {
                        //解析动画成功，到这里才真正的显示动画
                        SVGADrawable drawable = new SVGADrawable(svgaVideoEntity);
                        svgaImage.setImageDrawable(drawable);
                        svgaImage.startAnimation();
                    }

                    @Override
                    public void onError() {
                        //如果动画数组列表大于0,移除第一位的动画,继续循环解析
                        if (stringList.size() > 0) {
                            stringList.remove(0);
                            parseSVGA();
                        } else {
                            stopSVGA();
                        }
                    }
                });
            } catch (Exception e) {
            }
        } else {
            stopSVGA();
        }
    }
}

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

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

3. 显示 SVGA 动画

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

    <com.opensource.svgaplayer.SVGAImageView
        android: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;

    @Override
    protected 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() {
            @Override
            public void onClick(View view) {
                svgaUtils.startAnimator("aixin");
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                svgaUtils.startAnimator("bujibao");
            }
        });
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                svgaUtils.startAnimator("shengri");
            }
        });
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                svgaUtils.startAnimator("youleyuan");
            }
        });
    }
}

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