android動畫

動畫類型

Androidanimation由四種類型組成 

XML

alpha 漸變透明度動畫效果
scale 漸變尺寸伸縮動畫效果
translate 畫面轉換位置移動動畫效果
rotate 畫面轉移旋轉動畫效果



JavaCode

AlphaAnimation 漸變透明度動畫效果
ScaleAnimation 漸變尺寸伸縮動畫效果
TranslateAnimation 畫面轉換位置移動動畫效果
RotateAnimation 畫面轉移旋轉動畫效果


Android動畫模式 

Animation主要有兩種動畫模式

一種是tweened animation(漸變動畫)

XML JavaCode
alpha AlphaAnimation
scale ScaleAnimation



一種是frame by frame(畫面轉換動畫)

 

XML中 JavaCode
translate TranslateAnimation
rotate RotateAnimation

 

 

Android動畫解析

alpha xml 淡出效果


 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <alpha
  4. android:fromAlpha="1.0"
  5. android:toAlpha="0.0"
  6. android:duration="500" />
  7. </set>
  8. <!--
  9. fromAlpha:開始時透明度
  10. toAlpha: 結束時透明度
  11. duration:動畫持續時間 -->
<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<alpha 
    android:fromAlpha="1.0"  
    android:toAlpha="0.0"  
    android:duration="500"  /> 
</set> 
<!--  
    fromAlpha:開始時透明度 
    toAlpha: 結束時透明度 
    duration:動畫持續時間 -->

 

 

alpha xml 淡入效果

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <alpha
  4. android:fromAlpha="0.0"
  5. android:toAlpha="1.0"
  6. android:duration="500" />
  7. </set>
  8. <!--
  9. fromAlpha:開始時透明度
  10. toAlpha: 結束時透明度
  11. duration:動畫持續時間 -->
<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
<alpha 
    android:fromAlpha="0.0"  
    android:toAlpha="1.0"  
    android:duration="500"  /> 
</set> 
<!--  
    fromAlpha:開始時透明度 
    toAlpha: 結束時透明度 
    duration:動畫持續時間 -->


 

rotate.xml 旋轉效果:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android">
  3. <rotate
  4. android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  5. android:fromDegrees="300"
  6. android:toDegrees="-360"
  7. android:pivotX="10%"
  8. android:pivotY="100%"
  9. android:duration="10000"/>
  10. </set>
  11. <!--
  12. fromDegrees 動畫開始時的角度
  13. toDegrees 動畫結束時物件的旋轉角度,正代表順時針
  14. pivotX 屬性爲動畫相對於物件的X座標的開始位置
  15. pivotY 屬性爲動畫相對於物件的Y座標的開始位置 -->
<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate 										
    android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
	android:fromDegrees="300" 
	android:toDegrees="-360" 
	android:pivotX="10%" 
	android:pivotY="100%" 
	android:duration="10000" /> 
</set> 
<!--  
  fromDegrees  	動畫開始時的角度 
  toDegrees    	動畫結束時物件的旋轉角度,正代表順時針   
  pivotX  	屬性爲動畫相對於物件的X座標的開始位置
  pivotY 	屬性爲動畫相對於物件的Y座標的開始位置    --> 


scale.xml 縮放效果:

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <scale
  4. android:interpolator= "@android:anim/decelerate_interpolator"
  5. android:fromXScale="0.0"
  6. android:toXScale="1.5"
  7. android:fromYScale="0.0"
  8. android:toYScale="1.5"
  9. android:pivotX="50%"
  10. android:pivotY="50%"
  11. android:startOffset="0"
  12. android:duration="10000"
  13. android:repeatCount="1"
  14. android:repeatMode="reverse" />
  15. </set>
  16. <!--
  17. fromXDelta,fromYDelta 起始時X,Y座標,屏幕右下角的座標是X:320,Y:480
  18. toXDelta, toYDelta 動畫結束時X,Y的座標 --> <!--
  19. interpolator 指定動畫插入器
  20. 常見的有加速減速插入器 accelerate_decelerate_interpolator
  21. 加速插入器 accelerate_interpolator,
  22. 減速插入器 decelerate_interpolator。
  23. fromXScale,fromYScale, 動畫開始前X,Y的縮放,0.0爲不顯示, 1.0爲正常大小
  24. toXScale,toYScale, 動畫最終縮放的倍數, 1.0爲正常大小,大於1.0放大
  25. pivotX, pivotY 動畫起始位置,相對於屏幕的百分比,兩個都爲50%表示動畫從屏幕中間開始
  26. startOffset, 動畫多次執行的間隔時間,如果只執行一次,執行前會暫停這段時間,
  27. 單位毫秒 duration,一次動畫效果消耗的時間,單位毫秒,
  28. 值越小動畫速度越快 repeatCount,動畫重複的計數,動畫將會執行該值+1次
  29. repeatMode,動畫重複的模式,reverse爲反向,當第偶次執行時,動畫方向會相反。
  30. restart爲重新執行,方向不變 -->
<?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.5"   
	android:fromYScale="0.0"   
	android:toYScale="1.5"   
	android:pivotX="50%"   
	android:pivotY="50%"   
	android:startOffset="0"   
	android:duration="10000"  
	android:repeatCount="1"   
	android:repeatMode="reverse"  /> 
</set> 

