Android中的动画

一、Android中动画分类

Android中的动画大致分为两类：Frame动画，View动画。

二、Frame动画

1、frame_list.xml 帧动画的具体实现，需要有帧动画使用的对应资源。

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item
        android:drawable="@drawable/a"
        android:duration="1000" />   //单张图片设置时间相对较长，便于看清所有效果
    <item
        android:drawable="@drawable/b"
        android:duration="2000" />
    <item
        android:drawable="@drawable/c"
        android:duration="2000" />
    <item
        android:drawable="@drawable/d"
        android:duration="2000" />
    <item
        android:drawable="@drawable/e"
        android:duration="2000" />
    <item
        android:drawable="@drawable/f"
        android:duration="2000" />

</animation-list>

2、帧动画实现的主体布局 activity_frame.xml

<?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">

    <ImageView
        android:id="@+id/frame_iv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@anim/frame_list" />

</LinearLayout>

3、帧动画的具体实现

public class FrameActivity  extends Activity{
    private ImageView frameIv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame);

        frameIv = (ImageView) findViewById(R.id.frame_iv);
        AnimationDrawable ad = (AnimationDrawable) frameIv.getBackground();
        ad.start();
    }
}

三、View动画

View动画有两种实现模式，xml布局文件或者java代码实现。

1、xml布局实现

alpha_anim.xml  渐变动画

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillBefore="true"
    android:fillEnabled="true"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/cycle_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toAlpha="0.2">
    <!--渐变动画-->
    <!--fillBefore 动画结束时留在第一帧   fillEnabled 配合使用  android:repeatCount="infinite" 无限次循环-->
</alpha>

rotate_anim.xml 旋转动画

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromDegrees="0"
    android:toDegrees="360">
</rotate>

scale_anim.xml 缩放动画

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="50%"
    android:fromYScale="300%"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="20%"
    android:pivotY="80%"
    android:repeatCount="2"
    android:repeatMode="restart"
    android:startOffset="1000"
    android:toXScale="150%"
    android:toYScale="50%">
    <!--缩放动画-->
    <!--interpolator 变速器，动画执行的速率变化   pivotX x轴缩放中心   startOffset 触发事件后延迟毫秒 -->
    <!--repeatMode 重复方式：重头开始-->
</scale>

trans_anim.xml 平移动画

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillAfter="true"
    android:fromXDelta="0"
    android:fromYDelta="200"
    android:repeatCount="3"
    android:repeatMode="reverse"
    android:toXDelta="100"
    android:toYDelta="0">
    <!--平移动画-->
    <!--duration 动画执行时长 fillAfter 保持最后一帧效果 repeatCount 重复次数 repeatMode 重复方式   -->
    <!--fromXDelta x轴开始位置 toXDelta x轴到达位置变化多少 fromYDelta y轴开始位置 toYDelta y轴到达位置变化多少     -->
</translate>

set_anim.xml 动画合集

<?xml version="1.0" encoding="utf-8"?> <strong><span style="color:#ff0000;"> //不能使用include包含</span></strong>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:repeatCount="infinite"
    android:repeatMode="restart">
    <translate
        android:duration="400"
        android:fromXDelta="500"
        android:toXDelta="100" />

    <alpha
        android:duration="300"
        android:fromAlpha="1.0"
        android:toAlpha="0" />

    <scale
        android:duration="300"
        android:fromYScale="2.0"
        android:toYScale="0.5" />

</set>

MainActivity实现

public class MainActivity extends ActionBarActivity implements View.OnClickListener {
    /**
     * 触发事件触发点
     */
    private Button transAnimBt;
    private Button scaleAnimBt;
    private Button alphaAnimBt;
    private Button setAnimBt;
    private Button rotateAnimBt;
    private Button changeActivityBt;

    /**
     * 执行动画
     */
    private TranslateAnimation ta;
    private ScaleAnimation sa;
    private AlphaAnimation aa;
    private AnimationSet as;
    private RotateAnimation ra;

    private ImageView ivSource;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();

