1. 如何高效学习android动画
Android动画初步
动画(Animation)在我们日常的Android开发工作当中使用得较为频繁,尤其对于Android游戏这个动画的集合体,掌握动画开发的重要性毋庸置疑。同样的,在Android应用开发中我们也经常使用动画效果来提升APP用户体验,比如应用中的图片的旋转,页面和页面之间的淡入淡出、左右渐入渐出切换效果等等。
动画的分类
Android FrameWork向开发人员提供了丰富的API用于实现各种各样的动画效果,而若要对动画分类,一般可将Android动画分为以下两类的动画系统:
View Animation
View Animation动画系统又可以分类成Tween Animation 和Frame Animation:
Tween Animation
Tween Animation是Android系统比较老的一种动画系统,它的特点是通过对场景里的对象不断做图像变换(渐变、平移、缩放、旋转)产生动画效果,且这种动画只适用于View对象。
Frame Animation
Frame Animation也是常用到的动画,它的原理比较简单,就是将一系列准备好的图片按照顺序播放,形成动画效果。
Property Animation
Property Animation(属性动画)是在Android3.0(API 11)之后引入的一种动画系统,该动画提供了比View Animation更加丰富、强大和灵活的功能,Android官方推荐开发人员使用该动画系统来实现动画。Property Animation的特点是动态地改变对象的属性从而达到动画效果。该动画实现使用于包括View在内的任何对象。
Tween Animation
了解到Tween Animation是Android中比较老的一种动画系统,且其只能实现对View对象动画设置,不过其虽然没有Property Aniamtion功能那么强大和灵活,但是使用Tween Animation依然能完成日常大部分的开发需求。灵活地掌握Tween Animation的使用方法,十分有必要。那Tween Animation实现View的动画,一般分为以下几种效果:
Alpha:渐变透明动画效果;
Scale:渐变尺寸伸缩动画效果;
Translate:位置位移动画效果;
Rotate:位置旋转动画效果。
接下来通过实例来一一学习如何实现以上几种动画效果,实现Tween Animation分为xml实现和代码实现,下面会分别使用这两种方式来实现上面的的几种动画效果。首先使用xml方式来实现View的Alpha渐变透明动画效果,在项目目录结构中创建res/anim文件夹,然后在文件夹中创建view_animation_alpha.xml文件,文件中的代码如下:
[html] view plain
<!--
* android:interpolator:修饰动画效果,定义动画的变化率,可以使存在的动画效果accelerated(加速),
* decelerated(减速),repeated(重复),bounced(弹跳)等。
* android:fromAlpha="0.0":设置动画开始时控件的透明度,0.0为透明,控件不显示,1.0为不透明,控件全部显示
* android:toAlpha="1.0":设置动画结束时的控件的透明度
* android:ration="2500":设置每一次动画持续的时间值
* android:repeatCount="5":设置动画重复的次数
* android:repeatMode="reverse":设置动画重复的模式,reverse为0.0 -> 1.0 -> 0.0,动画反复执行;
* restart为0.0 -> 1.0, 0.0 -> 1.0,动画每次都重新开始执行
-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:ration="2500"
android:repeatCount="5"
android:repeatMode="reverse"
/>
xml文件中的属性在代码中都有详细的解释,这里就不重复说明了。定义完XML文件后,然后在代码中使用AnimationUtils类调用loadAnimation(context, id)方法来加载xml文件,具体代码如下:
[java] view plain
/**
* xml文件加载图片渐变(Alpha)动画
*/
Animation mAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation_alpha);
上面是使用xml实现Alpha的动画效果,下面我们来看看如何在代码中实现Alpha的动画,很简单,只需要实例化一个AlphaAnimation对象,然后传递相关参数就行,具体代码如下:
[java] view plain
/**
* 代码创建图片渐变(Alpha)动画
* 实例化AlphaAnimation对象:
* mAnimation = new AlphaAnimation(fromAlpha, toAlpha);
* fromAlpha:设置动画开始时控件的透明度,0.0为透明,控件不显示,1.0为不透明,控件全部显示
* toAlpha:设置动画结束时的控件的透明度
*/
Animation mAnimation = new AlphaAnimation(0.0f, 1.0f);
分别使用xml和代码实现Alpha动画后,最后为一个ImageView对象设置创建好的Alpha动画,ImageView对象只需要调用startAnimation(Animation animation)方法,将刚刚创建好的alpha动画对象作为参数添加传进去搞定,具体代码如下:
[java] view plain
ImageView mImageView = (ImageView)findViewById(R.id.view_animation_imageview);
//设置控件开始执行动画
mImageView.startAnimation(mAnimation);
2. 安卓开发中矢量图的绘制及动画
矢量图也称为面向对象的图像或绘图图像,是根据几何特性来绘制的图形,在安卓开发中可以使用失量图代替原来的图片资源,矢量图具有占用空间小和可以随意缩放但不失真的优势,在我的多个项目中都有运用。
通过学习和实践,我总结了一些与矢量图相关的知识,方便今后更好的使用矢量图,同时也可以供大家查阅参考。
绘制矢量图之前需要先定义画布的宽高,后续的绘制效果都展示在这个画布上。在绘制过程中需要输入的坐标就是这个画布上的点。
安卓的矢量图常见于 drawable 文件夹下,是一个xml文件,由 vector 标签包裹,在 vector 标签中可包含多个 path 标签,依次叠加显示。
在矢量图中最重要的就是 path 属性,图像的样式就是由 path 属性中的数据绘制而成,这些数据由不同的命令组合而成,下面就介绍一些矢量图的绘制命令。
将前面的命令示例连接起来就可以生成一个完整的图像,它大概长这个样子:
画布的尺寸为500x500,图上的顶点是200,10的位置,也是我们开始作图的起点。通过这个图片可以更好的理解每一个绘图命令。
安卓中可以为矢量图添加动画效果,这样用户就可以看到一个动的图片,可以一定程度的提高app的交互效果。矢量图动画是图形内部的变化,可以做到View动画无法实现的效果。
这种动画针对的是矢量图中 path 字段的值,通过连续改变 path 字段的值而达到产生动画的效果。
注:pathData动画所需的AnimatedVectorDrawable最低要求API等级为25
实现一个矢量图动画需要以下几步:
1. 准备起始状态和结束状态的矢量图两张。
2. 创建动画配置文件。
3. 创建动画矢量图文件。
4. 启动动画。
基于这种要求,我准备了两个矢量图:
控制动画运行的是一个 objectAnimator ,此处把 objectAnimator 包裹在一个 set 中也是可以的,说白了就是执行这个动画文件。
ration 用来指定动画的持续时间。
propertyName 中的pathData指的就是矢量图中的pathData。
valueFrom 和 valueTo 一个是起始路径,一个是结束路径,可以想到,这个动画就是在持续修改pathData,从而达到展示动画的效果。而 valueFrom 和 valueTo 的值是直接从先前准备的矢量图中复制过来的,所以那个结束状态的矢量图中唯一有用的东西就是pathData属性,没有那个文件也无所谓。
valueType 这里必须填判型写pathType,这是专门用来计算path的类型。
此时,文件的最外层由 animated-vector 包裹,同时需要添加一个 drawable 参数,这个 drawable 用于指定动画应用于那个矢量图上,我们是要从未启用状态变成启用状态,所以是在未启用状态开始执行动画,在动画未开始的时候展示的也是未启用状态。此处我们指定为 @drawable/icon_filter_off 。
内部有一个 target 标签,这个标签可以有多个,分别对应不同的动画,但同一个 path 只能应用一个动画。
name 用于指定要执行动画的 path 。status正是我们为右下角小图标path设置的名称。
animation 用于指定需要执行的动画。此处引用我们刚刚创建的猛冲山动画资源 @animator/filter_turn_on 。
当我们创建枝中好动画矢量图之后,页面中引用的资源就不再是之前的静态矢量图了,需要把 ImageView 的图片替换成 @drawable/animated_filter_on
经过这么多的步骤,我们终于做出了一个矢量图动画,而且是一个。说实话,有点累,然而我这个状态切换的动画一套就要两个,所以我又加了一个回来的动画和对应的动画矢量图,一共六个文件,完成了筛选状态的两个切换动画。这还是比较简单的实现方式,对于两种状态切换的动画,网上还有一种使用selector的方式,这种方式更麻烦,而且使用方法并没有简单一些,所以我的选择是在需要切换状态的时候更改 ImageView 的图片资源,然后再执行动画。
trimPath动画相当于是改变了矢量图绘制的位置,是从头开始画还是从80%的位置开始画,然后再动态的修改这个百分比,从而达到动画的效果。理解起来倒不是很难。
先放一个我使用trimPath动画做的loading效果,这个动画效果被我用在LoadingDialog中,在界面加载的时候会重复播放这个动画。
android:name="load" 不用多说,这个是我们做动画时路径名称。这里为了让心电图路径更清晰,我设置了描边宽度为20( android:strokeWidth="20" ),同时还要设置描边的颜色才能展示出来。后面的 android:trimPathStart="0" 和 android:trimPathEnd="0" 是本次trimPath动画的重点。
这两个属性都设置为0是因为动画的起始帧都为0,然后通过 objectAnimator 慢慢把这两个属性变为1,这样一个慢慢增长的动画就形成了。
网络上一个横线变成搜索按钮的示例是将这两个属性分别应用到了两个 path 上,而我是将两个属性同时应用到一个 path 上,原理都是一样的。
在配置文件中,我将两个动画都设置为3秒且循环播放,起始点的动画慢于终点的动画1秒,达到只画中间1秒间隔线段的效果。和路径变形动画的区别是 android:valueType="floatType" ,我们只需要计算从0到1的数字,然后应用到 trimPathStart 和 trimPathEnd 字段上。至此,loading的动画就配置完了。
这一步已经没什么可说的了,就是将指定的矢量图中指定的路径设置一个指定的动画。
通过几天的学习,已经大致掌握了矢量图的展示及动画的制作,但这一套流程下来成本比较高,是程序员方式的动画制作流程。除了制作成本,创意成本也是相当高的,一个好的创意能极大的提升用户体验,而好多时候我们的创意能够被实现也是很困难的。希望以后能实现一些更好的效果,让用户使用起来更舒服。
SVG—最简单的SVG动画
SVG路径(path)中的圆弧(A)指令的语法说明及计算逻辑
Android中的矢量图
Android高级动画(2)
3. Android 动画效果为:月亮沿着椭圆形轨迹运行
我这里有个android的动画效果集合
包括Activity转跳,控件,listview等等的动画源代码
你可以下载来看看
4. android 自定义圆怎么动态设置圆的半径
使用ObjectAnimation,或者ValueAnimation都可以实现这个效果
ObjectAnimation可以动态设置控件有get与set方法的属性进行改变,给你的圆添加一个半径的属性,并添加get与set。
参考
//通过AnimatiorSet来设计同步执行的多个属性动画
ObjectAnimator animator1 = ObjectAnimator.ofFloat(imageView, "translationX", 0F, 360F);//X轴平移旋转
ObjectAnimator animator2 = ObjectAnimator.ofFloat(imageView, "translationY", 0F, 360F);//Y轴平移旋转
ObjectAnimator animator3 = ObjectAnimator.ofFloat(imageView, "rotation", 0F, 360F);//360度旋转
AnimatorSet set = new AnimatorSet();
//set.playSequentially(animator1, animator2, animator3);//分步执行
//set.playTogether(animator1, animator2, animator3);//同步执行
//属性动画的执行顺序控制
// 先同步执行动画animator2和animator3,然后再执行animator1
set.play(animator3).with(animator1);
set.play(animator2).after(animator3);
set.setDuration(1000);
set.start();
2.通过ValueAnimation来动态改变圆半径的属性
参考
public void onClick(View view) {
final ValueAnimator animator = ValueAnimator.ofInt(1, 100);
animator.setDuration(5000);
animator.setInterpolator(new LinearInterpolator());//线性效果变化
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
Integer integer = (Integer) animator.getAnimatedValue();
button.setText("" + integer);
}
});
animator.start();
}
5. Android 圆角、圆形 ImageView 实现
我们要实现的图片控件继承自 AppCompatImageView ,它是 ImageView 的子类,但提供了更好的兼容性,我们在此基础上添加了若干自定义的属性和方法以实现最终的 NiceImageView :
要实圆角或者圆形的显示效果,就是对图片显示的内容区域进行“裁剪”,只显示指定的区域即可。如何做呢?
一种比较直接的办法是这样的,由于图片是被绘制在画布上的,所以用 canvas 的 clipPath() 方法先将画布裁剪成指定形状,这样就能让图片按指定形状显示了,重新 draw() 方法即可:
这样使用 src 、 background 属性给ImageView设置显示的图片都能达到预期的显示效果。但是由于 clipPath() 方法不支持抗锯齿,图片边缘会有明显的毛糙感,体验并不理想,所以需要寻找其它方法。
另一种方法是使用图像的 Alpha 合成模式 ,即
PorterDuff 来实现, 官方文档 。这里我们使用其中的 DST_IN 模式。整个过程就是先绘制目标图像,也就是图片;再绘制原图像,即一个圆角矩形或者圆形,这样最终目标图像只显示和原图像重合的区域。
到这里就实现了显示为圆角或者圆形了。但是需要通过 src 属性或者对应的方法来设置图片,否则不能达到预期效果。
绘制边框就相对容易理解了,只需要绘制一个指定样式的圆角矩形或者圆形即可:
当图片显示为圆形时,还可以绘制一个内边框,但圆角矩形的话由于圆角大小的问题,目前只能设置一个边框咯。
但是有个问题,绘制的边框会覆盖在图片上,如果边框太宽会导致图片的可见区域变小了,影像显示效果,像这样,左下角的花盆不见了:
那么如何让边框不覆盖在图片上呢?可以在 Alpha 合成绘制前先将画布缩小一定比例,最后再绘制边框,这样问题就解决了。
缩放后的ImageView显示区域的宽高就是原宽、高分别减去2倍的边框宽度,这样缩小的比例也就显而易见了。效果如下,左下角的花盆出来了:
遮罩可以理解为一层带透明度的颜色,遮罩默认不绘制,当制定了遮罩颜色时才会绘制,实现很简单:
例如加一个透明度30%的红色遮罩后的效果:
核心的实现逻辑就这些了,剩下的就是自定义属性和方法了,有兴趣的可以看源码,都很简单,希望对你有所帮助吧!
更多细节及用法见GitHub: https://github.com/SheHuan/NiceImageView
如果你需要实现类似钉钉的圆形组合头像,例如:
6. Android中的几种动画
帧动画:指通过指定每一帧的图片和播放时间,有序的进行播放而形成动画效果,比如想听的律动条。
补间动画:指通过指定View的初始状态、变化时间、方式,通过一系列的算法去进行图形变换,从而形成动画效果,主要有Alpha、Scale、Translate、Rotate四种效果。注意:只是在视图层实现了动画效果,并没有真正改变View的属性,比如滑动列表,改变标题栏的透明度。
属性动画:在Android3.0的时候才支持,通过不断的改变View的属性,不断的重绘而形成动画效果。相比于视图动画,View的属性是真正改变了。比如view的旋转,放大,缩小。
7. Android 旋转动画
<rotate
android:fromDegrees="45"//起始旋转的角度
android:toDegrees="89"//结束选装后的角度
android:ration="500"//执行时间为500ms
android:pivotX="50%"//距离控件左边缘50%
android:pivotY="50%"//距离控件上边缘50%(与上边结合就是控件中心)
android:fillEnabled="true"
android:fillAfter="true"//动画执行完后停留在执行完的状态
/>
—————————————————————————————————————————
当然也可以通过代码用animation实现
好久没写,应该是
RotateAnimationanimation=newRotateAnimation(0f,45f,Animation.RELATIVE_TO_SELF,
0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setDuration(500);
view.setAnimation(animation);
8. Android 动画详解
android中酷炫的效果,都离不开动画的支持。这里我们详细介绍一下android中动画的分类。android的中动画分为帧动画、补间动画、属性动画。原理各不相同,实现的效果也大不相同。下面一一讲解三种动画。
帧动画顾名思义就是通过顺序一帧一帧播放图片从而产生动画效果,效果类似放电影。该动画缺点比较明显,就是如果图片过大过多会导致OOM。帧动画xml文件放置在drawable目录下而非anim文件夹下。
补间动画是通过对view进行旋转、缩放、渐变、透明度变化,而达到的一种动画效果。是一种渐进式动画。并且可以通过组合以上四种操作,完成复杂的自定义动画效果。缺点就是只是改变的view的展示状态,但是不会改变view的位置。例如我们将一个button通过位移想左移动100dp,然后停留在终点。但是我们可以发现展示的位置button点击无效果,不可以交互。而在button原始位置空白的地方点击会触发button的点击效果。也就是button本质还是在原来位置,只是展示左移了100dp。
透明度动画,通过改变view的透明度展示动画。对应AlphaAnimation和<alpha>xml标签
缩放动画,通过修改view的大小展示动画。对应ScaleAnimation类和<scale>xml表情
通过旋转view展示动画。对应RotateAnimation类和<rotate>xml标签
平移动画,更改view的展示位置展示动画。对应TranslateAnimation类和<translate>xml表情
应用动画xml配置
使用java类配置动画,具体参数类同xml参数,建议使用xml配置动画
属性动画本质是通过改变对象的属性(例如:x,y等属性),来实现动画的,所以基本上是无所不能的,只要对象有这个属性,就能实现动画效果。属性动画是在api11的新特性,通过动态的改变view的属性从而达到动画效果。虽然可以使用nineoldandroid库向下兼容,但是兼容本质是使用补间动画完成,也就是说不会更改view的属性,也不会更改view的位置。属性动画比较常用的类: ValueAnimator、ObjectAnimator、AnimationSet,其中ObjectAnimator是ValueAnimator的子类,而AnminationSet是动画集合
动画配置同样可以使用xml配置,参数类似,这里不做详细说明。
根据时间流逝百分比计算当前属性改变百分比。同xml配置动画中的 android:interpolator 属性配置,常见有LinearInterpolator(线性差值器)、(加速减速差值器)
等。自定义需要实现 Interpolator 或者 TimeInterpolator 。Interpolator接口继承TimeInterpolator。
根据当前属性改变百分比计算改变后的属性值。属性动画特有的属性。自定义估值器需要实现 TypeEvaluator 接口。
可以对任意属性做属性动画,属性动画要求动画作用的对象提供该属性的get()和set()方法。因为属性动画本质就是根据外界传递的对象属性的初始值和终点值,然后根据估值器和差值器计算属性值,不断调用属性的set方法,通过时间的推移所传递的值,越来越近终点值。
注意:
使用ValueAnimator通过监听动画过程,自己改变对象属性完成动画