【安卓学习笔记】安卓动画的实现(1)——补间动画(Tween)

安卓动画分类

动画分类

安卓动画分为图中所示4大类。
所谓帧动画，即准备很多图片，让图片按一定时间连续播放，从而达到模拟动画效果。而补间动画则是对单个帧进行渐变操作。通俗的理解，它可以对单张图片进行5种操作：透明度、位移、旋转、缩放以及上面四种操作的组合操作。这比帧动画要节省资源。
本节介绍补间动画。先看效果。

效果

补间动画有两种实现方式——资源文件中配置动画效果、java代码实现。
资源文件中配置适用于固定动画，java代码实现比较灵活。

步骤

资源文件中实现：

res/anim文件夹中创建动画配置文件
activity中，AnimationUtils.loadAnimation加载该配置文件
startAnimation开启动画

java代码中实现：

使用new alphaAnimation/RotateAnimation/TranslateAnimation /ScaleAnimation ，创建一个animation对象
再使用该对象的setDuration、setInterpolator等方法设置动画效果
startAnimation开启动画

源码

1、activity的布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"          
    tools:context=".MainActivity">

    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="alpha动画"
        android:id="@+id/btn_alpha"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="scale动画"
        android:id="@+id/btn_scale"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="translate动画"
        android:id="@+id/btn_translate"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="rotate动画"
        android:id="@+id/btn_rotate"
        android:onClick="click"/>
    <Button 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="set动画(上面动画的组合)"
        android:id="@+id/btn_set"
        android:onClick="click"/>

    <ImageView
        android:id="@+id/image"        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_marginTop="30dip"
        android:layout_gravity="center_horizontal"/>
   
</LinearLayout>

2、MainActivity

public class MainActivity extends Activity {

    private Button btn_scale, btn_rotate, btn_translate, btn_alpha, btn_set;
    private ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        bindViews();

    }

    private void bindViews() {
        btn_alpha = (Button) findViewById(R.id.btn_alpha);
        btn_rotate = (Button) findViewById(R.id.btn_rotate);
        btn_scale = (Button) findViewById(R.id.btn_scale);
        btn_translate = (Button) findViewById(R.id.btn_translate);
        btn_set = (Button) findViewById(R.id.btn_set);
        image = (ImageView) findViewById(R.id.image);
    }

    public void click(View view) {

        switch (view.getId()) {

        case R.id.btn_alpha:
            /** 资源文件中实现方式 **/
            /*
             * Animation alpha = AnimationUtils.loadAnimation(this,
             * R.anim.anim_alpha); image.startAnimation(alpha);
             */

            /** java代码中实现方式 **/
            Animation alpha = new AlphaAnimation(0.1f, 1);
            alpha.setDuration(2000);
            image.startAnimation(alpha);

            break;
        case R.id.btn_rotate:
            /** 资源文件中实现方式 **/
            /*
             * Animation rotate = AnimationUtils.loadAnimation(this,
             * R.anim.anim_rotate); image.startAnimation(rotate);
             */

            /** java代码中实现方式 **/
            Animation rotate = new RotateAnimation(0, 360);
            rotate.setDuration(2000);
            image.startAnimation(rotate);
            break;
        case R.id.btn_scale:
            /** 资源文件中实现方式 **/
            /*
             * Animation scale = AnimationUtils.loadAnimation(this,
             * R.anim.anim_scale); image.startAnimation(scale);
             */

            /** java代码中实现方式 **/
            Animation scale = new ScaleAnimation(0, 1, 0, 1);
            scale.setDuration(2000);
            image.startAnimation(scale);

            break;
        case R.id.btn_translate:
            /** 资源文件中实现方式 **/
            /*
             * Animation translate = AnimationUtils.loadAnimation(this,
             * R.anim.anim_translate); image.startAnimation(translate);
             */

            /** java代码中实现方式 **/
            Animation translate = new TranslateAnimation(0, 100, 0, 0);
            translate.setDuration(2000);
            image.startAnimation(translate);

            break;
        case R.id.btn_set:
            Animation set = AnimationUtils.loadAnimation(this, R.anim.anim_set);
            image.startAnimation(set);

            break;

        }

    }

}

3、res/anim资源文件中动画配置文件

anim_alpha.xml

android:interpolator为插值器，可设置动画的速度效果。如这里的@android:anim/accelerate_decelerate_interpolator表示先加速后减速。fromAlpha开始时透明度为1.0，即不透明。

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

anim_scale.xml

fromXScale开始时x轴缩放尺寸，toXScale结束时缩放尺寸。这里从1.0到0.0表示x轴方向图片由100%比例缩小到0。pivotX表示缩放中心点，50%表示以图形中心为缩放中心点。duration动画时间，单位毫秒。

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale 
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000"/>
</set>

anim_rotate.xml

<?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:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>

anim_translate.xml

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

</set>

anim_set.xml

组合动画，只需在set标签中，把上述4中或任意的多种放进去即可。

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

</set>