Android動畫之Tween動畫實戰

    Android動畫分為Tween動畫和Frame動畫，上一節通過一個執行個體介紹了Frame動畫，本節將介紹Tween動畫。Tween可以把對象進行縮小、放大、旋轉和漸層等操作。    Tween動畫有四個主要的實現，下面分別說明下：1、AlphaAnimation：漸層動畫，主要控制透明度變化動畫類，常使用AlphaAnimation(float fromAlpha, float toAlpha)來構造；    fromAlpha：動畫開始時的透明度（取值範圍為0.0到1.0）；    toAlpha：動畫結束時的透明度；2、ScaleAnimation：主要控制尺度變化的動畫類，常使用ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)來構造；    fromX：動畫開始X座標上的伸縮尺度；    toX：動畫結束X座標上的伸縮尺度；    fromY：動畫開始Y座標上的伸縮尺度；    toY：動畫結束Y座標上的伸縮尺度；    pivotXType：X座標上的伸縮模式，取值有：Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT；    pivotXValue：X座標上的伸縮值；    pivotYType：Y座標上的伸縮模式，取值有：Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT；    pivotYValue：Y座標上的伸縮值；3、TranslateAnimation：主要控制位置變換的動畫實作類別，常使用TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)來構造；    fromXDelta：動畫開始的X座標；    toXDelta：動畫結束的X座標；    fromYDelta：動畫開始的Y座標；    toYDelta：動畫結束的Y座標；4、RotateAnimation：主要控制旋轉的動畫實作類別，常使用RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)來構造；    fromDegrees：旋轉開始角度；    toDegrees：旋轉結束角度；    pivotXType, pivotXValue, pivotYType, pivotYValue與尺度變化動畫ScaleAnimation類似；     下面以一個執行個體來進行這些動畫。    1、加入將要進行動畫變化的MM圖片（為了避免侵犯他人肖像權，這次的MM和上次的案頭背景不一樣，這個MM沒有頭像的）：    2、建立Layout布局XML配置tween.xml檔案： 

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:apk="http://schemas.android.com/apk/res/android" apk:orientation="vertical" apk:layout_width="fill_parent" apk:layout_height="fill_parent">
<!-- 動畫MM -->
<ImageView apk:id="@+id/TweenMM" apk:src="@drawable/tween" apk:layout_width="wrap_content" apk:layout_height="wrap_content"/>

<!-- 動畫控制按鈕 -->
<LinearLayout apk:layout_weight="1" apk:orientation="horizontal" apk:layout_width="fill_parent" apk:layout_height="wrap_content">
<Button apk:text="ScaleAnim" apk:layout_weight="1" apk:layout_width="fill_parent" apk:layout_height="wrap_content" apk:onClick="onBtnScaleAnimClick"/>
<Button apk:text="AlphaAnim" apk:layout_weight="1" apk:layout_width="fill_parent" apk:layout_height="wrap_content" apk:onClick="onBtnAlphaAnimClick"/>
</LinearLayout>
<LinearLayout apk:layout_weight="1" apk:orientation="horizontal" apk:layout_width="fill_parent" apk:layout_height="wrap_content">
<Button apk:text="TranslateAnim" apk:layout_weight="1" apk:layout_width="wrap_content" apk:layout_height="wrap_content" apk:onClick="onBtnTranslateAnimClick"/>
<Button apk:text="RotateAnim" apk:layout_weight="1" apk:layout_width="wrap_content" apk:layout_height="wrap_content" apk:onClick="onBtnRotateAnimClick"/>
</LinearLayout>
</LinearLayout>

    一張圖片和4個按鈕，這4個按鈕就是控製圖片動畫的。3、對於每個動畫，我們都以一個XML設定檔來設定各自動畫的屬性。    AlphaAnimation（tween_alpha.xml）的設定檔內容：

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="5000" />
</set>

    android:duration指示該動畫持續的時間，以毫秒為單位。    RotateAnimation（tween_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:pivotX="50%" android:pivotY="50%" android:duration="5000" />
</set>

    ScaleAnimation（tween_scale.xml）的設定檔內容：

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:duration="5000" />
</set>

    TranslateAnimation（tween_translate.xml）的設定檔內容：

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

4、Activity介面類：

/** * Copyright (c) 2004-2011 All Rights Reserved. */package com.aboy.android.study.animation;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.ImageView;import com.aboy.android.study.R;/** * 通過XML設定檔的方式實現Tween動畫 * * @author obullxl@gmail.com * @version $Id: TweenXMLActivity.java, v 0.1 2011-6-11 下午01:36:39 oldbulla Exp $ */public class TweenXMLActivity extends Activity {    public static final String TAG = "TweenActivity";    // 動畫圖片    private ImageView          tweenMM;    /**      * @see android.app.Activity#onCreate(android.os.Bundle)     */    public void onCreate(Bundle cycle) {        super.onCreate(cycle);        super.setContentView(R.layout.tween);        // 取得動畫圖片        this.tweenMM = (ImageView) super.findViewById(R.id.TweenMM);    }    /**     * 按鈕：尺寸變化動畫     */    public void onBtnScaleAnimClick(View view) {        // 動畫開始        this.doStartAnimation(R.anim.tween_scale);    }    /**     * 按鈕：漸層動畫     */    public void onBtnAlphaAnimClick(View view) {        // 動畫開始        this.doStartAnimation(R.anim.tween_alpha);    }    /**     * 按鈕：位置變化動畫     */    public void onBtnTranslateAnimClick(View view) {        // 動畫開始        this.doStartAnimation(R.anim.tween_translate);    }    /**     * 按鈕：旋轉動畫     */    public void onBtnRotateAnimClick(View view) {        // 動畫開始        this.doStartAnimation(R.anim.tween_rotate);    }    /**     * 開始動畫     */    private void doStartAnimation(int animId) {        // 載入動畫        Animation animation = AnimationUtils.loadAnimation(this, animId);        // 動畫開始        this.tweenMM.startAnimation(animation);    }}

    使用AnimationUtils類，可以非常方便的構造動畫類；    開始動畫，只要ImageView.startAnimation即可。