Android动画SVGA的使用
一、前言
在开发APP的过程中,需要在APP中实现设计同学的UE效果动画,一般都是通过代码实现的,当对于较复杂的动画时,例如直播中刷礼物时的动画,这时利用代码实现会比较复杂。而且Android和iOS两端不好统一效果,如果用gif图片来实现的话,在图片大小和动画帧数之间很难权衡。而且会导致内存吃紧。为了解决这样的问题,今天来介绍一款实现复杂动画的开源库:SVGA。
SVGA Android >>
效果图:
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、使用
<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” />
注意:
首先布局文件,注意要设置具体高度,不能用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);
}
}
@Overridepublic 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);
}
}
@Overridepublic 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() {
//动画暂停
}
@Overridepublic void onFinished() {//动画结束}@Overridepublic void onRepeat() {//重复播放}@Overridepublic 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);
}
@Overridepublic 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);
}
@Overridepublic 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官网 >>
转载链接:https://www.jianshu.com/p/c9b0c13332f7
Android动画SVGA的使用相关推荐
- Android开发——SVGA格式动画内容资源替换
Android开发--SVGA格式动画内容资源替换 随着接触的项目类型越来越多,目前格式个样的炫酷动画也随之而来,既然原生动画实现起来复杂,且有一个快捷灵活的动画为何不用呢,那让我们来好好学习一下如何 ...
- Android动画渲染过程及原理(matrix),matrix动画,动画优化
-- 矩阵(Matrix), Matrix动画 矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,最早来自于方程组的系数及常数所构成的方阵.在物理学中,矩阵于电路学.力学.光学和量子物理中都 ...
- Android动画效果translate、scale、alpha、rotate详解
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...
- android jason动画,Android 动画之Lottie动画使用
Android 动画之Lottie动画使用 一:简介 Lottie是Airbnb开源的一套跨平台的完整解决方案,设计师只需要使用After Effects(简称AE)设计动画之后,使用Lottic提供 ...
- android动画的实现原理,Android动画的实现原理 .
1.动画运行模式 独行模式 中断模式 2.Animation类 每个动画都重载了父类的applyTransformation方法这个方法的主要作用是把一些属性组装成一个Transformation类, ...
- Android动画曲线库AndroidEasingFunctions
Android动画曲线库AndroidEasingFunctions AndroidEasingFunction是基于Easing Function(缓动函数)的Android动画曲线库.它提供了九大 ...
- android 动画引擎,一个使用openGL渲染的炫丽Android动画库
这是一个 android 动画特效库 可以实现各种炫酷动画. github地址: ht t ps:// gith u b.co m/g pl ib s/an dro id- ma gic-s ur ...
- Android 动画分析学习笔记
一:分类: Android动画分三种:view动画(对场景中的对象不断做图像变换<平移,缩放,旋转,透明度>).帧动画(顺序播放一系列图像产生动画效果).属性动画(动态改变对象属性). 二 ...
- Android动画之Tween动画实战
Android动画分为Tween动画和Frame动画,上一节通过一个实例介绍了Frame动画,本节将介绍Tween动画.Tween可以把对象进行缩小.放大.旋转和渐变等操作. Tween动画有四个主要 ...
最新文章
- 单图像三维重建、2D到3D风格迁移和3D DeepDream
- UVA 1625 Color Length DP
- linux CPU、内存、I/O、磁盘等监控统一解决方案
- html盒子居中的方式,CSS盒子居中三种方法
- UITextField 输入结束后的收起小键盘的方式
- js打印到控制台_如何实现可复用的控制台“艺术字”打印功能
- 【Java程序设计】多线程基础
- 什么是产品的愿景—从一篇博文中学得到
- 基于布谷鸟搜索算法的函数寻优算法
- case when 多条件 oracle,casewhen(casewhen同时满足多条件)
- 腐蚀rust服务器命令_服务器指令_腐蚀RUST基本指令及服务器指令大全_3DM单机
- 《Redis开发与运维》第一章 初识Redis 读书笔记
- 创维E900V21E、融合机DT741、咪咕MGV2000-非高安版-通刷线刷固件
- UOJ449. 【集训队作业2018】喂鸽子 [概率期望,min-max容斥,生成函数]
- 中科院计算所是怎样的存在?院校详情大盘点!
- 1万小时后,我从外包走进了字节跳动,现在出了一本书,文末送书!
- 共轭梯度法确实存在数值精度的要求
- CFD网格你应该了解的常识
- Kafka——Sender 线程分析
- Uipath Excel-读取操作(Read Row)
热门文章
- 快手2020校园招聘秋招笔试--工程A试卷 题4
- OM | 电子商务平台中的合约选择:批发合约or代理合约?
- 微电子半导体集成电路专业术语英语整理
- Windows下Visual Studio Code配置Shell开发环境 (超详细图文)| 瞬间提高200%生产力
- [附源码]Python计算机毕业设计Django4S店汽车售后服务管理系统
- #1790 : 特工配对
- vue学习笔记(三)之vuex
- 基石为勤能补拙的迷宫之旅——第十二天(Python函数装饰器)
- h5+app打开pdf,图片,excel,world(亲测可用)
- 车载诊断数据库ODX——Flash(刷写)