Android动画SVGA的使用
2019年下半年开始，开始做语音聊天房，从各大平台调研后，发现礼物的动画越来越炫酷，也发现了一种新的大礼物展现方式SVGA。
接触SVGA的时候还是一脸蒙比的，不过看了文档后也就觉得一般般了，用法其实很简单，和加载图片没有什么区别，直接塞进去一个svga文件的地址就OK了。
SVGA Android >>
不多说，下面介绍用法
1、导入包
com.github.yyued:SVGAPlayer-Android:2.5.32、一般用的用的最多的两种加载用法
首先布局文件，注意要设置具体高度，不能用wrap_content
a.加载assets目录下的SVGA文件，可以在.xml文件里面直接设置，也可以动态设置
new SVGAParser(mContext).decodeFromAssets(“SVGA名称，带后缀”, new SVGAParser.ParseCompletion() {
@RequiresApi(api = Build.VERSION_CODES.P)
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
if (mSVGAImage != null) {
mSVGAImage.setVideoItem(videoItem);
mSVGAImage.stepToFrame(0, true);
}
}
@Override
public void onError() {
}
});
b.加载网络的SVGA文件
new SVGAParser(mContext).decodeFromURL(new URL(“文件地址”), new SVGAParser.ParseCompletion() {
@RequiresApi(api = Build.VERSION_CODES.P)
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
if (mSVGAImage != null) {
mSVGAImage.setVideoItem(videoItem);
mSVGAImage.stepToFrame(0, true);
}
}
@Override
public void onError() {
}
});
当然加载网络文件最主要的的缓存问题，这里SVGA已经为我们考虑好了，只需要设置下面这算代码就OK了
HttpResponseCache.install(new File(HnUiUtils.getContext().getExternalFilesDir(null), "svga"), 1024 * 1024 * 128);
- 3、监听方法，在这个方法里面你可以做你想要的操作
mSVGAImage.setCallback(new SVGACallback() {
@Override
public void onPause() {
//动画暂停
}
@Override
public void onFinished() {
//动画结束
}
@Override
public void onRepeat() {
//重复播放
}
@Override
public void onStep(int i, double v) {
//动画步骤
}
});
上面这三步，可以说我们就可以显示出SVGA的动画了
当然有时候我们不仅仅要展示动画，有时候根据需求还要修改里面的一些文字图片之类的，比如展示用户的图片或者昵称，这里官方也给出了使用方法，也就是对文件的各个元素做操作。
SVGA动画预览
SVGA动画预览
SVGA动画文件的各个元素名称
- 1、隐藏元素，找到要隐藏的
new SVGAParser(getActivity())
.decodeFromURL(new URL(mSvgaUrl), new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
if(getActivity()==null)return;
SVGADynamicEntity dynamicEntity = new SVGADynamicEntity();
dynamicEntity.setHidden(true, "psd_17");//此处psd_17就是要隐藏的元素
SVGADrawable drawable = new SVGADrawable(videoItem, dynamicEntity);
mSVGAImage.setImageDrawable(drawable);
if (mSVGAImage != null) {
mSVGAImage.stepToFrame(0, true);
}
}
@Override
public void onError() {
}
});
- 2、替换图片，显示用户头像，SVGA是可以直接加载网络图片的，所以我们只需要将图片地址放进去就ok了
new SVGAParser(getContext())
.decodeFromAssets(“SVGA文件”,
new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADynamicEntity dynamicEntity = new SVGADynamicEntity();
dynamicEntity.setDynamicImage(mEntity.getSuccessBean().getFirst_user_avatar(), "nvt"); //nvt是替换的图片的名称
SVGADrawable drawable = new SVGADrawable(videoItem, dynamicEntity);
mSVGAImage.setImageDrawable(drawable);
mSVGAImage.stepToFrame(0, true);
}
@Override
public void onError() {
}
});
当然上述用法展示的图片是原始图片的形状，有时候我们得到的图片是方形，要展示的是圆形，这就需要我们做其他的操作了。不过庆幸的是SVGA直接加载Bitmap，所以我们得到图片之后可以先获取到图片的Bitmap，在替换。获取Bitmap的方法我们可以通过Glide来得到。
- 3、绘制文字
new SVGAParser(getContext())
.decodeFromAssets(“SVGA文件”,
new SVGAParser.ParseCompletion() {
@Override
public void onComplete(@NotNull SVGAVideoEntity videoItem) {
SVGADynamicEntity dynamicEntity = new SVGADynamicEntity();
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.WHITE);//字体颜色
textPaint.setTextSize(24);//字体大小
textPaint.setShadowLayer(3, 2, 2, 0xff000000);//字体阴影，不需要可以不用设置
dynamicEntity.setDynamicText(mEntity.getSuccessBean().getFirst_user_nickname(), textPaint, "left_name");
SVGADrawable drawable = new SVGADrawable(videoItem, dynamicEntity);
mSVGAImage.setImageDrawable(drawable);
mSVGAImage.stepToFrame(0, true);
}
@Override
public void onError() {
}
});
上述方法只适合显示单行文字，并且会居中展示，有时候我们需要它靠左或者靠右，这样的话我们就需要用到下面的方法了，需要更多操作的同学可以去查查StaticLayout的用法。
SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder("xxxx");
spannableStringBuilder.setSpan(new ForegroundColorSpan(0xfff6ff00), 0, 4, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
TextPaint textPaint = new TextPaint();
textPaint.setColor(Color.WHITE);
textPaint.setTextSize(28);
textPaint.setShadowLayer(3, 2, 2, 0x7f000000);
dynamicEntity.setDynamicText(new StaticLayout(
spannableStringBuilder,
0,
spannableStringBuilder.length(),
textPaint,
0,
Layout.Alignment.ALIGN_LEFT,
1.0f,
0.0f,
false
), "key_name");
好了，以上就是我对SVGA的使用了，有兴趣的同学可以去官方网站看看。
SVGA官网 >>