在一些好的android应用中,我们总能见到很酷很炫的动画效果。而android系统又给我们提供了很多非常方便的动画效果。今天工作不算太忙,就抽空总结一下我们平时开发过程中常见的动画。
我将分三个系列分别总结android动画:
1. android中的补间动画。
2. android中的帧动画。(使用不多)
3. android中的属性动画。(应用非常的广泛)
今天的重点是1.android中的补间动画。可划分四种类型。旋转、平移、透明度、缩放。
一、 常见的属性的含义
scale —— ScaleAnimation
alpha —— AlphaAnimation
rotate —— RotateAnimation
translate —— TranslateAnimation
set —— AnimationSet
它们的共同父类是Animation,常见的属性有:
android:duration 动画持续时间,以毫秒为单位
android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
android:repeatCount 重复次数
android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。
android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,可以理解为动画变化的速率。
二、旋转动画(Rotate)
对应的属性和构造方法说明
Rotate标签所具有的XML属性有:
- android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
- android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
- android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
- android:pivotY 缩放起点Y轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p
- RotateAnimation(Context context, AttributeSet attrs) 从本地XML文档加载动画,同样,基本不用
- RotateAnimation(float fromDegrees, float toDegrees)
- RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
- RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
1. 通过xml实现动画效果,在res文件夹下边创建一个文件夹,名叫anim,实现旋转动画的文件,我取名为rotate。内容如下:
<span style="font-family:Microsoft YaHei;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<rotate
android:fromDegrees="90"
android:toDegrees="720"
android:pivotX="50%"
android:pivotY="50%"
android:duration="4000"
android:fillAfter="true"
xmlns:android="http://schemas.android.com/apk/res/android">
</rotate>
</span>
在代码中,我们需要引用这个文件
Animation anim = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
mTvAnim.startAnimation(anim);
具体的含义:控件mTvAnim从90开始旋转,旋转720都停止,动画持续的时间为4秒,整个动画都是以mTvAnim中心点为基准的,动画结束以后,保留最后的动画状态。
2. 通过代码实现动画效果
我们需要注意的是,旋转的中心点的坐标,可以是绝对的数值、可以是相对于自身宽高的一个比例或者是父控件的宽高与自身的坐标来共同明确坐标。所有我们第四个构造函数的,pivotX/pivotY类型有三种ABSOLUTE/RELATIVE_TO_SELF/RELATIVE_TO_PARENT,这三种对应xml文件中的数值、百分数、百分数p。
对应的代码实现:
RotateAnimation anim = new RotateAnimation(90, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(4000);
anim.setFillAfter(true);
mTvAnim.startAnimation(anim);
三、缩放动画
Scale属性和构造函数:
- android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
- android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
- android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
- android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
- android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,当为数值时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。(具体意义,后面会举例演示)
- android:pivotY 缩放起点Y轴坐标,取值及意义跟android:pivotX一样。
- ScaleAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到
- ScaleAnimation(float fromX, float toX, float fromY, float toY)
- ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
- ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
1. 通过xml实现动画效果
<?xml version="1.0" encoding="utf-8"?>
<scale
android:fromXScale="0.5"
android:toXScale="1.5"
android:fromYScale="0.5"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="4000"
android:fillAfter="true"
xmlns:android="http://schemas.android.com/apk/res/android">
</scale>
这个动画的含义为:动画开始时,x、y方向都缩小0.5倍,x/y都放大至1.5倍,这个动画持续时间为4秒,动画结束以后,保持结束时的状态。
2. 通过代码实现
ScaleAnimation anim = new ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
anim.setDuration(4000);
anim.setFillAfter(true);
mTvAnim.startAnimation(anim);
四、渐入渐出动画(也就是透明度)
Alpha属性和构造函数:
- android:fromAlpha 动画开始的透明度,从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
- android:toAlpha 动画结束时的透明度,也是从0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
- AlphaAnimation(Context context, AttributeSet attrs) 同样,从本地XML加载动画,基本不用
- AlphaAnimation(float fromAlpha, float toAlpha)
1. 通过xml实现动画
<?xml version="1.0" encoding="utf-8"?>
<alpha
android:fromAlpha="0"
android:toAlpha="1.0"
android:fillAfter="true"
android:duration="4000"
xmlns:android="http://schemas.android.com/apk/res/android">
</alpha>
动画的含义:从完全不可见奥完全可见总共需要4秒钟的时间,最后保留动画结束时的状态。
2. 通过代码实现
AlphaAnimation anim = new AlphaAnimation(0f, 1.0f);
anim.setDuration(4000);
anim.setFillAfter(true);
mTvAnim.startAnimation(anim);
五、平移动画
translate属性和构造函数
- android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
- android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
- android:toXDelta 结束点X轴坐标
- android:toYDelta 结束点Y轴坐标
- TranslateAnimation(Context context, AttributeSet attrs) 同样,基本不用
- TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
- TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
由于fromXDelta、fromYDelta、toXDelta、toYDelta这三个属性都具有三种状态,所以在构造函数中,最理想的状态就是第三个构造函数,能够指定每个值的类型,第二个构造函数:TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)使用是绝对数值。只有最后一个构造函数可以指定百分数和相对父控件的百分数。
1. 通过xml实现动画
<?xml version="1.0" encoding="utf-8"?>
<translate
android:fromXDelta="0"
android:toXDelta="20%p"
android:fromYDelta="0"
android:toYDelta="20%p"
android:fillAfter="true"
android:duration="3000"
xmlns:android="http://schemas.android.com/apk/res/android">
</translate>
含义:平移的起点就是控件左上角,平移的终点x=控件左上角x坐标+当前控件父控件宽度的20%,平移的终点y也是同理,整个动画持续的时间为3秒,维持动画结束是的状态。
2. 通过代码实现
TranslateAnimation anim = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_PARENT, 0.2f, Animation.ABSOLUTE, 0, Animation.RELATIVE_TO_PARENT, 0.2f);
anim.setDuration(3000);
anim.setFillAfter(true);
mTvAnim.startAnimation(anim);
六、set动画
AnimationSet类对应set标签,定义动作类的集合
它自己是没有XML属性的,所以我们直接说它的构造函数:
- AnimationSet(Context context, AttributeSet attrs) 同样,基本不用
- AnimationSet(boolean shareInterpolator) shareInterpolator取值true或false,取true时,指在AnimationSet中定义一个插值器(interpolater),它下面的所有动画共同。如果设为false,则表示它下面的动画自己定义各自的插值器。
增加动画的函数为:(更多函数,请参看SDK文档)
- public void addAnimation (Animation a)
1. 通过xml实现动画效果
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:fillAfter="true"
>
<rotate
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" />
<scale
android:fromXScale="0"
android:toXScale="1.2"
android:fromYScale="0"
android:toYScale="1.2"
android:pivotX="50%"
android:pivotY="50%"
/>
<alpha
android:fromAlpha="0.2"
android:toAlpha="1.0"
/>
</set>
2. 通过代码实现
AlphaAnimation alphaAnim = new AlphaAnimation(0f, 1.0f);
ScaleAnimation scaleAnim = new ScaleAnimation(0.5f, 1.5f, 0.5f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
RotateAnimation rotateAnim = new RotateAnimation(90, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AnimationSet animSet = new AnimationSet(true);
animSet.addAnimation(alphaAnim);
animSet.addAnimation(scaleAnim);
animSet.addAnimation(rotateAnim);
animSet.setDuration(3000);
animSet.setFillAfter(true);
mTvAnim.startAnimation(animSet);
七、插值器
简单理解Interpolato就是为了控制动画变化的速率的。
意义如下:
- AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速
- AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
- AnticipateInterpolator 开始的时候向后然后向前甩
- AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
- BounceInterpolator 动画结束的时候弹起
- CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
- DecelerateInterpolator 在动画开始的地方快然后慢
- LinearInterpolator 以常量速率改变
- OvershootInterpolator 向前甩一定值后再回到原来位置
可以在xml文件中使用:
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
通过setInterpolator方法也可以设置插值器。
- android:fromXDelta 起始点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述,这里就不再重讲
- android:fromYDelta 起始点Y轴从标,可以是数值、百分数、百分数p 三种样式;
- android:toXDelta 结束点X轴坐标
- android:toYDelta 结束点Y轴坐标
- TranslateAnimation(Context context, AttributeSet attrs) 同样,基本不用
- TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
- TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
由于fromXDelta、fromYDelta、toXDelta、toYDelta这三个属性都具有三种状态,所以在构造函数中,最理想的状态就是第三个构造函数,能够指定每个值的类型,第二个构造函数:TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)使用是绝对数值。只有最后一个构造函数可以指定百分数和相对父控件的百分数。