android animation的簡單使用

 今天學習了animation的部分內容。包括了四種動畫效果,分別是AlphaAnimation(透明度漸變),scaleAnimation(大小漸變),translateAnimation(位置漸變),rotateAnimation(旋轉動畫)。animation定義有兩種方法,一種是在XML文件中定義,另一種是在java代碼中定義。通過點擊按鈕實現各種animation效果。


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"
     >
     <LinearLayout android:id="@+id/id_linear1"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         >
	<Button android:id="@+id/btn1"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="AlphaAnimation"
	    />
	<Button android:id="@+id/btn2"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="ScaleAnimation"
	    
	    />
	</LinearLayout>
	 <LinearLayout android:id="@+id/id_linear2"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_below="@id/id_linear1"
         >
	<Button android:id="@+id/btn3"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="TranslateAnimation"
	    />
	<Button android:id="@+id/btn4"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:text="RotateAnimation"
	    
	    />
	</LinearLayout>
   <ImageView android:id="@+id/id_image"
       android:layout_width="150dp"
       android:layout_height="200dp"
       android:src="@drawable/image7"
       android:layout_below="@id/id_linear2"
       android:layout_centerHorizontal="true"/>
   <Button android:id="@+id/btn5"
       android:layout_below="@+id/id_image"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerHorizontal="true"
       android:text="共同作用"/>
</RelativeLayout>


一.XML中定義animation

        首先在res文件夾下建一個名anim的文件夾(文件夾的名字一定要是anim)

1.AlphaAnimation

    我在anim下建一個名爲alpha_anima.xml的文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" >
        <!-- 透明度控制動畫效果 alpha
        浮點型值:
            fromAlpha 屬性爲動畫起始時透明度
            toAlpha   屬性爲動畫結束時透明度
            說明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之間的float數據類型的數字
        
        長整型值:
            duration  屬性爲動畫持續時間
            說明:     
                時間以毫秒爲單位
-->
    </alpha>
	 
</set>
2.ScaleAnimation

 我在anim下建一個名爲scale_animation.xml的文件

<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale  
          android:interpolator=
                     "@android:anim/decelerate_interpolator"
          android:fromXScale="0.0"
          android:toXScale="1.0"
          android:fromYScale="0.0"
          android:toYScale="1.0"
          android:pivotX="50%"
          android:pivotY="50%"
          android:fillAfter="false"
          android:duration="3000" />
    
    <!-- 尺寸伸縮動畫效果 scale
       屬性:interpolator 指定一個動畫的插入器
        在我試驗過程中,使用android.res.anim中的資源時候發現
        有三種動畫插入器:
            accelerate_decelerate_interpolator  加速-減速 動畫插入器
            accelerate_interpolator        加速-動畫插入器
            decelerate_interpolator        減速- 動畫插入器
        其他的屬於特定的動畫效果
      浮點型值:
         
            fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸    
            toXScale   屬性爲動畫結束時 X座標上的伸縮尺寸     
        
            fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸    
            toYScale   屬性爲動畫結束時Y座標上的伸縮尺寸    
        
            說明:
                 以上四種屬性值    
    
                    0.0表示收縮到沒有 
                    1.0表示正常無伸縮     
                    值小於1.0表示收縮  
                    值大於1.0表示放大
        
            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
        
            說明:
                    以上兩個屬性值 從0%-100%中取值
                    50%爲物件的X或Y方向座標上的中點位置
        
        長整型值:
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位


        布爾型值:
            fillAfter 屬性 當設置爲true ,該動畫轉化在動畫結束後被應用
-->


</set>

3.TranslateAnimation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="300"
        android:toYDelta="400" />
    <!--
     translate 位置轉移動畫效果
        整型值:
            fromXDelta 屬性爲動畫起始時 X座標上的位置    
            toXDelta   屬性爲動畫結束時 X座標上的位置
            fromYDelta 屬性爲動畫起始時 Y座標上的位置
            toYDelta   屬性爲動畫結束時 Y座標上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時候,
                     默認是以自己爲相對參照物             
        長整型值:
            duration  屬性爲動畫持續時間
            說明:   時間以毫秒爲單位

    -->

</set>

