Animation 動畫1

Android Animation    

Contents：

• Animations

• Tween Animations

• AnimationSet

• Interpolator

• Frame-By-Frame Animations

• LayoutAnimationsController

• AnimationListener

 

---

 Animations

1、Animations介紹

Animations是一個實現android UI界面動畫效果的API，Animations提供了一系列的動畫效果，能夠進行旋轉、縮放、淡入淡出等，這些效果能夠應用在絕大多數的控件中。 

2、Animations的分類

Animations從整體上能夠分爲兩大類：

1.Tweened Animations：該類Animations提供了旋轉、移動、伸展和淡出等效果。Alpha——淡入淡出，Scale——縮放效果，Rotate——旋轉，Translate——移動效果。

2.Frame-by-frame Animations：這一類Animations能夠建立一個Drawable序列，這些Drawable能夠按照指定的時間間歇一個一個的顯示。

 

3、Animations的使用方法（代碼中使用）

Animations extends Object implements Cloneable 

 使用TweenedAnimations的步驟：

1.建立一個AnimationSet對象（Animation子類）；

2.增長鬚要建立相應的Animation對象；

3.更加項目的需求，爲Animation對象設置相應的數據；

4.將Animatin對象添加到AnimationSet對象當中；

5.使用控件對象開始執行AnimationSet。

　　Tweened Animations的分類
　　１、Alpha：淡入淡出效果
　　２、Scale：縮放效果
　　３、Rotate：旋轉效果
　　４、Translate：移動效果

 

Animation的四個子類：
　　AlphaAnimation、TranslateAnimation、ScaleAnimation、RotateAnimation

4、具體實現

1、main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

 

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

         <Button

            android:id="@+id/rotateButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="旋轉" />

         <Button

            android:id="@+id/scaleButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="縮放" />

         <Button

            android:id="@+id/alphaButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="淡入淡出" />

         <Button

            android:id="@+id/translateButton"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="移動" />

    </LinearLayout>

     <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" >

         <ImageView

            android:id="@+id/image"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerInParent="true"

            android:src="@drawable/an" />

    </LinearLayout>

 </LinearLayout>

2、.java文件

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.view.View;

importandroid.view.View.OnClickListener;

import android.view.animation.AlphaAnimation;

import android.view.animation.Animation;

importandroid.view.animation.AnimationSet;

importandroid.view.animation.RotateAnimation;

importandroid.view.animation.ScaleAnimation;

import android.view.animation.TranslateAnimation;

importandroid.widget.Button;

importandroid.widget.ImageView;

public class Animation1Activity extends Activity {

    private Button rotateButton = null;

    private Button scaleButton = null;

    private Button alphaButton = null;

    private Button translateButton = null;

    private ImageView image = null;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

       

        rotateButton = (Button)findViewById(R.id.rotateButton);

        scaleButton = (Button)findViewById(R.id.scaleButton);

        alphaButton = (Button)findViewById(R.id.alphaButton);

        translateButton = (Button)findViewById(R.id.translateButton);

        image = (ImageView)findViewById(R.id.image);

     

        rotateButton.setOnClickListener(newRotateButtonListener());

        scaleButton.setOnClickListener(newScaleButtonListener());

        alphaButton.setOnClickListener(newAlphaButtonListener());