        initData();
    }


    /**
     * 初始化布局
     */
    private void initView() {
        transAnimBt = (Button) findViewById(R.id.bt_animation_trans);
        scaleAnimBt = (Button) findViewById(R.id.bt_animation_scale);
        alphaAnimBt = (Button) findViewById(R.id.bt_animation_alpha);
        rotateAnimBt = (Button) findViewById(R.id.bt_animation_rotate);
        setAnimBt = (Button) findViewById(R.id.bt_animation_set);
        changeActivityBt = (Button) findViewById(R.id.bt_animation_change);

        ivSource = (ImageView) findViewById(R.id.iv_animation);

        initSetOnClickListener();
    }


    /**
     * 初始化数据
     */
    private void initData() {

        ta = (TranslateAnimation) AnimationUtils.loadAnimation(this, R.anim.trans_anim);
        sa = (ScaleAnimation) AnimationUtils.loadAnimation(this, R.anim.scale_anim);
        aa = (AlphaAnimation) AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
        as = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.set_anim);
        ra = (RotateAnimation) AnimationUtils.loadAnimation(this, R.anim.rotate_anim);

        ivSource.setBackgroundResource(R.drawable.a);
    }

    /**
     * 初始化点击监听事件
     */
    private void initSetOnClickListener() {
        transAnimBt.setOnClickListener(this);
        scaleAnimBt.setOnClickListener(this);
        alphaAnimBt.setOnClickListener(this);
        rotateAnimBt.setOnClickListener(this);
        setAnimBt.setOnClickListener(this);
        changeActivityBt.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_animation_alpha:
                ivSource.startAnimation(aa);
                break;
            case R.id.bt_animation_trans:
                ivSource.startAnimation(ta);
                break;
            case R.id.bt_animation_scale:
                ivSource.startAnimation(sa);
                break;
            case R.id.bt_animation_set:
                ivSource.startAnimation(as);
                break;
            case R.id.bt_animation_rotate:
                ivSource.startAnimation(ra);
                break;
            case R.id.bt_animation_change:
                startActivity(new Intent(MainActivity.this, JavaAnimation.class));
                break;
        }
    }
}

主体布局  activity_main.xml

<RelativeLayout 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/animation_bt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_animation_trans"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="平移动画" />

        <Button
            android:id="@+id/bt_animation_rotate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="旋转动画" />

        <Button
            android:id="@+id/bt_animation_scale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缩放动画" />

        <Button
            android:id="@+id/bt_animation_alpha"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="渐变动画" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/bt_booss"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/animation_bt"
        android:gravity="center_horizontal">

        <Button
            android:id="@+id/bt_animation_set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="动画合集" />

        <Button
            android:id="@+id/bt_animation_change"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="跳转页面" />

    </LinearLayout>

    <ImageView
        android:id="@+id/iv_animation"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/bt_booss" />
</RelativeLayout>

也可只适用代码的形式实现对应动画，主布局依旧使用activity_main.xml，类的具体实现：

public class JavaAnimation extends Activity implements View.OnClickListener {
    /**
     * 触发事件触发点
     */
    private Button transAnimBt;
    private Button scaleAnimBt;
    private Button alphaAnimBt;
    private Button setAnimBt;
    private Button rotateAnimBt;
    private Button changeActivityBt;
    private ImageView ivSource;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    /**
     * 初始化布局
     */
    private void initView() {
        transAnimBt = (Button) findViewById(R.id.bt_animation_trans);
        scaleAnimBt = (Button) findViewById(R.id.bt_animation_scale);
        alphaAnimBt = (Button) findViewById(R.id.bt_animation_alpha);
        rotateAnimBt = (Button) findViewById(R.id.bt_animation_rotate);
        setAnimBt = (Button) findViewById(R.id.bt_animation_set);
        changeActivityBt = (Button) findViewById(R.id.bt_animation_change);

        ivSource = (ImageView) findViewById(R.id.iv_animation);
        ivSource.setBackgroundResource(R.drawable.e);

        initSetOnClickListener();
    }

    /**
     * 初始化点击监听事件
     */
    private void initSetOnClickListener() {
        transAnimBt.setOnClickListener(this);
        scaleAnimBt.setOnClickListener(this);
        alphaAnimBt.setOnClickListener(this);
        rotateAnimBt.setOnClickListener(this);
        setAnimBt.setOnClickListener(this);
        changeActivityBt.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bt_animation_alpha://渐变动画
                AlphaAnimation aa = new AlphaAnimation(0.5f, 2.0f);
                aa.setDuration(500);
                aa.setRepeatMode(Animation.RESTART);
                aa.setFillAfter(true);
                ivSource.startAnimation(aa);
                break;
            case R.id.bt_animation_trans://平移动画
                TranslateAnimation ta = new TranslateAnimation(Animation.ABSOLUTE, 100, Animation.RELATIVE_TO_SELF, 1.5f);
                ta.setDuration(500);
                ta.setRepeatCount(2);
                ta.setRepeatMode(Animation.INFINITE);
                ivSource.startAnimation(ta);
                break;
            case R.id.bt_animation_scale:
                ScaleAnimation sa = new ScaleAnimation(2.0f, 0.3f, 4.0f, 0.5f);
                sa.setDuration(500);
                sa.setFillBefore(true);
                ivSource.startAnimation(sa);
                break;
            case R.id.bt_animation_set:
                AnimationSet as = new AnimationSet(true);

                ScaleAnimation saTemp = new ScaleAnimation(0.2f, 1.0f, 3.0f, 1.0f);
                as.addAnimation(saTemp);

                AlphaAnimation aaTemp = new AlphaAnimation(1.0f, 0.3f);
                as.addAnimation(aaTemp);
                ivSource.startAnimation(as);
                break;
            case R.id.bt_animation_rotate:
                RotateAnimation ra = new RotateAnimation(0, 360);
                ra.setDuration(1000);
                ivSource.startAnimation(ra);
                break;
            case R.id.bt_animation_change:
                startActivity(new Intent(JavaAnimation.this, FrameActivity.class));
                break;
        }
    }
}

Demo下载链接