Android中的動畫研究(一)

本文主要研究Android中的三種動畫,第一種是單個View的各種動畫效果,第二種是兩個Active切換時的動畫效果,第三種是類似於GifFrame By Frame動畫效果,其中View的各種動畫包括在xml文件中定義和代碼中定義兩種方式。

一、動畫基本類型

如下表所示,Android的動畫由四種類型組成,即可在xml中定義,也可在代碼中定義,如下所示:



 

 

XML


CODE

 

漸變透明度動畫效果

 

alpha


AlphaAnimation

 

漸變尺寸伸縮動畫效果

 

scale


ScaleAnimation

 

畫面轉換位置移動動畫效果

 

translate


TranslateAnimation

 

畫面轉移旋轉動畫效果

 

rotate


RotateAnimation



二、如何在XML文件中定義動畫

1.alpha

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android" >
  3. <!--  表示透明度從0.1到1.0,時長爲3000ms。-->
  4. <alpha
  5. android:fromAlpha="0.1"
  6. android:toAlpha="1.0"
  7. android:duration="3000"
  8. />
  9. </set>
複製代碼
2.scale
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3.    <scale 
  4.           android:interpolator=
  5.                      "@android:anim/accelerate_decelerate_interpolator"
  6.           android:fromXScale="0.0"
  7.           android:toXScale="1.4"
  8.           android:fromYScale="0.0"
  9.           android:toYScale="1.4"
  10.           android:pivotX="50%"
  11.           android:pivotY="50%"
  12.           android:fillAfter="false"
  13.           android:duration="700" />
  14. </set>
  15. <!-- 尺寸伸縮動畫效果 scale
  16.        屬性:interpolator 指定一個動畫的插入器,共三種:
  17.             accelerate_decelerate_interpolator  加速-減速 動畫插入器
  18.             accelerate_interpolator        加速-動畫插入器
  19.             decelerate_interpolator        減速- 動畫插入器
  20.         其他的屬於特定的動畫效果
  21.       浮點型值:        
  22.             fromXScale 屬性爲動畫起始時 X座標上的伸縮尺寸   
  23.             toXScale   屬性爲動畫結束時 X座標上的伸縮尺寸
  24.             fromYScale 屬性爲動畫起始時Y座標上的伸縮尺寸   
  25.             toYScale   屬性爲動畫結束時Y座標上的伸縮尺寸
  26.             說明:
  27.                  以上四種屬性值 
  28.                     0.0表示收縮到沒有
  29.                     1.0表示正常無伸縮    
  30.                     值小於1.0表示收縮 
  31.                     值大於1.0表示放大
  32.             pivotX     屬性爲動畫相對於物件的X座標的開始位置
  33.             pivotY     屬性爲動畫相對於物件的Y座標的開始位置
  34.             說明:
  35.                     以上兩個屬性值 從0%-100%中取值
  36.                     50%爲物件的X或Y方向座標上的中點位置
  37.         長整型值:
  38.             duration  屬性爲動畫持續時間
  39.             說明:   時間以毫秒爲單位
  40.         布爾型值:
  41.             fillAfter 屬性 當設置爲true ,該動畫轉化在動畫結束後被應用
  42. -->
複製代碼
3.translate
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <translate
  4. android:fromXDelta="30"
  5. android:toXDelta="-80"
  6. android:fromYDelta="30"
  7. android:toYDelta="300"
  8. android:duration="2000"
  9. />
  10. <!-- translate 位置轉移動畫效果
  11.         整型值:
  12.             fromXDelta 屬性爲動畫起始時 X座標上的位置   
  13.             toXDelta   屬性爲動畫結束時 X座標上的位置
  14.             fromYDelta 屬性爲動畫起始時 Y座標上的位置
  15.             toYDelta   屬性爲動畫結束時 Y座標上的位置
  16.             注意:
  17.                      沒有指定fromXType toXType fromYType toYType 時候,
  18.                      默認是以自己爲相對參照物            
  19.         長整型值:
  20.             duration  屬性爲動畫持續時間
  21.             說明:   時間以毫秒爲單位
  22. -->
  23. </set>
複製代碼
4.rotate
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android">
  3. <rotate
  4.         android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  5.         android:fromDegrees="0"
  6.         android:toDegrees="+350"        
  7.         android:pivotX="50%"
  8.         android:pivotY="50%"    
  9.         android:duration="3000" /> 
  10. <!-- rotate 旋轉動畫效果
  11.        屬性:interpolator 指定一個動畫的插入器,共三種:
  12.                 accelerate_decelerate_interpolator   加速-減速 動畫插入器
  13.                 accelerate_interpolator               加速-動畫插入器
  14.                 decelerate_interpolator               減速- 動畫插入器
  15.              其他的屬於特定的動畫效果                          
  16.        浮點數型值:
  17.             fromDegrees 屬性爲動畫起始時物件的角度   
  18.             toDegrees   屬性爲動畫結束時物件旋轉的角度 可以大於360度       
  19.             說明:
  20.                      當角度爲負數——表示逆時針旋轉
  21.                      當角度爲正數——表示順時針旋轉             
  22.                      (負數from——to正數:順時針旋轉)  
  23.                      (負數from——to負數:逆時針旋轉)
  24.                      (正數from——to正數:順時針旋轉)
  25.                      (正數from——to負數:逆時針旋轉)
  26.             pivotX     屬性爲動畫相對於物件的X座標的開始位置
  27.             pivotY     屬性爲動畫相對於物件的Y座標的開始位置               
  28.             說明:        以上兩個屬性值 從0%-100%中取值
  29.                          50%爲物件的X或Y方向座標上的中點位置
  30.         長整型值:
  31.             duration  屬性爲動畫持續時間
  32.             說明:       時間以毫秒爲單位
  33. -->
  34. </set>
