一、前言

在开发APP的过程中，需要在APP中实现设计同学的UE效果动画，一般都是通过代码实现的，当对于较复杂的动画时，例如直播中刷礼物时的动画，这时利用代码实现会比较复杂。而且Android和iOS两端不好统一效果，如果用gif图片来实现的话，在图片大小和动画帧数之间很难权衡。而且会导致内存吃紧。为了解决这样的问题，今天来介绍一款实现复杂动画的开源库：SVGA。

GIF.gif

二、下面介绍用法：

1、导入包

首先在项目的build.gradle中加入

allprojects {

repositories {

...

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

}

}

接着

com.github.yyued:SVGAPlayer-Android:2.5.3

2、添加混淆

-keep class com.squareup.wire.** { *; }

-keep class com.opensource.svgaplayer.proto.** { *; }

3、使用

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/mSVGAKninghtood"

android:background="#0000"

fresco:autoPlay="true"

fresco:clearsAfterStop="true"

fresco:loopCount="1" />

注意：

首先布局文件，注意要设置具体高度，不能用wrap_content；

然后将准备好的.svga文件放在assets下；

如图所示：

图片.png

4、 一般用的用的最多的两种加载用法

a. 加载assets目录下的SVGA文件，可以在.xml文件里面直接设置，也可以动态设置

//“SVGA名称，带后缀”

new SVGAParser(mContext).decodeFromAssets("gesture_guide.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);

5、监听方法，在这个方法里面你可以做你想要的操作

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的动画了

6、高级使用：

当然有时候我们不仅仅要展示动画，有时候根据需求还要修改里面的一些文字图片之类的，比如展示用户的图片或者昵称，这里官方也给出了使用方法，也就是对文件的各个元素做操作。

SVGA动画预览

图片.png

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官网 >>