动画效果（一）－渐变动画

第1节 概述

在安卓系统中，为了界面或者其中的组件在切换、改变的时候显得自然生动、具有流动性的美感，就给它们添加了动画的效果。

例如图片切换的时候，前一张图片淡出，后一张图片淡入。

动画分了三类： frame动画（逐帧动画）、 property动画（属性动画）、 tween动画（渐变动画）。

1. 逐帧动画有点像播放电影，它把很多图片串起来，按照顺序一张一张显示，通过播放形成动画效果；

2. 属性动画是对控件某个属性使用的动画，例如一个按钮的宽度要从窄设置到宽，而我们希望它的宽度调整的时候，能看到它从窄到宽变化的过程，这时就需要使用属性动画。

3. 渐变动画是对控件整体使用的动画，有四种最常见到的效果：透明、平移、缩放和旋转。

/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。
/*******************************************************************/

第2节 渐变动画

渐变动画有四种最常见到的效果：透明、平移、缩放和旋转。这四种效果都有共同点，

1. 动画对象作为整体一点点变化；
2. 这是一个状态的迁移过程，需要时间的配合，动画的时间长短可以指定，动画变化的速度也是可以指定的；
3. 动画执行后，这个动画的对象，并不是真正的变成了动画展示的那样，它其实还保持着以前的样子，你看到的不过是个它的影子罢了，动画结束，影子就消失了。

动画效果可以通过资源文件定义，也可以通过代码来定义。

2.1 透明动画

透明动画的效果是，动画对象的透明度从一个程度变成另一个程度。例如从透明变成不透明这种淡入效果。

2.1.1 xml定义透明动画

通过xml定义透明动画，

1. 在res下新建一个anim目录，然后在这个目录下创建一个xml文件；

2. 定义动画效果，

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

透明动画的各个属性代表了如下的含义：

1. <alpha/>标签：这是一个透明效果的动画；
2. fromAlpha：动画开始时，动画对象的透明度值，取值在0-1之间，0是完全透明，1是完全不透明，0和1之间的值就是各种半透效果；
3. toAlpha：动画结束时，动画对象的透明度值，取值在0-1之间；
4. duration：动画持续的时间，单位是毫秒；

5. interpolator：这是插值器，用来指定动画变化的速率，例如是先快后慢，还是先慢后快，或者是均匀的变化。安卓系统为我们提供了很多现成的插值器，我们可以直接使用，例如上面的线性插值器@android:anim/linear_interpolator；

   

淡入效果就是刚开始没有显示，逐渐显示出来，所以它的fromAlpha就要设置成0，toAlpha设置成1;

淡出效果就是刚开始显示，逐渐隐藏起来，所以它的fromAlpha就要设置成1，toAlpha设置成0;

另外，Android SDK也提供了自定义插值器的方法，我们在以后介绍。

2.1.2 java代码定义透明动画

通过java代码定义透明动画，

1. 创建一个AlphaAnimation，填入起始alpha值和结束的alpha值；
2. 设定持续时间；
3. 设定插值器；

AlphaAnimation anim = new AlphaAnimation(0, 1);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.2 平移动画

平移动画的效果是，动画对象沿着水平方向或者垂直方向移动（或者两个方向同时移动）到另一位置。

2.2.1 xml定义平移动画

通过xml定义透明动画，

1. 在res下新建一个anim目录，然后在这个目录下创建一个xml文件；

2. 定义动画效果，

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
   
       <translate  android:fromXDelta="－100%" android:fromYDelta="－100%" android:toXDelta="0%" android:toYDelta="0%" android:duration="1500" android:interpolator="@android:anim/linear_interpolator"/>
   </set>

平移动画的各个属性代表了如下的含义：

1. <translate/>标签：这是一个平移效果的动画；
2. fromXDelta：动画开始时，动画对象相对于它真实位置在x方向上的坐标；
3. fromYDelta：动画开始时，动画对象相对于它真实位置在y方向上的坐标；
4. toXDelta：动画结束时，动画对象相对于它真实位置在y方向上的坐标；
5. toYDelta：动画结束时，动画对象相对于它真实位置在y方向上的坐标；
6. duration：动画持续的时间，单位是毫秒；
7. interpolator：这是插值器，用来指定动画变化的速率；

起始坐标有3种表达方式：

1. 动画对象的绝对位置：用数值表示。

2. 动画对象相对自身的位置：用％表示。例如给fromXDelta设定－100%，表示动画开始时，起始的左边边界相对于自身真实位置，在负的自身宽度的地方；