複製代碼

三、
如何使用XML中定義的動畫

public static Animation loadAnimation (Contextcontext, int id)

//第一個參數Context爲程序的上下文   

//第二個參數id爲動畫XML文件的引用

//例子:

myAnimation=AnimationUtils.loadAnimation(this,R.anim.my_action);

//使用AnimationUtils類的靜態方法loadAnimation()來加載XML中的動畫XML文件


四、如何在java代碼中定義動畫

1.代碼:

  1. //在代碼中定義 動畫實例對象
  2. private Animation myAnimation_Alpha;
  3. private Animation myAnimation_Scale;
  4. private Animation myAnimation_Translate;
  5. private Animation myAnimation_Rotate;
  6.    
  7. //根據各自的構造方法來初始化一個實例對象
  8. myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);
  9. myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
  10.              Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  11. myAnimation_Translate=new TranslateAnimation(30.0f, -80.0f, 30.0f, 300.0f);
  12. myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
  13.                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
複製代碼
2. 分析:
  1. 1.1 AlphaAnimation

  2. 第一步:AlphaAnimation類對象定義
  3. private AlphaAnimation myAnimation_Alpha;
  4. 第二步:AlphaAnimation類對象構造
  5. AlphaAnimation(float fromAlpha, float toAlpha)
  6. //第一個參數fromAlpha爲 動畫開始時候透明度
  7. //第二個參數toAlpha爲 動畫結束時候透明度
  8. myAnimation_Alpha=new AlphaAnimation(0.1f, 1.0f);
  9. //說明:
  10. //                0.0表示完全透明
  11. //                1.0表示完全不透明
  12. 第三步:設置動畫持續時間
  13. myAnimation_Alpha.setDuration(5000);
  14. //設置時間持續時間爲 5000毫秒

  15. 1.2 ScaleAnimation
  16. 第一步:ScaleAnimation類對象定義
  17. private AlphaAnimation myAnimation_Scale;
  18. 第二步:ScaleAnimation類對象構造
  19. ScaleAnimation(float fromX, float toX, float fromY, float toY,
  20.            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
  21. //第一個參數fromX爲動畫起始時 X座標上的伸縮尺寸   
  22. //第二個參數toX爲動畫結束時 X座標上的伸縮尺寸    
  23. //第三個參數fromY爲動畫起始時Y座標上的伸縮尺寸   
  24. //第四個參數toY爲動畫結束時Y座標上的伸縮尺寸 
  25. /*說明:
  26.                     以上四種屬性值   
  27.                     0.0表示收縮到沒有
  28.                     1.0表示正常無伸縮    
  29.                     值小於1.0表示收縮 
  30.                     值大於1.0表示放大
  31. */
  32. //第五個參數pivotXType爲動畫在X軸相對於物件位置類型 
  33. //第六個參數pivotXValue爲動畫相對於物件的X座標的開始位置
  34. //第七個參數pivotXType爲動畫在Y軸相對於物件位置類型  
  35. //第八個參數pivotYValue爲動畫相對於物件的Y座標的開始位置
  36. myAnimation_Scale =new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f,
  37.              Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
  38. 第三步:設置動畫持續時間
  39. myAnimation_Scale.setDuration(700);
  40. //設置時間持續時間爲 700毫秒
  41. 1.3 TranslateAnimation
  42. 第一步:TranslateAnimation類對象定義
  43. private AlphaAnimation myAnimation_Translate;
  44. 第二步:TranslateAnimation類對象構造
  45. TranslateAnimation(float fromXDelta, float toXDelta,
  46.                        float fromYDelta, float toYDelta)

  47. //第一個參數fromXDelta爲動畫起始時 X座標上的移動位置
  48. //第二個參數toXDelta爲動畫結束時 X座標上的移動位置
  49. //第三個參數fromYDelta爲動畫起始時Y座標上的移動位置
  50. //第四個參數toYDelta爲動畫結束時Y座標上的移動位置

  51. 第三步:設置動畫持續時間 m
  52. myAnimation_Translate.setDuration(2000);

  53. 1.4 RotateAnimation
  54. 第一步:RotateAnimation類對象定義
  55. private AlphaAnimation myAnimation_Rotate;

  56. 第二步:RotateAnimation類對象構造
  57. RotateAnimation(float fromDegrees, float toDegrees,
  58.             int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

  59. //第一個參數fromDegrees爲動畫起始時的旋轉角度
  60. //第二個參數toDegrees爲動畫旋轉到的角度
  61. //第三個參數pivotXType爲動畫在X軸相對於物件位置類型 
  62. //第四個參數pivotXValue爲動畫相對於物件的X座標的開始位置
  63. //第五個參數pivotXType爲動畫在Y軸相對於物件位置類型
  64. //第六個參數pivotYValue爲動畫相對於物件的Y座標的開始位置
  65. myAnimation_Rotate=new RotateAnimation(0.0f, +350.0f,
  66.                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
  67. 第三步:設置動畫持續時間
  68. myAnimation_Rotate.setDuration(3000);
複製代碼

五、如何使用java代碼中的動畫效果
  1. 使用從View父類繼承過來的方法startAnimation()來爲View或是子類View等等添加一個動畫效果
  2. public void startAnimation (Animation animation)


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