首页 > 代码库 > Android Animation 动画Demo

Android Animation 动画Demo

本文主要介绍Android中的Animation动画。

Android提供了2中动画:Tween动画和Frame动画。

本文中主要讲解Tween动画,下篇文章中会讲到Frame动画。

Tween动画:

通过对View的内容进行一系列的图形变换(包括平移,缩放,旋转,改变透明度)来实现动画的效果,动画效果的定义可以采用XML方式也可以采用编码来做Tween动画(文章最后会给出两种方式动画的源代码Demo)。

动画的类型

Xml定义动画使用的配置节点

编码定义动画使用的类

渐变透明度动画效果(简称透明动画)

<alpha/>

AlphaAnimation

渐变尺寸缩放动画效果(缩放动画)

<scale/>

ScaleAnimation

画面位置移动动画效果(移位动画)

<translate/>

TranslateAnimation

画面旋转动画效果(旋转动画)

<rotate/>

RotateAnimation


实现效果图:

源代码:

:

布局文件activity_main:

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="15dp"
        android:text="使用XML文件来实现动画"
        android:textColor="@android:color/holo_orange_dark"
        android:textSize="20dp" />
    <!-- 运用各个Button,实现其动画效果 -->

    <Button
        android:id="@+id/button_alphaAnim"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="透明动画AlphaAnimation" />

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

    <Button
        android:id="@+id/button_translateAnim"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="移位动画TranslateAnimation" />

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


    <Button
        android:id="@+id/button_setAnim1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="透明动画+移位动画" />

    <Button
        android:id="@+id/button_setAnim2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转动画+缩放动画" />

</LinearLayout>

anim文件夹下的动画布局:

相应的动画属性并没有详细标示,读者可自行研究,争取达到随心所欲修改动画效果的目的。

透明动画aa.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<!-- 透明动画xml文件 -->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromAlpha="0"
    android:toAlpha="1" >

</alpha>

旋转动画ra.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- 旋转动画xml文件 -->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

</rotate>

缩放动画sa.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- 缩放动画xml文件 -->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fromXScale="0"
    android:fromYScale="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="1"
    android:toYScale="1" >

</scale>

移位动画ta.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- 移位动画xml文件 -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="100%"
    android:fromYDelta="100%"
    android:toXDelta="0%"
    android:toYDelta="0%" 
    android:duration="2000">

</translate>

透明动画+移位动画的xml文件,set1.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- 透明动画+移位动画的xml文件 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:shareInterpolator="true" >

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1" />

    <translate
        android:fromXDelta="100%"
        android:fromYDelta="100%"
        android:toXDelta="0%"
        android:toYDelta="0%" />

</set>

旋转动画+缩放动画的xml文件,set2.xml:

<?xml version="1.0" encoding="utf-8"?>
<!-- 旋转动画+缩放动画的xml文件 -->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:shareInterpolator="true" >

    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />

</set>

MainActivity代码:

package com.myanimationdemo2;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import com.myanimationdemo2.R.anim;

public class MainActivity extends Activity implements OnClickListener {
	private Button button_alphaAnim, button_rotateAnim, button_translateAnim,
			button_scaleAnim, button_setAnim1, button_setAnim2;

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

		button_alphaAnim = (Button) findViewById(R.id.button_alphaAnim);
		button_rotateAnim = (Button) findViewById(R.id.button_rotateAnim);
		button_translateAnim = (Button) findViewById(R.id.button_translateAnim);
		button_scaleAnim = (Button) findViewById(R.id.button_scaleAnim);
		button_setAnim1 = (Button) findViewById(R.id.button_setAnim1);
		button_setAnim2 = (Button) findViewById(R.id.button_setAnim2);

		button_alphaAnim.setOnClickListener(this);
		button_rotateAnim.setOnClickListener(this);
		button_translateAnim.setOnClickListener(this);
		button_scaleAnim.setOnClickListener(this);
		button_setAnim1.setOnClickListener(this);
		button_setAnim2.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		/**
		 * 透明动画
		 */
		case R.id.button_alphaAnim:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.aa));
			break;
		/**
		 * 旋转动画
		 */
		case R.id.button_rotateAnim:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.ra));
			break;
		/**
		 * 移位动画
		 */
		case R.id.button_translateAnim:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.ta));
			break;
		/**
		 * 缩放动画
		 */
		case R.id.button_scaleAnim:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.sa));
			break;
		/**
		 * 透明动画+移位动画
		 */
		case R.id.button_setAnim1:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.set1));
			break;
		/**
		 * 旋转动画+缩放动画
		 */
		case R.id.button_setAnim2:
			v.startAnimation(AnimationUtils.loadAnimation(
					getApplicationContext(), anim.set2));
			break;

		default:
			break;
		}
	}

}

以上为Tween动画中,以xml形式给出的动画Demo代码,对直接在代码中实现动画Demo并没有做详细介绍。

下面给出两者的源代码Demo:

以xml形式的动画Demo源代码:

点击下载源码

直接在代码中编写的Demo源代码:

点击下载源码