在Android开发中经常会碰到动画,看到别的应用有很酷炫的应用时,总是想怎么去实现,但是每次都是发现感觉是知道怎么做的,实际做起来还是无从下手的感觉,究其原因还是
Android动画方面的知识不全面,这几天利用空闲时间研究了下Android动画知识,当作学习日记,大家也好有所借鉴。
Android主要分三类动画:Tween Animation、Frame Animation、Property Animation。
其中Tween Animation、Frame Animation是在Android是在Android3.0之前就有的动画技术,后来由于动画需求越来越高,Tween Animation、Frame Animation已经满足不了应用对于动画效果的需求了,于是在Android3.0之后,谷歌又增加了新的动画Property Animation。下面对这三种动画逐个介绍。
一、Tween Animation
中文亦叫补间动画,它是通过平移、旋转、缩放以及修改透明度来达到动画效果的,原理是给出两个关键帧,通过一些算法将给定属性值在给定时间内在两个关键帧间渐变。这里我们只关心动画的使用,不关注它的代码实现。Tween Animation基于Animation类扩展,有以下几个Tween Animation类:TranslateAnimation(平移)、AlphaAnimation(透明度)、ScaleAnimation(缩 放)、RotateAnimation(旋转)。
TranslateAnimation使用方法如下:
private TranslateAnimation mTranslateAnimation; //这四个参数含义分别是当前View x起点坐标、x终点坐标、y起点坐标、y终点坐标 mTranslateAnimation = new TranslateAnimation(0, 200, 0, 0); //动画持续时间 mTranslateAnimation.setDuration(2000); //重复次数 mTranslateAnimation.setRepeatCount(1); //动画执行模式 mTranslateAnimation.setRepeatMode(Animation.REVERSE);
以上代码含义为从view的起点开始,保持y轴不变,沿着x平移200个像素,平移时间为2秒,重复执行一次,第二次执行方式与第一次执行方式完全相反,如下图:
以上是java代码实现的方式,亦可以使用xml实现,如下:
/res/anim/translate.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="200" android:fromYDelta="0" android:toYDelta="0" android:duration="2000" android:repeatCount="1" android:repeatMode="reverse" android:interpolator="@android:anim/accelerate_decelerate_interpolator"/> </set>
fromXDelta:View x轴起点
toXDelta:View x轴终点
fromYDelta:View y轴起点
toYDelta:View y轴终点
duration:动画持续时间
repeatCount:动画执行次数
repeatMode:动画执行模式
interpolator:插值器,可以理解为View动画值的改变规律
java中调用:
private Animation mTranslateAnimation; mTranslateAnimation = AnimationUtils.loadAnimation(this, R.anim.translate); mTranslateIv.startAnimation(mTranslateAnimation);
使用Java或者xml实现动画并无什么不同,采用哪种完全取决于自己的编程习惯,但如果单纯从扩展性来说,显然xml方式更占优。
AlphaAnimation使用方法如下:
private AlphaAnimation mAlphaAnimation; //不透明度从100%到0 mAlphaAnimation = new AlphaAnimation(1, 0); mAlphaAnimation.setDuration(2000); mAlphaAnimation.setRepeatCount(1); mAlphaAnimation.setRepeatMode(Animation.REVERSE);
以上代码含义是在2秒内将View的不透名度从1变为0,总共执行2次,第一次和第二次执行动画过程相反,效果如下图:
xml实现方法可参照TranslateAnimation
ScaleAnimation使用方法如下:
mScaleAnimation = new ScaleAnimation(1, 2, 1, 2); mScaleAnimation.setDuration(2000); mScaleAnimation.setRepeatCount(1); mScaleAnimation.setRepeatMode(Animation.REVERSE);
上面ScaleAnimation构造函数中四个参数分别是:
fromX:起始x方向大小
toX:最终x方向大小
fromY:起始y坐标
toY:最终y坐标
上面代码含义为将View在2秒内横竖方向增大一倍,第二次是在原来的基础上缩小一倍,效果图如下:
xml实现方法同参照TranslateAnimation
RotateAnimation使用方法如下:
mRotateAnimation = new RotateAnimation(0, 360); mRotateAnimation.setDuration(2000); mRotateAnimation.setRepeatCount(1); mRotateAnimation.setRepeatMode(Animation.REVERSE);
上面代码含义为在2秒内将View旋转360度,再旋转回来,效果如下:
二、Frame Animation
看过电影的人也许知道,电影是由一张一张图片组成的,只不过图片切换速度快,在人视觉中看到的是连续效果。Frame Animation亦同样基于此原理实现,事先准备几张图片,按特定的顺序排好,然后使用特定的动画类将其播放,基于这种动画实现方式,Frame Anmation亦有一个中文名:逐帧动画。
实现这种动画需要使用到AnimationDrawable类,它继承于Drawable,使用方式如下:
private AnimationDrawable mAnimationDrawable; mAnimationDrawable = new AnimationDrawable(); //增加图片,并设定图片播放时间 mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.australia), 500); mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.austria), 500); mAnimationDrawable.addFrame(getResources().getDrawable(R.drawable.china), 500); mAnimationDrawable.start();
上面代码是将三张图片按照指定的顺序,指定的时间播放,以达到动画效果,如下图:
DBA.gif" alt="" />
同样亦可以使用xml方式实现,代码如下:
/anim/frame.xml
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/australia" android:duration="500"/> <item android:drawable="@drawable/austria" android:duration="500"/> <item android:drawable="@drawable/china" android:duration="500"/> </animation-list>
xml中调用:
<ImageView android:id="@+id/frame_iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@anim/frame"/>
java中调用:
private ImageView mFrameIv; private AnimationDrawable mAnimationDrawable; mFrameIv = (ImageView) findViewById(R.id.frame_iv); mAnimationDrawable = (AnimationDrawable) mFrameIv.getBackground(); mAnimationDrawable.start();
关于Frame Tween的知识比较简单,熟悉AnimationDrawable便行,下面介绍本章最重要的Property Animation。
三、Property Animation
中文亦叫属性动画,如其名字一样,可以改变对象的属性,注意是对象,不是View,而且是任意对象,只要对象符合一定条件即可,上述中的Tween Animation仅仅只能操作View,对于View之外的对象则无能为力,并且其未改变View的属性,仅仅是通过父类View对其重绘达到动画效果;而Frame Animation动画功能则过于简单。随着我们Android应用的发展,能发现Tween Animation、Frame Animation有时候并不能达到理想的效果,谷歌亦意识到了这点,故而在Android3.0之后增加了强大的属性动画。
Property Animation有两个类可供使用:ValueAnimator、ObjectAnimator。这两个类均直接或间接继承于Animator
ObjectAnimator使用方式如下:
private ObjectAnimator mObjectAnimator; //设置不透明度从1到0变化 mObjectAnimator = ObjectAnimator .ofFloat(mObjectAnimatorIv, "alpha", 1, 0) .setDuration(1000); //设置插值器,先加速后减速 mObjectAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); //动画重复执行一次 mObjectAnimator.setRepeatCount(1); //设置执行模式 mObjectAnimator.setRepeatMode(ValueAnimator.REVERSE); mObjectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { //获取当前的动画值 float cVal = (Float) animation.getAnimatedValue(); //根据动画值缩放当前View mObjectAnimatorIv.setScaleX(cVal); mObjectAnimatorIv.setScaleY(cVal); } });
上面代码意思是将当前View不透明度从1按照一定规律变为0,第一句代码中的ofFloat(mObjectAnimatorIv, "alpha", 1, 0)中的alpha代表不透明度,有人可能会说我可以写其他的吗?当然可以,比如写成ofFloat(mObjectAnimatorIv, "tmg", 1, 0),但你会发现动画执行后不会有效果,因为写这个字符串的前提是当前View或者当前View的父类中实现了这个字符串的get、set方法,即getAlpha、setAlpha,当动画执行时,动画类会通过调用setAlpha来改变View的alpha属性,达到想要的动画效果。那这个alpha是怎么从1便到0的呢?Property Animation中有一个TypeEvaluator,这个属性的含义是根据属性的开始、结束值与TimeInterpolation计算出的因子计算出当前时间的属性值,上例中的alpha便是这样从1变到0的,但是上面并没设置TypeEvaluator啊?其原因是Property Animation
会配置一个默认的TypeEvaluator,如果一定要显性设置,有几个写好的TypeEvaluator供选择:
IntEvaluator:属性值的类型为int
FloatEvaluator:属性值的类型为float
ArgbEvaluator:属性的值类型为十六进制颜色值
如果上述没有你需要的TypeEvaluator,你亦可以选择继承TypeEvaluator自定义一个类似的TypeEvaluator
从上面代码中我们还可以看到:
float cVal = (Float) animation.getAnimatedValue(); mObjectAnimatorIv.setScaleX(cVal); mObjectAnimatorIv.setScaleY(cVal);
其中animation.getAnimatedValue();是计算View当前属性值,当然根据前面的设置,这个属性值实在1到0之间变化,下面的两行代码是通过每个时刻不同的属性值对View进行缩放,达到在改变透明度的同时,
又改变View大小的效果,效果图如下:
同样的,Property Animation也可以通过xml实现,类似上面两种,不再介绍,读者可从之后分享的源码中看到
ValueAnimator的使用方式和ObjectAnimator很相似,唯一的区别是ValueAnimator不能直接设置属性,即类似
mObjectAnimator = ObjectAnimator .ofFloat(mObjectAnimatorIv, "alpha", 1, 0) .setDuration(1000);
它只能这样:
mValueAnimator = ValueAnimator.ofFloat(1, 0);
mValueAnimator.setTarget(mValueAnimatorIv);
动画效果可在监听事件中实现,如:
mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float animatedValue = (float) animation.getAnimatedValue(); mValueAnimatorIv.setAlpha(animatedValue); mValueAnimatorIv.setScaleX(animatedValue); mValueAnimatorIv.setScaleY(animatedValue); } });
谈谈Keyframe,keyframe是一个时间/值对,通过它可以定义一个在特定时间的特定状态,
即关键帧,而且在两个keyframe之间可以定义不同的Interpolator,就好像多个动画的拼接,第一个动画的结束点是第二个动画的开始。keyframe是抽象类,要通过ofInt(),ofFloat()等获得适当的keyframe,然后通过PropertyValuesHolder.ofKeyframe
获得PropertyValuesHolder对象,如下例子:
Keyframe kf0 = Keyframe.ofInt(0, 400); Keyframe kf1 = Keyframe.ofInt(0.25f, 200); Keyframe kf2 = Keyframe.ofInt(0.5f, 400); Keyframe kf3 = Keyframe.ofInt(0.75f, 100); Keyframe kf4 = Keyframe.ofInt(1f, 500); PropertyValuesHolder propertyValuesHolder = PropertyValuesHolder.ofKeyframe("width", kf0, kf1, kf2, kf3, kf4); mKeyframesObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(mKeyframesObjectAnimationBtn, propertyValuesHolder); mKeyframesObjectAnimator.setDuration(2000); mKeyframesObjectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { android.util.Log.d("update", (animation.getAnimatedValue()).toString()); } });
动画效果同样是在onAnimationUpdate中添加,上面仅仅是打个log
如果你想应用多个动画,AnimationSet可以帮到你,AnimationSet提供了一个把多个动画组合成一个组合的机制,并可设置组中动画的时序关系,如同时播放,顺序播放等。
如下代码:
mAnimatorSet = new AnimatorSet(); mAnimatorSet.play(mObjectAnimator).before(mValueAnimator); mAnimatorSet.play(mValueAnimator).before(mKeyframesObjectAnimator);
play是播放,before是在当前动画之前播放,还有2个方法with、after,分别是与当前动画同时播放,在当前动画之后播放,效果如下:
上面是三个动画按照一定顺序播放,有时候我们需要比较复杂的动画效果时,这个类会很重要。
四、扩展介绍
interpolator:插值器,代表动画值的变化速度
repeatCount:动画重复执行的次数
repeatMode:动画执行模式,每次动画执行方式是一样还是按照相反方向执行
duration:动画执行时间
evaluator:根据属性的开始、结束值与TimeInterpolation计算出的因子计算出当前时间的属性值
参考文章:
http://www.cnblogs.com/angeldevil/archive/2011/12/02/2271096.html
http://blog.csdn.net/lmj623565791/article/details/38092093
源码:
https://github.com/taothreeyears/animation