Android Animation 動畫Demo

標籤：android   動畫   animation   

本文主要介紹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;@Overrideprotected 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);}@Overridepublic 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原始碼：

點擊下載源碼