下面主要讲的是 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() {
@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 我复制过来动画的名字。~~