动画基础（一） 四种基本动画(xml和java编写)

作者：夏至 ，欢迎转载，也请保留这份申明，谢谢
转载请保留这份申明 http://blog.csdn.net/u011418943/article/details/52083783
前言：
生活不可能事事都能顺心，特别是刚毕业的时候，既然有些事情改变不了
那就做好工作的同时，增强自己，也请努力到心疼自己。

我们知道，补间动画共有四种，即透明度(alpha)、缩放(scale)、旋转(rotate)和平移(translate)，在一般的动画效果中，只要组合了这四个家伙，就能打通任督二脉，一般的效果我们都是可以处理的。
可以看下面这张图：

我们玩的就是这几个动画，所以，操作界面如下图：

一 、使用xml文件配置动画

1 scale 标签

scale是缩放的意思，即我们可以对空间进行放大和缩小，首先先来了解一下它的各个属性，代码先上：

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

下面是对上面的一个解释：

android:fromXScale="1.0"  表示X轴开始的缩放比例， 1.0表示无变化，0.5    缩小一倍，2.0表示放大一倍

android:toXScale="1.2"  表示X轴结束的缩放比例，所以，两个结合就是X放大了1.2倍，同理，Y轴也放大1.2倍，即整个空间放大1.2倍

android:duration="700" 表示整个动画的过程持续时间，这里设置的是700ms
android:pivotX="50%"  动画起始的X轴位置，50%表示自身的中心，也是是数字，比如50，则是从距离空 间的50px开始缩放，50%p则是根据父局，一般没怎么用到             

android:pivotY="50%"  动画起始的Y轴位置，与上诉一致
android:repeatCount="1"  重复次数
android:repeatMode="restart"  重复类型 ，有两个值，restart和reverse，前者表示重放，后者表示回放

一般我们在res下新建一个anim文件夹，把我们需要的动画写成xml文件就可以调用了。

ok，直接上代码，首先是布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="alpha"/>
        <Button 
            android:id="@+id/scale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="scale"/>
        <Button 
            android:id="@+id/translate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="translate"/>
        <Button 
            android:id="@+id/rolate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="rolate"/>
         <Button 
            android:id="@+id/set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="综合"/>

    </LinearLayout>

     <Button 
            android:id="@+id/test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋转跳跃"
            android:textSize="24sp"
            android:layout_marginTop="40dp"
            android:layout_gravity="center"/>
</LinearLayout>

很简单，4个button控件表示四种动画，其中 set是组合动画，后面会讲，再加一下button用来演示。
接下来是MainActivity：

public class AtyAnimation extends Activity implements OnClickListener{
    private Button button;
    private Animation mAnimation;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.aty_animationtest);

        button = (Button)findViewById(R.id.test);
        findViewById(R.id.alpha).setOnClickListener(this);
        findViewById(R.id.scale).setOnClickListener(this);
        findViewById(R.id.translate).setOnClickListener(this);
        findViewById(R.id.rolate).setOnClickListener(this);
        findViewById(R.id.set).setOnClickListener(this);
    }
    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        switch (arg0.getId()) {
        case R.id.alpha:

            break;
        case R.id.scale:
            mAnimation =  AnimationUtils.loadAnimation(this, R.anim.scale);
            button.startAnimation(mAnimation);
            break;
        case R.id.translate:

            break;
        case R.id.rolate:

            break;
        case R.id.set:

            break;
        default:
            break;
        }
    }
}

可以看到，我们是用 mAnimation = AnimationUtils.loadAnimation(this, R.anim.scale); 加载的，效果如下：

2 alpha 透明度

透明度相对比较简单，我们只需要设置它的开始和结束的透明度即可

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:duration="700"
    android:fillBefore="true"
     >
</alpha>

android:fromAlpha="1.0" 1.0表示原状，0.0表示完全透明不可见
android:fillBefore="true"  表示动画结束之后保留动画开始的状态，还可以      设置成 fillEnabled="true"和fillAfter="true" ，前者与before一样，后者则保留动画后的状态 

3、translate 移动

老规则，先看代码

<?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="100"
    android:duration="1000"
    android:fillAfter="true"
    android:interpolator="@android:anim/bounce_interpolator"
     >
</translate>

发现与上面的相比，有多了一个标签， interpolator 是动画的插值器，即你可以在你的动画过程中添加一些特效，比如我这里就添加了一个Duang的特效，即在动画结束的时候，弹几下。当然还可以选择其他的：

• AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速
• AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速
• AnticipateInterpolator 开始的时候向后然后向前甩
• AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
• BounceInterpolator 动画结束的时候弹起
• CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线
• DecelerateInterpolator 在动画开始的地方快然后慢
• LinearInterpolator 以常量速率改变

• OvershootInterpolator 向前甩一定值后再回到原来位置

  如果你闲每次都改一下代码再试麻烦，你可以添加多几个button，直接改变就行了
  

4 rotate 旋转

代码先贴：

    <?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="180"
    android:duration="1000"
    android:pivotX="50%"
    android:pivotY="50%" 
    android:repeatCount="1"
    android:repeatMode="reverse">
</rotate>

好了，发现标签上面都学过了，相信你已经很熟练了，基本上，补间动画就这些了。

5、set 标签

上面所学的都是单个的，那怎么把它组合起来呢？这个时候我们就要用到组合标签 set 了。先看代码：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="true"
    android:interpolator="@android:anim/decelerate_interpolator"
    >
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0" >
    </alpha>
    <rotate
        android:fromDegrees="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="720" />
    <scale
        android:fromXScale="0.4"
        android:fromYScale="0.4"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.2"
        android:toYScale="1.2" >
    </scale>
   <!--  <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100"
        android:toYDelta="100" >
    </translate> -->
</set>

可以看到，我们把前三个动画组合在一起，让它从中心的位置，由透明，慢慢旋转变大到可见。本来先加平移的，发现真难看，就去掉了。效果图就不放了，下次我研究gif图，现在在上班呢

二 、使用Java 代码写动画

在上述中，我们都是通过xml去编写动画的，现在我们来用Java写成我们的动画，这里就举我们的组合动画来做一个例子，毕竟，组合动画包含了我们所有的属性了。废话不多说，直接上代码：

case R.id.set:
            //先设置set包含标签
            AnimationSet mAnimationSet = new AnimationSet(true);
            //注意，我们的动画都是float型的，所以，在写数字的时候，要加f
            Animation alphAnima = new AlphaAnimation(0.0f, 1.0f);
            Animation rotateAnim = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF,0.5f, 
                    Animation.RELATIVE_TO_SELF,0.5f);

            mAnimationSet.addAnimation(alphAnima);
            mAnimationSet.addAnimation(rotateAnim);
            mAnimationSet.setDuration(1000);//添加时间
            mAnimationSet.setInterpolator(new DecelerateInterpolator()); //添加插值器
            mAnimationSet.setFillAfter(true);
            button.startAnimation(mAnimationSet);
            break;

下一章我们讲解属性动画。因为补间动画都是 View 的动画，即你的动画只能针对于View，而且是只改变偏移而已，并没有改变属性。

这个等到下一张再讲好了，这个系列的最后我们将模仿一下新浪微博的弹出效果，先看看图：

这个很简单实现的，是时候表演真正的技术了。