1. 程式人生 > >Android中的Animation(動畫)

Android中的Animation(動畫)

概要:

這裡寫圖片描述
Android中動畫的型別:
1.View Animation 檢視動畫 (應用在view中的一種動畫)

•tween animation 補間動畫 (在anim目錄中建立:四種+set)
•frame animation 幀動畫 (drawable目錄下建立的一個animation-list元素)

2.Property Animation 屬性動畫 ( after jdk 3.0)

詳細使用:

1.View Animation 檢視動畫 (應用在view中的一種動畫)

tween詳細使用:

tween中包含四種類型動畫:alpha漸入漸出, scale縮放, translate平移, rotate旋轉,
tween 的建立以及使用方式:
第一步:建立xml 建立路徑:res/anim/filename.xml
第二步:配置引數
第三步:使用動畫
In Java: R.anim.filename
In XML: @[package:]anim/filename
這裡寫圖片描述

Example: XML程式碼部分:

//漸入漸出
2.<alpha 
3.    xmlns:android="http://schemas.android.com/apk/res/android" //域名空間
4.    android:fromAlpha="0" 
5.    android:toAlpha="1"
6.    android:duration="2000"  //停留時間
7.     android:fillAfter="true" //是否停在動畫之後的樣子
8.    android:repeatCount="2"//重複次數
9.    android:repeatMode="reverse"
//重複模式 10. android:startOffset="100" //延時 11. /> 12.//縮放 13.<scale 14. xmlns:android="http://schemas.android.com/apk/res/android" 15. android:fromXScale="0"//起始位置 16. android:fromYScale="0" 17. android:toXScale="1" 18. android:toYScale="1" 19. android:pivotX="50%"//縮放的中心點 20. android:pivotY=
"50%" 21. android:duration="3000" 22. 23. /> 24.//平移 25.<translate 26. xmlns:android="http://schemas.android.com/apk/res/android" 27. android:fromXDelta="0" 28. android:fromYDelta="0" 29. android:toXDelta="100" 30. android:toYDelta="100" 31. android:duration="1000" 32. 33. /> 34. //旋轉 35.<rotate 36. xmlns:android="http://schemas.android.com/apk/res/android" 37. android:fromDegrees="0"//起始角度 38. android:toDegrees="7200"//旋轉角度 39. android:pivotX="50%" 40. android:pivotY="50%" 41. android:duration="5000" 42. android:interpolator="@android:anim/accelerate_decelerate_interpolator"//攔截器 android已定義好 43. /> 44. //可以將多個動畫放在集合裡 多個動畫一起執行 以下程式碼實現了 一個圖示從螢幕左側滾動出來的效果(平移加旋轉) 45.<set xmlns:android="http://schemas.android.com/apk/res/android"> 46. <rotate 47. android:fromDegrees="0" 48. android:toDegrees="720" 49. android:pivotX="50%" 50. android:pivotY="50%" 51. android:duration="3000" 52. /> 53. <translate 54. android:fromXDelta="-200" 55. android:fromYDelta="0" 56. android:toXDelta="0" 57. android:toYDelta="0" 58. android:duration="3000“ 59. /> 60.</set>

Java程式碼部分:


1.//獲取view物件
2.img= (ImageView) findViewById(R.id.imageView1);
3.//建立動畫物件
4.Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
5.//啟動動畫
6.img.startAnimation(animation);  

如何切換頁面的時候設定頁面出現和退出的動畫效果?
JAVA程式碼:


1.//建立意圖物件
2.Intent intent = new Intent(this,IntentActivity.class);
3.//建立ActivityOption物件 此方法包含動畫資訊,引數(context,進人動畫,退出動畫)
4.ActivityOptions ac= ActivityOptions.makeCustomAnimation(this, R.anim.scale02, R.anim.alpha01);
5.//將Activity 轉為Bundle 
6.Bundle b = ac.toBundle();
7.//啟動Activity 傳入intent 和bundle 
8.startActivity(intent,b);

frame animation 建立及使用

