android開發之Animations的使用（二）

標籤：animation   動畫   縮放   移動   旋轉   

android開發之Animations的使用（二）

本博文主要講述的是android開發中的animation動畫效果的使用，和上一篇博文不同的是，此次四種動畫效果，主要使用的是xml檔案實現的，提高了代碼的可重用性和可維護性.

使用的基本步驟如下：

1、首先在res檔案夾下建立一個anim檔案夾
 2、在此檔案夾中建立四種動畫效果的xml檔案(scale.xml,rotate.xml,alpha.xml,translate.xml)
 3、在代碼中直接使用AnimationUtils調用靜態方法loadAnimation載入建立一個animation對象
 4、運行animation對象

執行個體代碼如下：

package com.example.animationtest2;


import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;




public class MainActivity extends Activity {


private ImageView imageView = null;
private Button scaleButton = null;
private Button translateButton = null;
private Button rotateButton = null;
private Button alphaButton = null;



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

imageView = (ImageView)findViewById(R.id.myImage);
scaleButton = (Button)findViewById(R.id.scaleButton);
translateButton = (Button)findViewById(R.id.translateButton);
rotateButton = (Button)findViewById(R.id.rotateButton);
alphaButton = (Button)findViewById(R.id.alphaButton);

scaleButton.setOnClickListener(new setScaleListener());
translateButton.setOnClickListener(new setTranslateListener());
rotateButton.setOnClickListener(new setRotateListener());
alphaButton.setOnClickListener(new setAlphaListener());

}

//動畫縮放效果監聽器
class setScaleListener implements OnClickListener{


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);

imageView.startAnimation(animation);
}

}

//動畫移動效果監聽器
class setTranslateListener implements OnClickListener{


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);

imageView.startAnimation(animation);
}

}

//旋轉動畫效果監聽器
class setRotateListener implements OnClickListener{


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);

imageView.startAnimation(animation);
}

}


//漸入漸齣動畫效果監聽器
class setAlphaListener implements OnClickListener{


@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);

imageView.startAnimation(animation);
}

}





@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}


}

主布局檔案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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


    <TextView
        android:id="@+id/myText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />
    
    <LinearLayout 
        android:id="@+id/imgLayout"
        android:layout_below="@id/myText"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="55dp"
        >
        <ImageView
        android:id="@+id/myImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        />
    </LinearLayout>
    
    
    <Button 
        android:id="@+id/scaleButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgLayout"
        android:text="@string/scale"
        />
    
    <Button 
        android:id="@+id/translateButton"
        android:layout_below="@id/scaleButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/translate"
        />
    
    <Button 
        android:id="@+id/rotateButton"
        android:layout_below="@id/translateButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/rotate"
        />
    
    <Button 
        android:id="@+id/alphaButton"
        android:layout_below="@id/rotateButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/alpha"
        />


</RelativeLayout>

四種動畫效果的xml檔案分別如下：

scale.xml:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="true" xmlns:android="http://schemas.android.com/apk/res/android">
    <scale 
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="2000"
        />
<!-- 50%p  表示 相對父控制項的中間位置 -->
   <!-- 50%   表示相對自身的中間位置 -->
   <!-- 50   表示絕對位置 -->
</set>

rotate.xml:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="true" xmlns:android="http://schemas.android.com/apk/res/android">
<rotate 
   android:fromDegrees="0"
   android:toDegrees="-360"
   android:pivotX="50%"
   android:pivotY="50%"
   android:duration="2000"
   />   
   <!-- 50%p  表示 相對父控制項的中間位置 -->
   <!-- 50%   表示相對自身的中間位置 -->
   <!-- 50   表示絕對位置 -->
   <!-- 360 表示順時針  -360表示逆時針旋轉 --> 
</set>

alpha.xml:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="true" xmlns:android="http://schemas.android.com/apk/res/android">  <!-- set相當於AnimationSet對象 -->    
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.1"
        android:duration="2000"
        />
</set>

translate.xml:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="true" xmlns:android="http://schemas.android.com/apk/res/android">
    <translate 
        android:fromXDelta="0%"
        android:toXDelta="50%"
        android:fromYDelta="0%"
        android:toYDelta="100%"
        android:duration="2000"
        />
    
      <!-- 50%p  表示 相對父控制項的中間位置 -->
   <!-- 50%   表示相對自身的中間位置 -->
   <!-- 50   表示絕對位置 -->

</set>

實現效果如下：

按下相關按鈕查看相關效果

android開發之Animations的使用（二）