<!--  
fromXDelta,fromYDelta   	起始時X,Y座標,屏幕右下角的座標是X:320,Y:480 
toXDelta, toYDelta     	動畫結束時X,Y的座標 --> <!--  
interpolator                    指定動畫插入器
常見的有加速減速插入器	        accelerate_decelerate_interpolator
加速插入器		    	accelerate_interpolator,
減速插入器		    	decelerate_interpolator。 
fromXScale,fromYScale,         動畫開始前X,Y的縮放,0.0爲不顯示,  1.0爲正常大小
toXScale,toYScale,	        動畫最終縮放的倍數, 1.0爲正常大小,大於1.0放大
pivotX,  pivotY	    	動畫起始位置,相對於屏幕的百分比,兩個都爲50%表示動畫從屏幕中間開始 
startOffset,		    	動畫多次執行的間隔時間,如果只執行一次,執行前會暫停這段時間,
		    		單位毫秒 duration,一次動畫效果消耗的時間,單位毫秒,
		    		值越小動畫速度越快 repeatCount,動畫重複的計數,動畫將會執行該值+1次 
			    	repeatMode,動畫重複的模式,reverse爲反向,當第偶次執行時,動畫方向會相反。
			    	restart爲重新執行,方向不變 -->


 



translate.xml 移動效果:

  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <setxmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate
  4. android:fromXDelta="320"
  5. android:toXDelta="0"
  6. android:fromYDelta="480"
  7. android:toYDelta="0"
  8. android:duration="10000"/>
  9. </set>
  10. <!--
  11. fromXDelta,fromYDelta 起始時X,Y座標,屏幕右下角的座標是X:320,Y:480
  12. toXDelta, toYDelta 動畫結束時X,Y的座標 -->
<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate 
	android:fromXDelta="320" 
	android:toXDelta="0" 
	android:fromYDelta="480" 
	android:toYDelta="0" 
	android:duration="10000" /> 
</set> 
<!--  
fromXDelta,fromYDelta   起始時X,Y座標,屏幕右下角的座標是X:320,Y:480 
toXDelta, toYDelta     動畫結束時X,Y的座標 --> 

 

 

GridView

1.控件屬性介紹

android:listSelector="@drawable/bg"

//該屬性很重要,如果不設置的話,GridView控件會自帶自己的選中樣式(黃色邊框),如圖所示:

做項目一般是不需要這個的。所以解決辦法是將GridView的android:listSelector屬性設置爲和Activity背景相同即可。
android:verticalSpacing="10dp" //行寬
android:horizontalSpacing="10dip" //列寬
android:numColumns="3" //列數

android:stretchMode="columnWidth" //列可擴展
以上列數爲3,若想在高分辨率中列數設置爲4怎麼辦呢。

首先,需要在屬性中設置列爲可擴展android:stretchMode="columnWidth"。然後在代碼中做個判斷:

if(Metrics.heightPixels == 1280 && Metrics.widthPixels == 800){
gridview.setNumColumns(4);
}這樣GridView的列數是可以隨分辨率不同而做更多的設置。

2.例子一:設置個邊框,並且右上角設置個CheckBox來美化選中狀態(左圖→右圖)。

→→→

這個Item的xml設計中,我是用兩個ImageView控件來實現的.

第一個ImageView 要設置一個屬性:android:layout_margin="4dip"。上下左右留出4dip的具體來顯示邊框的效果。並且在相應的Adapter中做個判斷,選中的話背景圖片顏色爲#87CEFA,未選中時爲3FFFFFF:

if(bSelect){ //bSelect表示是否選中
arg1.setBackgroundColor(Color.parseColor("#87CEFA"));
}else{
arg1.setBackgroundColor(Color.parseColor("#FFFFFF"));

右上角的看起來像複選框,其實我也是用ImageView控件來實現的。界面設計很重要,距離要對好。我設置的該控件離上邊距和右邊距分別爲2dip的距離。同樣的只需要修改該ImageView所綁定的圖片就可以。

if(bSelect){
viewclass.checkboxImage.setImageBitmap(bmpwater_sel); //bmpwater_sel表示左圖右上角的圖片
}else{
viewclass.checkboxImage.setImageBitmap(bmpwater_unsel); //bmpwater_unsel表示右圖右上角的圖片
}

很簡單吧。你們可以試試。

3.例子二:打開一個GridView控件的Activity時,如果打開的圖片過多,如何讓圖片異步加載。如圖所示:

 → 

首先在界面定義中要定義一個全屏顯示的加載圈效果,叫做mLoading。程序剛啓動時顯示圖片加載結束後調用函數mLoading.setVisibility(View.GONE);讓它不顯示。我是用一個函數來調用它,這樣更好的體現了封裝性,如下:

private void showLoading(boolean bShow){
if(mLoading == null) return;
mLoading.setVisibility(bShow ? View.VISIBLE : View.GONE);
}

xml中該加載框的設計如下:

①爲了不卡主線程,實現這一的效果要多開一個線程。在該線程中調用函數InitList(),在該函數中將圖片加載到ArrayList中去(花時間最多的就是對多圖片的處理,這個放在子線程中可以不卡主線程,如果直接在主線程中做,會讓畫面出現2-3秒的黑屏停頓)。

像這樣,在onCreate方法中開一個子線程:

new Thread(new Runnable() {
@Override
public void run() {
InitList();
}
}).start();

②方法InitList()中要做兩件事情。一是加載圖片,二是通知Handler圖片加載完成(因爲子線程不可以操作UI控件,只能通過Handler的方式)。

private void InitList()
{

XXXX; //加載圖片代碼
mMainHandler.sendMessage(MainHandler.MSG_FINISH); //發送消息
}

③當收到InitList發送的消息時就讓上面所提的mLoading不顯示。同時GridView綁定adapter的代碼也在這個裏面寫。因爲圖片加載完成後再綁定adapter,這樣圖片才能全部顯示,否則只能顯示一部分。

case MSG_FINISH:
showLoading(false); //讓加載框不再顯示
gridview.setAdapter(ia); //綁定數據
break;
default:
break;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章