第一步:建立xml 路徑:res/drawable/filename.xml
第二步:配置xml
第三步:使用動畫
這裡寫圖片描述

xml程式碼:


1.<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
2.   <item android:drawable="@drawable/a1" android:duration="200" />//指定圖片資源 停留時間
3.   <item android:drawable="@drawable/a2" android:duration="200" />
4.   <item android:drawable="@drawable/a3" android:duration="200" />
5.   <item android:drawable="@drawable/a4" android:duration="200" />
6.   <item android:drawable="@drawable/a5" android:duration="200" />
7.</animation-list>

Java程式碼:

1.//設定圖片背景資源
2.image.setBackgroundResource(R.drawable.fream01);
3.//獲取所有圖片背景為動畫
4.AnimationDrawable d =(AnimationDrawable) iv.getBackground();
5.//啟動動畫
6.d.start();  

2.Property Animation 屬性動畫 ( after jdk 3.0)

Property Animation 的建立及使用:
第一步:建立xml檔案 路徑:res/animator/filename.xml
第二步:配置xml檔案
第三步:使用動畫
這裡寫圖片描述

xml程式碼:

xml程式碼:
1.//漸入漸出
2.<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
3.    android:propertyName="alpha"//漸入漸出 此屬性必須是被新增動畫的view上有對應set方法的屬性
4.    android:valueFrom="0"
5.    android:valueTo="1"
6.    android:valueType="floatType"//value type也是對應的view set方法中接收的屬性
7.    android:duration="3000"
8.
9.    />
10.//水平移動
11.<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
12.    android:propertyName="translationX"//水平移動 
13.    android:valueFrom="0"
14.    android:valueTo="100"
15.    android:valueType="floatType"
16.    android:repeatCount="1" //property animation 中移動之後不能回來 需要設定重複屬性
17.    android:repeatMode="reverse"
18.    android:duration="3000"
19.     />  

Java程式碼:


1.//利用 AnimatorInflater.loadAnimator方法傳入動畫,建立ObjectAnimator物件
2.ObjectAnimator a= (ObjectAnimator) AnimatorInflater.loadAnimator(this,R.animator.object02);
3.//指定view
4.a.setTarget(img);
5.//啟動動畫
6.a.start();  
7.
8.//不使用xml配置檔案,Java程式碼實現方式
9.ObjectAnimator oa= ObjectAnimator.ofFloat(img, "alpha", 0,1);
10.oa.start();

Property Animation 集合使用:
xml程式碼:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
2.    android:ordering="sequentially"  //ordering set特有屬性 可以設定動畫同時執行或者順序執行
3.     >
4.    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 
5.    android:propertyName="alpha"
6.    android:valueFrom="0"
7.    android:valueTo="1"
8.    android:valueType="floatType"
9.    android:duration="3000"
10.
11.    />
12.
13.    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
14.    android:propertyName="translationX"
15.    android:valueFrom="0"
16.    android:valueTo="100"
17.    android:valueType="floatType"
18.    android:repeatCount="1"
19.    android:repeatMode="reverse"
20.    android:duration="3000"
21.     />
22.</set>  

Java 程式碼:


1.//構建AnimatorSet物件  藉助AnimatorInflater載入資原始檔
2.AnimatorSet as =(AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.set);
3.//給動畫指定view
4.as.setTarget(img);
5.//啟動動畫
6.as.start();  
7.
8.
9.//不使用xml配置檔案,Java程式碼實現方式
10.ObjectAnimator o1= ObjectAnimator.ofFloat(btn, "alpha", 0,1);
11.o1.setDuration(3000);
12.ObjectAnimator o2= ObjectAnimator.ofFloat(img, "translationX", 0,50);
13.o1.setDuration(3000);
14.AnimatorSet as = new AnimatorSet();//建立集合
15.as.playTogether(o1,o2);//設定同時運動
16.as.start();  //啟動動畫

View Animation 與Property Animation的區別

Property Animation為屬性動畫 可以應用在任意物件上 。
View Animation 在移動的時候只是重繪了view,view本身的位置並沒有改變,Property Animation
在移動是確實改變了view的位置。