一癌幕、前言
在開(kāi)發(fā)APP的過(guò)程中，需要在A(yíng)PP中實(shí)現(xiàn)設(shè)計(jì)同學(xué)的UE效果動(dòng)畫(huà)昧穿，一般都是通過(guò)代碼實(shí)現(xiàn)的勺远，當(dāng)對(duì)于較復(fù)雜的動(dòng)畫(huà)時(shí)，例如直播中刷禮物時(shí)的動(dòng)畫(huà)粤咪，這時(shí)利用代碼實(shí)現(xiàn)會(huì)比較復(fù)雜谚中。而且Android和iOS兩端不好統(tǒng)一效果，如果用gif圖片來(lái)實(shí)現(xiàn)的話(huà)寥枝，在圖片大小和動(dòng)畫(huà)幀數(shù)之間很難權(quán)衡宪塔。而且會(huì)導(dǎo)致內(nèi)存吃緊。為了解決這樣的問(wèn)題囊拜，今天來(lái)介紹一款實(shí)現(xiàn)復(fù)雜動(dòng)畫(huà)的開(kāi)源庫(kù)：SVGA某筐。
SVGA Android >>
效果圖：
二、下面介紹用法：
1冠跷、導(dǎo)入包
首先在項(xiàng)目的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、使用
<com.opensource.svgaplayer.SVGAImageView
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" />
注意：
- 首先布局文件蜜托，注意要設(shè)置具體高度抄囚，不能用wrap_content；
- 然后將準(zhǔn)備好的.svga文件放在assets下橄务；
-
如圖所示：
圖片.png
4幔托、 一般用的用的最多的兩種加載用法
- a. 加載assets目錄下的SVGA文件，可以在.xml文件里面直接設(shè)置蜂挪，也可以動(dòng)態(tài)設(shè)置
//“SVGA名稱(chēng)重挑，帶后綴”
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.加載網(wǎng)絡(luò)的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() {
}
});
當(dāng)然加載網(wǎng)絡(luò)文件最主要的的緩存問(wèn)題，這里SVGA已經(jīng)為我們考慮好了棠涮，只需要設(shè)置下面這算代碼就OK了
HttpResponseCache.install(new File(HnUiUtils.getContext().getExternalFilesDir(null), "svga"), 1024 * 1024 * 128);
5谬哀、監(jiān)聽(tīng)方法，在這個(gè)方法里面你可以做你想要的操作
mSVGAImage.setCallback(new SVGACallback() {
@Override
public void onPause() {
//動(dòng)畫(huà)暫停
}
@Override
public void onFinished() {
//動(dòng)畫(huà)結(jié)束
}
@Override
public void onRepeat() {
//重復(fù)播放
}
@Override
public void onStep(int i, double v) {
//動(dòng)畫(huà)步驟
}
});
上面這三步严肪，可以說(shuō)我們就可以顯示出SVGA的動(dòng)畫(huà)了
6史煎、高級(jí)使用：
當(dāng)然有時(shí)候我們不僅僅要展示動(dòng)畫(huà)谦屑，有時(shí)候根據(jù)需求還要修改里面的一些文字圖片之類(lèi)的，比如展示用戶(hù)的圖片或者昵稱(chēng)劲室，這里官方也給出了使用方法伦仍，也就是對(duì)文件的各個(gè)元素做操作结窘。
SVGA動(dòng)畫(huà)預(yù)覽
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隧枫、替換圖片喉磁，顯示用戶(hù)頭像，SVGA是可以直接加載網(wǎng)絡(luò)圖片的官脓，所以我們只需要將圖片地址放進(jìn)去就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是替換的圖片的名稱(chēng)
SVGADrawable drawable = new SVGADrawable(videoItem, dynamicEntity);
mSVGAImage.setImageDrawable(drawable);
mSVGAImage.stepToFrame(0, true);
}
@Override
public void onError() {
}
});
當(dāng)然上述用法展示的圖片是原始圖片的形狀协怒，有時(shí)候我們得到的圖片是方形，要展示的是圓形卑笨，這就需要我們做其他的操作了孕暇。不過(guò)慶幸的是SVGA直接加載Bitmap，所以我們得到圖片之后可以先獲取到圖片的Bitmap赤兴，在替換妖滔。獲取Bitmap的方法我們可以通過(guò)Glide來(lái)得到。
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);//字體陰影座舍，不需要可以不用設(shè)置
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() {
}
});
上述方法只適合顯示單行文字，并且會(huì)居中展示陨帆，有時(shí)候我們需要它靠左或者靠右曲秉，這樣的話(huà)我們就需要用到下面的方法了，需要更多操作的同學(xué)可以去查查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");
好了承二，以上就是我對(duì)SVGA的使用了，有興趣的同學(xué)可以去官方網(wǎng)站看看纲爸。
SVGA官網(wǎng) >>
轉(zhuǎn)載鏈接：http://www.reibang.com/p/c9b0c13332f7
