Android动画学习之Tween Animation

这篇文章里，我们来学习一下Tween Animation(补间动画)的使用。补间动画虽然是Android中较古老的一种动画系统，不过对于一般的需求已经足够使用了，因此熟练掌握它是很有必要的。Tween Animation主要有以下四种：

1. Alpha:透明度渐变效果
2. Rotate:旋转效果
3. Translate:位移效果
4. Scale:缩放效果

Tween Animation可以使用xml或者代码两种形式来实现，接下来我们就一一举例来说明这几种效果。

AlphaAnimation

xml

这个例子里我们来实现使用xml动画形式将ImageView的透明度从0变到1，而后再用java代码的形式将其从1变到0，首先是xml的编写，Tween动画的位置位于res目录下的anim中，新建anim_alpha：

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

先解释下出现的几个属性：

interpolator:插值器，修饰动画变化速度，有accelerated(加速)、decelerated(减速)、repeated(重复)、bounced(弹跳)等。

duration:动画持续时间

repeatCount:动画执行一次后重复执行的次数，0为不重复执行

repeatMode:两种，reverse执行模式为from -> to -> from 重复执行，restart为from -> to 重新变为from -> 重复此过程

fillAfter:动画执行结束后是否停留在当前状态，true为结束后停留在当前状态

fromAlpha:alpha动画的特有属性，表示动画起始透明度，接受float类型

toAlpha:alpha动画的特有属性，表示动画结束透明度，接受float类型

使用编写好的xml也很简单，代码中调用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_alpha);
ivTest.startAnimation(animation);

这样，我们就使用xml完成了一个透明度动画，该动画不重复执行，会使控件在1S内透明度从1变到0也就是消失，并在动画结束后保持这个状态。

Java

接下来我们使用Java代码来完成透明度动画，使刚刚消失的View重新显示出来，代码很简单：

animation = new AlphaAnimation(0.0f,1.0f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(1000);
animation.setRepeatCount(0);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

可以看到我们在xml中配置的属性都可以在代码中进行设置，这里就不多做赘述

下面是动画效果：

RotateAnimation

xml

废话不多说，直接上代码:

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="2"
    android:repeatMode="restart"
    />

通用属性上面已经有讲过了，没什么好说的，这里需要注意：

fromDegress:旋转起始角度

toDegress:旋转结束角度

pivotX:旋转中心点X轴坐标，如果加了%号代表相对于自身宽度的位置，比如50%就是指自身X轴的中心点

pivotY:旋转中心点Y轴坐标，如果加了%号代表相对于自身宽度的位置，比如50%就是指自身Y轴的中心点

这四个属性是RotateAnimation的独有属性，xml写好之后一样代码中调用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_rotate);
ivTest.startAnimation(animation);

此动画的效果是以view中心为圆点3S内逆时针旋转360度，重复3次

Java

RotateAnimation的构造方法会有些多，写法是这样的：

animation = new RotateAnimation(0,360,
    Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(3000);
animation.setRepeatCount(2);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

需要注意的是这个构造方法，我们查看源码可以看到

public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
            int pivotYType, float pivotYValue){}

其中fromProgress与toProgress分别是起始角度和结束角度，pivotXType是X轴位置参照物，分别是：

1. RELATIVE_TO_SELF：相对于控件自身；
2. RELATIVE_TO_PARENT：相对于父控件；
3. ABSOLUTE：绝对坐标；

pivotXValue和pivotYValue分别是x、y轴坐标，当type是RELATIVE_TO_SELF时，取值为0~1f，当type为RELATIVE_TO_PARENT和ABSOLUTE时，value使用像素值px

这个动画的效果是逆时针旋转一圈再顺时针旋转一圈再逆时针旋转一圈(注意repeatMode为REVERSE)

下面是动画效果：

TranslateAnimation

xml

还是直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%"
    android:toXDelta="100%"
    android:fromYDelta="0%"
    android:toYDelta="50%"
    android:duration="3000"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

这里的特有属性是:

fromXDelta:动画开始时X轴位置，带%号则是相对本身，不带%号则为像素值

toXDelta:动画结束时X轴位置，带%号则是相对本身，不带%号则为像素值

fromYDelta:动画开始时Y轴位置，带%号则是相对本身，不带%号则为像素值

toYDelta:动画结束时Y轴位置，带%号则是相对本身，不带%号则为像素值

代码调用动画：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_translate);
ivTest.startAnimation(animation);

此动画效果是横向向右平移一个View的宽度，同时向下平移0.5View的高度

Java

TranslateAnimation在代码中的使用方法是：

animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,
Animation.RELATIVE_TO_SELF,-1.0f,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-0.5f);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(3000);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

这里用到的构造方法是

public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {}

4个int类型的分别是参照物，同上RotateAnimation，另外四个就是xml中使用的四个属性。

这个动画效果和上面xml的刚好相反

惯例，动画效果如下：

ScaleAnimation

xml

xml的写法：

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="100%"
    android:toXScale="20%"
    android:fromYScale="100%"
    android:toYScale="20%"
    android:pivotX="100%"
    android:pivotY="100%"
    android:duration="500"
    android:fillAfter="true"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />

ScaleAnimation的特有属性是:

fromXScale:X轴起始缩放比例，0~1

toXScale:X轴结束缩放比例，0~1

fromYScale:Y轴起始缩放比例，0~1

toYScale:Y轴结束缩放比例，0~1

pivotX:动画X轴起始位置，带%号相对于自身，其余为像素值

pivotY:动画Y轴起始位置，带%号相对于自身，其余为像素值

代码调用：

animation = AnimationUtils.loadAnimation(this,R.anim.anim_scale);
ivTest.startAnimation(animation);

此动画效果是横向向右下缩放至原View的20%

Java

代码中使用ScaleAnimation的方式是：

animation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,
Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,1);
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.setDuration(500);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.REVERSE);
animation.setFillAfter(true);
ivTest.startAnimation(animation);

这次的构造方法就不用细说了，跟上面两个类似

动画效果是这样的：

AnimationSet

这里再讲一个动画集合的使用

xml

AnimationSet的xml文件同样存放在res/anim下，它可以允许放置多个动画效果，按顺序执行，xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
    <alpha
        ...
        />
    <rotate
        ...
        />
    <translate
        ...
        />
    <scale
        ...
        />
</set>

使用xml依然是

animation = AnimationUtils.loadAnimation(this,R.anim.anim_set);
ivTest2.startAnimation(animation);

需要注意的是xml中\可以嵌套\

Java

代码：

//显示动画
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f,1.0f);
...

//旋转动画
RotateAnimation rotateAnimation = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
...

//平移动画
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-1.0f,
                                                               Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,-0.5f);
...

//拉伸动画
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,
Animation.RELATIVE_TO_SELF,1,Animation.RELATIVE_TO_SELF,1);
...

//AnimationSet
AnimationSet animationSet = new AnimationSet(true);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.addAnimation(alphaAnimation);
ivTest2.startAnimation(animationSet);

效果如下

结语

到这里我们就算是吧Tween动画的四种动画效果写完了，还熟悉了AnimationSet的使用，demo已经上传至github，地址在：github，欢迎指教~
ps:打个广告，我的个人博客，目前还处于陆续施工状态，欢迎访问~