        translateButton.setOnClickListener(

           new TranslateButtonListener());

    }

    class AlphaButtonListener implementsOnClickListener{

       public void onClick(View v) {

           //建立一個AnimationSet對象，參數爲Boolean型，

           //true表示使用Animation的interpolator，false則是使用本身的

           AnimationSet animationSet = new AnimationSet(true);

           //建立一個AlphaAnimation對象，參數從徹底的透明度，到徹底的不透明

           AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);

           //設置動畫執行的時間

           alphaAnimation.setDuration(500);

           //將alphaAnimation對象添加到AnimationSet當中

           animationSet.addAnimation(alphaAnimation);

           //使用ImageView的startAnimation方法執行動畫

           image.startAnimation(animationSet);

       }

    }

    class RotateButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);

           //參數1：從哪一個旋轉角度開始

           //參數2：轉到什麼角度

           //後4個參數用於設置圍繞着旋轉的圓的圓心在哪裏

           //參數3：肯定x軸座標的類型，有ABSOLUT絕對座標、RELATIVE_TO_SELF相對於自身座標、RELATIVE_TO_PARENT相對於父控件的座標

           //參數4：x軸的值，0.5f代表是以自身這個控件的一半長度爲x軸

           //參數5：肯定y軸座標的類型

           //參數6：y軸的值，0.5f代表是以自身這個控件的一半長度爲x軸

           RotateAnimation rotateAnimation = new RotateAnimation(0, 360,

                  Animation.RELATIVE_TO_SELF,0.5f,

                  Animation.RELATIVE_TO_SELF,0.5f);

           rotateAnimation.setDuration(1000);

           animationSet.addAnimation(rotateAnimation);

           image.startAnimation(animationSet);

       }

    }

    class ScaleButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);

           //參數1：x軸的初始值

           //參數2：x軸收縮後的值

           //參數3：y軸的初始值

           //參數4：y軸收縮後的值

           //參數5：肯定x軸座標的類型

           //參數6：x軸的值，0.5f代表是以自身這個控件的一半長度爲x軸

           //參數7：肯定y軸座標的類型

           //參數8：y軸的值，0.5f代表是以自身這個控件的一半長度爲x軸

           ScaleAnimation scaleAnimation = new ScaleAnimation(

                  0, 0.1f,0,0.1f,

                  Animation.RELATIVE_TO_SELF,0.5f,

                  Animation.RELATIVE_TO_SELF,0.5f);

           scaleAnimation.setDuration(1000);

           animationSet.addAnimation(scaleAnimation);

           image.startAnimation(animationSet);

       }

    }

    class TranslateButtonListener implementsOnClickListener{

       public void onClick(View v) {

           AnimationSet animationSet = new AnimationSet(true);

           //參數1～2：x軸的開始位置

           //參數3～4：y軸的開始位置

           //參數5～6：x軸的結束位置

           //參數7～8：x軸的結束位置

           TranslateAnimation translateAnimation =

              new TranslateAnimation(

                  Animation.RELATIVE_TO_SELF,0f,

                  Animation.RELATIVE_TO_SELF,0.5f,

                  Animation.RELATIVE_TO_SELF,0f,

                  Animation.RELATIVE_TO_SELF,0.5f);

           translateAnimation.setDuration(1000);

           animationSet.addAnimation(translateAnimation);

           image.startAnimation(animationSet);

       }

    }

}

 

Tween Animations的通用方法

　　１、setDuration(long durationMills)
　　設置動畫持續時間（單位：毫秒）
　　２、setFillAfter(Boolean fillAfter)
　　若是fillAfter的值爲true,則動畫執行後，控件將停留在執行結束的狀態
　　３、setFillBefore(Boolean fillBefore)
　　若是fillBefore的值爲true，則動畫執行後，控件將回到動畫執行以前的狀態
　　４、setStartOffSet(long startOffSet)
　　設置動畫執行以前的等待時間
　　５、setRepeatCount(int repeatCount)
　　設置動畫重複執行的次數

 

在代碼中使用Animations能夠很方便的調試、運行，可是代碼的可重用性差，重複代碼多。一樣能夠在xml文件中配置Animations，這樣作可維護性變高了，只不過不容易進行調試。

1、在xml中使用Animations步驟

       1.在res文件夾下創建一個anim文件夾；

       2.建立xml文件，並首先加入set標籤，更改標籤以下：

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/accelerate_interpolator">

</set>

3.在該標籤當中加入rotate，alpha，scale或者translate標籤；

<alpha

        android:fromAlpha="1.0"

        android:toAlpha="0.0"

        android:startOffset="500"

        android:duration="500"/>

4.在代碼當中使用AnimationUtils當中裝載xml文件，並生成Animation對象。由於Animation是AnimationSet的子類，因此向上轉型，用Animation對象接收。