3. 动画对象相对于它父布局的位置：用％p表示，这里的p就是parent的缩写。

让对象从左往右平移进入的效果，就是让它的fromXDelta设置成－100％，toXDelta设置成0%；fromYDelta设置成0%；toYDelta设置成0%；

让对象从下往上平移进入的效果，就是让它的fromXDelta设置成0％，toXDelta设置成0%；fromYDelta设置成100%(y坐标是从上到下为正方向)；toYDelta设置成0%；

2.2.2 java代码定义平移动画

通过java代码定义平移动画，

1. 创建一个TranslateAnimation，填入x y方向的起始坐标和结束坐标；设置坐标时，可以设定坐标的类型，Animation.RELATIVE_TO_SELF表示使用相对自身的位置坐标，Animation.RELATIVE_TO_PARENT表示使用相对父布局的位置坐标，Animation.ABSOLUTE表示使用绝对位置坐标；
2. 设定持续时间；
3. 设定插值器；

//使用坐标的绝对位置创建动画
TanslateAnimation anim = new TanslateAnimation(－150, 0, －50, 0);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

//使用坐标的相对位置创建动画
TanslateAnimation anim = new TanslateAnimation(Animation.RELATIVE_TO_SELF, －1.0, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, －1.0, Animation.RELATIVE_TO_SELF, 0);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.3 缩放动画

伸缩动画的效果是，动画对象以某个位置为中心进行放大或者缩小。

2.3.1 xml定义伸缩动画

通过xml定义伸缩动画，

1. 在res下新建一个anim目录，然后在这个目录下创建一个xml文件；

2. 定义动画效果，

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
   
       <scale  android:fromXScale="－100%" android:fromYScale="－100%" android:toXScale="0%" android:toYScale="0%" android:pivotX="50%" android:pivotY="50%" android:duration="1500" android:interpolator="@android:anim/linear_interpolator"/>
   </set>

伸缩动画的各个属性代表了如下的含义：

1. <scale/>标签：这是一个伸缩效果的动画；
2. fromXScale：动画开始时，动画对象在x方向上相对于它真实大小的缩放比例；
3. fromYScale：动画开始时，动画对象在x方向上相对于它真实大小的缩放比例；
4. toXScale：动画结束时，动画对象在y方向上相对于它真实大小的缩放比例；
5. toYScale：动画结束时，动画对象在y方向上相对于它真实大小的缩放比例；
6. duration：动画持续的时间，单位是毫秒；
7. interpolator：这是插值器，用来指定动画变化的速率；
8. pivotX：动画进行缩放时的中心点x坐标；
9. pivotY：动画进行缩放时的中心点y坐标；

这里的pivotX与pivotY可以设置绝对坐标，也可以设置相对自身的相对坐标％，以及相对于父布局的相对坐标％p。

2.3.2 java代码定义伸缩动画

通过java代码定义伸缩动画，

1. 创建一个ScaleAnimation，填入x y方向的起始伸缩比例和结束伸缩比例；设置中心坐标时，可以设定坐标的类型，Animation.RELATIVE_TO_SELF表示使用相对自身的位置坐标，Animation.RELATIVE_TO_PARENT表示使用相对父布局的位置坐标，Animation.ABSOLUTE表示使用绝对位置坐标；
2. 设定持续时间；
3. 设定插值器；

//使用中心点的绝对位置创建动画
ScaleAnimation anim = new ScaleAnimation(1, 2, 1, 2, 50, 150);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);


//使用中心点的相对位置创建动画
ScaleAnimation anim = new ScaleAnimation(1, 2, 1, 2, Animation.RELATIVE_TO_SELF, 0.5, Animation.RELATIVE_TO_SELF, 0.5);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.4 旋转动画

旋转动画的效果是，动画对象以某个位置为中心进行旋转。

2.4.1 xml定义旋转动画

通过xml定义旋转动画，

1. 在res下新建一个anim目录，然后在这个目录下创建一个xml文件；

2. 定义动画效果，

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
   
       <rotate  android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:duration="1500" android:interpolator="@android:anim/linear_interpolator"/>
   </set>

伸缩动画的各个属性代表了如下的含义：

1. <rotate/>标签：这是一个旋转效果的动画；
2. fromDegrees：动画开始时，动画对象相对于真实位置旋转的角度；
3. toDegrees：动画开始时，动画对象相对于真实位置旋转的角度；
4. duration：动画持续的时间，单位是毫秒；
5. interpolator：这是插值器，用来指定动画变化的速率；
6. pivotX：动画进行缩放时的中心点x坐标；
7. pivotY：动画进行缩放时的中心点y坐标；

