Android动画全面剖析-Tween动画

一、概述    

    上一节我们分析了Frame动画，本节我们结合实例，继续分析Tween动画。Tween动画只需要指定动画的开始帧、结束帧以及持续时间，中间帧由系统自动计算完成。Tween动画对应的类是Animation，它是抽象类，我们使用的是它的子类，继承关系如下：

                       动画类                               xml节点                                                                                              功能

ScaleAnimation	<scale>	大小伸缩效果
TranslateAnimation	<translate>	位置移动效果
AlphaAnimation	<alpha>	透明度渐变效果
RotateAnimation	<rotate>	旋转效果
AnimationSet	<set>	持有alpah、scale、translate、rotate或者其他set元素的动画集合

     Animation是四类Tween动画的父类，因此它有一些公共属性，如下：

                       Java方法                                             xml属性                                                                                           属性功能

setDuration(long)	android:duration	设置动画持续时间，单位为毫秒
setFillAfter(boolean)	android:fillAfter	动画结束时控件是否保持动画最后状态
setFillBefore(boolean)	android:fillBefore	动画结束时控件是否还原到开始动画时的状态
setFillEnable(boolean)	android:fillEnable(boolean)	与android:fillBefore效果相同
setInterpolator(boolean)	android:interpolator	设置插值器，动画变化快慢程度
setRepeatCount(int)	android:repeatCount	重复次数
setRepeatMode(int)	android:repeatMode	重复类型：reverse倒序回放、restart从头播放
setStartOffset(long)	android:startOffset	调用start函数后，等待多长时间后再运行动画，单位为毫秒

     由于Animation类是抽象父类，那么我们使用的补间动画无论是哪一种都已经具备了以上属性。

二、四类补间动画

补间动画demo截图：

代码GitHub地址：https://github.com/xiyy/CityOfAnimation

ScaleAnimation

1、xml实现动画

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1.0"
    android:toYScale="1.0"/>

duration : 动画持续时间，单位毫秒

fromXScale : 初始X轴缩放比例

fromYScale : 初始Y轴放缩比例

toXScale : 结束时X轴放缩比例

toYScale : 结束时Y轴放缩比例

pivotX : 缩放起点X轴坐标

可以是数值、百分数、百分数p，譬如50表示以当前View左上角坐标x值加50px为初始点、50%表示以当前View的左上角加上当前View宽的50%做为初始点、50%p表示以当前View的左上角加上父控件宽的50%做为初始点。

pivotY : 缩放起点Y轴坐标，规律同pivotX

2 xml属性与构造方法参数对应

                        构造方法参数                                                    xml属性

ScaleAnimation(float fromX, …)	android:fromXScale
ScaleAnimation(…, float toX)	android:toXScale
ScaleAnimation(…, …, float fromY, …)	androd:fromYScale
ScaleAnimation(…, …, …, float toY)	android:toYScale
ScaleAnimation(…, float pivotX, …)	android:pivotX
ScaleAnimation(…, float pivotY)	android:pivotY

 

3 Java代码

private void scaleAnimation() {
        //xml文件中，pivotX、pivotY代表从哪个点开始缩放，含义和rotateAnimation()中4、6参数相同
        if (mScale1.isChecked()) {
            mAnimation = AnimationUtils.loadAnimation(this, R.anim.tween_activity_scale_1);
        } else if (mScale2.isChecked()) {
            mAnimation = AnimationUtils.loadAnimation(this, R.anim.tween_activity_scale_2);
        } else {
            mAnimation = AnimationUtils.loadAnimation(this, R.anim.tween_activity_scale_3);
        }
        setProperty();
        mImageIcon.startAnimation(mAnimation);
}

上述动画，View在1秒内，从无变化到原始大小，缩放起点是view中心

TranslateAnimation

1 xml实现动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:fromXDelta="50%"
    android:fromYDelta="50%"
    android:toXDelta="100"
    android:toYDelta="100">

</translate>

duration:动画持续时间，单位毫秒
(fromXDelta,fromYDelta):移动起始位置
(toXDelta,toYDelta):移动结束位置
view左上角在duration内从起始位置移动到结束位置
fromXDelta：可以是数值、百分数、百分数p，譬如50表示以当前View左上角坐标x值加50px为初始点、50%表示以当前View的左上角加上当前View宽的50%做为初始点、50%p表示以当前View的左上角加上父控件宽的50%做为初始点。
fromYDelta、toXDelta、toYDelta含义和fromXDelta相同

2 xml属性和构造方法参数对应

TranslateAnimation(float fromXDelta, …)	android:fromXDelta
TranslateAnimation(…, float toXDelta)	android:toXDelta
TranslateAnimation(…, float fromYDelta, …)	android:fromYDelta
TranslateAnimation(…, float toYDelta)	android:toYDelta

 

3 Java代码

private void translateAnimation() {
        mAnimation = AnimationUtils.loadAnimation(this, R.anim.tween_activity_translate);
        setProperty();
        mImageIcon.startAnimation(mAnimation);
}

上述动画，view在300毫秒内，从现有位置向右移动100像素的同时向下移动100像素

AlphaAnimation