Animation animation = AnimationUtils.loadAnimation(

                  Animation1Activity.this, R.anim.alpha);

           // 啓動動畫

           image.startAnimation(animation);

2、具體實現

 一、  alpha.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/accelerate_interpolator">

    <!-- fromAlpha和toAlpha是起始透明度和結束時透明度 -->

    <alpha

        android:fromAlpha="1.0"

        android:toAlpha="0.0"

        android:startOffset="500"

        android:duration="500"/>

</set>

二、  rotate.xml

 

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/accelerate_interpolator">

    <!--

        fromDegrees:開始的角度

        toDegrees：結束的角度，+表示是正的

        pivotX：用於設置旋轉時的x軸座標

        例

           1)當值爲"50"，表示使用絕對位置定位

           2)當值爲"50%"，表示使用相對於控件自己定位

           3)當值爲"50%p"，表示使用相對於控件的父控件定位

        pivotY：用於設置旋轉時的y軸座標

      -->

    <rotate

        android:fromDegrees="0"

        android:toDegrees="+360"

        android:pivotX="50%"

        android:pivotY="50%"

        android:duration="1000"/>

</set>

三、  scale.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/accelerate_interpolator">

   <!--

       起始x軸座標

           止x軸座標

           始y軸座標

           止y軸座標

           軸的座標

           軸的座標

     -->

   <scale

       android:fromXScale="1.0"

       android:toXScale="0.0"

       android:fromYScale="1.0"

       android:toYScale="0.0"

       android:pivotX="50%"

       android:pivotY="50%"

       android:duration="1000"/>

</set>

 

四、  translate.xml

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

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/accelerate_interpolator">

    <!--

           始x軸座標

           止x軸座標

           始y軸座標

           止y軸座標

      -->

    <translate

        android:fromXDelta="0%"

        android:toXDelta="100%"

        android:fromYDelta="0%"

        android:toYDelta="100%"

        android:duration="2000"/>

</set>

 

五、  .java文件

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.view.View;

importandroid.view.View.OnClickListener;

import android.view.animation.Animation;

importandroid.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.ImageView;

 

public class Animation1Activity extends Activity {

    private Button rotateButton = null;

    private Button scaleButton = null;

    private Button alphaButton = null;

    private Button translateButton = null;

    private ImageView image = null;

 

    @Override

    public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.main);

 

       rotateButton = (Button) findViewById(R.id.rotateButton);

       scaleButton = (Button) findViewById(R.id.scaleButton);

       alphaButton = (Button) findViewById(R.id.alphaButton);

       translateButton = (Button) findViewById(R.id.translateButton);

       image = (ImageView) findViewById(R.id.image);

 

       rotateButton.setOnClickListener(newRotateButtonListener());

       scaleButton.setOnClickListener(newScaleButtonListener());

       alphaButton.setOnClickListener(newAlphaButtonListener());

       translateButton.setOnClickListener(newTranslateButtonListener());

    }

 

    class AlphaButtonListener implementsOnClickListener {

       public void onClick(View v) {

           // 使用AnimationUtils裝載動畫配置文件

           Animation animation = AnimationUtils.loadAnimation(

                  Animation1Activity.this, R.anim.alpha);

           // 啓動動畫

           image.startAnimation(animation);

       }

    }

 

    class RotateButtonListener implementsOnClickListener {

       public void onClick(View v) {

           Animation animation = AnimationUtils.loadAnimation(

                  Animation1Activity.this, R.anim.rotate);

           image.startAnimation(animation);

       }

    }

 

    class ScaleButtonListener implementsOnClickListener {

       public void onClick(View v) {

           Animation animation = AnimationUtils.loadAnimation(

                  Animation1Activity.this, R.anim.scale);

           image.startAnimation(animation);

       }

    }

 

    class TranslateButtonListener implementsOnClickListener {

       public void onClick(View v) {

           Animation animation = AnimationUtils.loadAnimation(Animation1Activity.this, R.anim.translate);

           image.startAnimation(animation);

       }

    }

}