这里的pivotX与pivotY可以设置绝对坐标，也可以设置相对自身的相对坐标％，以及相对于父布局的相对坐标％p。

2.4.2 java代码定义旋转动画

通过java代码定义旋转动画，

1. 创建一个RotateAnimation，填入起始角度和结束角度；设置中心坐标时，可以设定坐标的类型，Animation.RELATIVE_TO_SELF表示使用相对自身的位置坐标，Animation.RELATIVE_TO_PARENT表示使用相对父布局的位置坐标，Animation.ABSOLUTE表示使用绝对位置坐标；
2. 设定持续时间；
3. 设定插值器；

//使用中心点的绝对位置创建动画
RotateAnimation anim = new RotateAnimation(0, 360, 50, 150);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

//使用中心点的相对位置创建动画
ScaleAnimation anim = new ScaleAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5, Animation.RELATIVE_TO_SELF, 0.5);
anim.setDuration(1500);
anim.setInterpolator(context, android.R.interpolator.linear);

2.5 使用动画

2.5.1 使用xml定义的动画

1. 使用AnimationUtils.loadAnimation()装载动画；
2. 对要使用动画的对象使用startAnimation()函数，启动动画；

Animation anim = AnimationUtils.loadAnimation(this, R.anim.custom_anim);
mAnimationTarget.startAnimation(anim);

2.5.2 使用代码定义的动画

使用代码定义的动画就和使用xml一样，对要使用动画的对象使用startAnimation()函数，启动动画；

mAnimationTarget.startAnimation(anim);

2.6 多个动画效果叠加

这几种动画不仅可以单独使用，也可以混合着使用，例如你希望一个对象一边淡入一边做平移。

2.6.1 xml定义多个动画

对同一个对象同时使用多个动画效果，只要在定义动画的xml文件中，添加多个希望的动画就行了。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <rotate  ....../>

    <scale  ....../>

    <translate  ....../>

    <alpha  ....../>
</set>

2.6.2 java代码定义多个动画

在java代码中可以，

1. 创建多个动画；
2. 创建AnimationSet；
3. 将创建的多个动画加入到AnimatonSet当中；

TranslateAnimation anim1 = new TranslateAnimation(...);
ScaleAnimation anim2 = new ScaleAnimation(...);
AlphaAnimation Anim3 = new AlphaAnimation(...);
RotateAnimation anim4 = new RotateAnimation(...);

AnimationSet set = new AnimationSet(true);
set.addAnimation(anim1);
set.addAnimation(anim2);
set.addAnimation(anim3);
set.addAnimation(anim4);

mAnimationTarget.startAnimation(set);

2.7 渐变动画的监听

有的时候，需要知道一个动画执行的状态，就需要给动画添加一个监听器。通过监听器获得动画状态变化的通知。

TranslateAnimation anim = new TranslateAnimation(...);

anim.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        //动画开始
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        //动画结束
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        //动画重复执行
    }
});

2.8 渐变动画的其它共同属性

在前面我们已经介绍了android:duration android:interpolator等共同的属性。现在我们再介绍几个其它的重要属性。

2.8.1 android:fillAfter

假设一个按钮被使用透明效果的动画，从不透明变到全透明。动画完成后，这个按钮会被还原到它的真实状态（按钮并没有消失或透明，仍然显示在以前的位置）。

如果给这个动画设置了android:fillAfter属性为true，那么在执行完动画后，按钮还是保持动画最后一帧的效果。

这两个属性要设置在<set/>标签当中才能有效果。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="false">
    ......
</set>

也就是说，如果是用代码创建动画的话，得把这个动画放到AnimationSet之中再来设置属性。

RotateAnimation anim = new RotateAnimation(...);
AnimationSet set = new AnimationSet(true);
set.addAnimation(anim);
set.setFillAfter(true);

2.8.2 android:repeatMode与android:repeatCount

可以通过设置android:repeatCount的数值，让动画重复播放；

1. 该值为大于0：动画重复该数值表示的次数；
2. 该值设置为INFINITE：动画将会无限循环进行下去；

当android:repeatCount被设置大于0以后，还可以配合使用android:repeatMode，

1. 该值设置为RESTART：每一次动画执行完成后，回到最初状态重新执行下一次动画；
2. 该值设置为REVERSE：每一次动画执行完成后，动画倒着执行；