4.RotateAnimation

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" />
    <!--
     rotate 旋轉動畫效果
       屬性:interpolator 指定一個動畫的插入器
             在我試驗過程中,使用android.res.anim中的資源時候發現
             有三種動畫插入器:
                accelerate_decelerate_interpolator   加速-減速 動畫插入器
                accelerate_interpolator               加速-動畫插入器
                decelerate_interpolator               減速- 動畫插入器
             其他的屬於特定的動畫效果
                           
       浮點數型值:
            fromDegrees 屬性爲動畫起始時物件的角度    
            toDegrees   屬性爲動畫結束時物件旋轉的角度 可以大於360度   

        
            說明:
                     當角度爲負數——表示逆時針旋轉
                     當角度爲正數——表示順時針旋轉              
                     (負數from——to正數:順時針旋轉)   
                     (負數from——to負數:逆時針旋轉) 
                     (正數from——to正數:順時針旋轉) 
                     (正數from——to負數:逆時針旋轉)       

            pivotX     屬性爲動畫相對於物件的X座標的開始位置
            pivotY     屬性爲動畫相對於物件的Y座標的開始位置
                
            說明:        以上兩個屬性值 從0%-100%中取值
                         50%爲物件的X或Y方向座標上的中點位置

        長整型值:
            duration  屬性爲動畫持續時間
            說明:       時間以毫秒爲單位


    -->

</set>

5.多種animation共同作用

我建了一個commom_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="3000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+720" />
    
    <translate
        android:duration="3000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="300"
        android:toYDelta="400" />
	
    <scale  
          android:interpolator=
                     "@android:anim/decelerate_interpolator"
          android:fromXScale="0.0"
          android:toXScale="1.0"
          android:fromYScale="0.0"
          android:toYScale="1.0"
          android:pivotX="50%"
          android:pivotY="50%"
          android:fillAfter="false"
          android:duration="3000" />
</set>

XML文件全部完成

下面是MainActivity中的代碼,我爲了省事就不把純java代碼的animation和採用xml的在分開寫了,有簡單的註釋,一看就明白

package com.lql.animation;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity implements OnClickListener {

	private Button btn1, btn2, btn3, btn4, btn5;
	private ImageView imageView;
	private Animation animation, animation2;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		btn1 = (Button) findViewById(R.id.btn1);
		btn2 = (Button) findViewById(R.id.btn2);
		btn3 = (Button) findViewById(R.id.btn3);
		btn4 = (Button) findViewById(R.id.btn4);
		btn5 = (Button) findViewById(R.id.btn5);
		imageView = (ImageView) findViewById(R.id.id_image);
		btn1.setOnClickListener(this);
		btn2.setOnClickListener(this);
		btn3.setOnClickListener(this);
		btn4.setOnClickListener(this);
		btn5.setOnClickListener(this);
	}

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.btn1:
			// XML中定義
			// animation = AnimationUtils.loadAnimation(this,
			// R.anim.alpha_anima);//得到xml文件中定義的動畫
			// imageView.startAnimation(animation);

			// 採用純java代碼定義
			animation = new AlphaAnimation(0.0f, 1.0f);
			animation.setDuration(3000);
			imageView.setAnimation(animation);// 開啓動畫
			animation.setAnimationListener(new Animation.AnimationListener() {

				@Override
				public void onAnimationStart(Animation animation) {
					// TODO Auto-generated method stub

				}

				@Override
				public void onAnimationRepeat(Animation animation) {
					// TODO Auto-generated method stub

				}

				@Override
				public void onAnimationEnd(Animation animation) {
					// TODO Auto-generated method stub
					Toast.makeText(MainActivity.this, "動畫執行完畢",
							Toast.LENGTH_SHORT).show();
				}
			});
			break;
		case R.id.btn2:
			// XML定義
			// animation = AnimationUtils.loadAnimation(this,
			// R.anim.scale_animation);

			animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
					Animation.RELATIVE_TO_SELF, 0.5f,
					Animation.RELATIVE_TO_SELF, 0.5f);
			animation.setDuration(3000);
			imageView.startAnimation(animation);
			break;
		case R.id.btn3:
			// animation = AnimationUtils.loadAnimation(this,
			// R.anim.translate_anim);

			animation = new TranslateAnimation(30.0f, 300.0f, 40.0f, 400.0f);
			animation.setDuration(3000);
			
			imageView.startAnimation(animation);
			break;
		case R.id.btn4:
			animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
			animation.setStartOffset(1000);//等待1000毫秒纔開始執行動畫
			animation.setFillAfter(true);//動畫執行完畢後保持,執行後的狀態
			imageView.startAnimation(animation);
			break;
		case R.id.btn5:
			// animation = AnimationUtils.loadAnimation(this,
			// R.anim.common_anim);
			AnimationSet animationSet = new AnimationSet(true);// 動畫集
			animation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
					Animation.RELATIVE_TO_SELF, 0.5f,
					Animation.RELATIVE_TO_SELF, 0.5f);
			animation2 = new TranslateAnimation(30.0f, 300.0f, 40.0f, 400.0f);
			animation.setDuration(3000);
			animation2.setDuration(3000);
			animationSet.addAnimation(animation);// 將animation添加到動畫集中
			animationSet.addAnimation(animation2);// 將animation2添加到動畫集中
			imageView.startAnimation(animationSet);
			
			break;
		}
	}
}



發佈了41 篇原創文章 · 獲贊 9 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章