1 xml动画实现

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toAlpha="0.0" />

1秒内，View从完全不透明到完全透明；interpolator是插值器，后面会具体讲述

2 构造方法参数和xml属性对应

JAVA方法	XML属性	解释
AlphaAnimation(float fromAlpha,…)	android:fromAlpha	动画开始的透明度（0.0到1.0，0.0是全透明，1.0是不透明）
AlphaAnimation(…, float toAlpha)	androdi:toAlpha	动画结束的透明度（同上）

 

3 Java代码

private void alphaAnimation() {
        mAnimation = AnimationUtils.loadAnimation(this, R.anim.tween_activity_alpha);
        setProperty();
        mImageIcon.startAnimation(mAnimation);
}

上述动画，view在1秒内，从完全不透明过渡到完全透明

RotateAnimation

1 xml属性与构造方法参数对应

JAVA方法	XML属性	解释
RotateAnimation(float fromDegrees, …)	android:fromDegress	旋转开始角度，正代表顺时针度数，负代表逆时针度数
RotateAnimation(…, float toDegress)	android:toDegress	旋转结束角度（同上）
RotateAnimation(…, …, float pivotX, …)	android:pivotX	旋转点X坐标了，可以是数值、百分数、百分数p，如50表示以当前View左上角x坐标加50px为旋转点、50%表示以当前View的左上角加上当前View宽高的50%做为旋转点、50%p表示以当前View的左上角加上父控件宽高的50%做为旋转点。
RotateAnimation(…, …, …, pivotY)	android:pivotY	旋转点Y坐标（同上）

 2 Java代码实现

private void rotateAnimation() {
        //第4和第6个参数，决定了图像围绕哪个点旋转，如(0,0)，则图像围绕左上顶点旋转；(0.2,0.5)，
        // 则图像围绕(0.2*imageView.width,0.5*imageView.height)旋转；(0.5,0.5)则图像围绕图像中心旋转;
        //(1.0,1.0)，则图像围绕右下顶点旋转；
        //参数3,5代表相对本身旋转
        mAnimation = new RotateAnimation(-degree, degree, Animation.RELATIVE_TO_SELF,
                pivotXValue, Animation.RELATIVE_TO_SELF, pivotYValue);
        mAnimation.setDuration((int) time);
        setProperty();
        mImageIcon.startAnimation(mAnimation);
}

三、Animation、View常用API

Animation类的方法	解释
reset()	重置Animation的初始化
cancel()/stop()	取消/停止Animation动画
start()	开始Animation动画
setAnimationListener(AnimationListener listener)	给当前Animation设置动画监听
hasStarted()	判断当前Animation是否开始
hasEnded()	判断当前Animation是否结束

 

View类的常用动画操作方法	解释
startAnimation(Animation animation)	view设置Animation动画并开始执行
clearAnimation()	取消View在执行的Animation动画

 四、插值器Interpolator

    Interpolator负责控制动画的变化速度，这就使得基本的动画效果（Alpha、Scale、Translate、Rotate）能以匀速变化、加速、减速、抛物线等各种速度变化。Interpolator是一个接口，它定义了所有Interpolator都必须实现的方法：float getInterpolator(float input)，开发者完全可以通过实现Interpolator来控制动画的变化速度。Android为Interpolator提供了如下几个实现类，分别用于实现不同的动画变化速度。

java类	xml id值	描述
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator	动画始末速率较慢，中间加速
AccelerateInterpolator	@android:anim/accelerate_interpolator	动画开始速率较慢，之后慢慢加速
AnticipateInterpolator	@android:anim/anticipate_interpolator	开始的时候从后向前甩
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator	类似上面AnticipateInterpolator
BounceInterpolator	@android:anim/bounce_interpolator	动画结束时弹起
CycleInterpolator	@android:anim/cycle_interpolator	循环播放速率改变为正弦曲线
DecelerateInterpolator	@android:anim/decelerate_interpolator	动画开始快然后慢
LinearInterpolator	@android:anim/linear_interpolator	动画匀速改变
OvershootInterpolator	@android:anim/overshoot_interpolator	向前弹出一定值之后回到原来位置
PathInterpolator		新增，定义路径坐标后按照路径坐标来跑。

 

五、补间动画分析

    Tween动画只能对View进行移动、缩放、旋转和淡入淡出等简单操作，一旦我们的需求超出了移动、缩放、旋转和淡入淡出这四种对View的操作，那么补间动画就不能再帮我们忙了，也就是说它在功能和可扩展方面都有相当大的局限性。此外，Tween动画只是改变了View的显示效果而已，并不会真正的改变View的属性。具体来说，例如屏幕左上角有一个Button，使用补间动画将其移动到右下角，此刻你去点击右下角的Button，它是绝对不会响应点击事件的，因此其作用区域依然还在左上角。只不过是补间动画将其绘制在右下角而已。

    因此Tween动画适用于移动、缩放、旋转和淡入淡出这四种操作，并且动画过程中不需要响应点击事件，其他动画场景考虑Frame动画或者Property动画。

   本节代码GitHub地址：https://github.com/xiyy/CityOfAnimation，下一节，我们一起来分析属性动画，欢迎关注！