周末下雨,拿這個時間來學習瞭下動畫,對Android4.0.3主菜單裡面實現的那個擺動挺好奇的,學習瞭下,大體的效果已經實現瞭,這篇文章小馬就寫下具體的實現,代碼中間小馬試瞭很多東西,也加瞭很多註釋,希望大傢不要嫌囉嗦,多試瞭下多學點動畫,吼吼,不多說廢話,老樣子,先看效果,再看分解的代碼,分解效果圖如下:
先貼下文件目標結構,方便查看在文件中是如何引用動畫資源的,截圖如下:
1 View內容漸變效果圖一:
2 View內容漸變效果圖二:
3 View動畫剛開始時效果圖如下:
4 View動畫播放到一半時效果圖如下:
5 View動畫播放結束時效果圖如下:
好瞭,大體的效果看完瞭,下面小馬來分解下代碼,大傢不用擔心看不懂,小馬會在最後將此DEMO源碼放在附件中,供大傢學習交流:
一:先看下主佈局文件,裡面沒什麼重要的東西,但為瞭完整還是貼下:
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6.
7. <Button
8. android:id="@+id/button"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"
11. android:text="播放ListView動畫"
12. />
13. <ListView
14. android:id="@+id/listview"
15. android:layout_width="fill_parent"
16. android:layout_height="fill_parent"
17. android:layoutAnimation="@anim/list_layout_controller"
18. android:persistentDrawingCache="animation|scrolling" />
19. </LinearLayout>
二:下面來看下主控制類代碼,如下:
1. package com.xiaoma.listviewanimation.demo;
2.
3. import android.app.Activity;
4. import android.graphics.Camera;
5. import android.graphics.Matrix;
6. import android.os.Bundle;
7. import android.view.View;
8. import android.view.View.OnClickListener;
9. import android.view.animation.AccelerateDecelerateInterpolator;
10. import android.view.animation.AccelerateInterpolator;
11. import android.view.animation.Animation;
12. import android.view.animation.AnticipateInterpolator;
13. import android.view.animation.AnticipateOvershootInterpolator;
14. import android.view.animation.BounceInterpolator;
15. import android.view.animation.CycleInterpolator;
16. import android.view.animation.DecelerateInterpolator;
17. import android.view.animation.LinearInterpolator;
18. import android.view.animation.OvershootInterpolator;
19. import android.view.animation.Transformation;
20. import android.widget.ArrayAdapter;
21. import android.widget.Button;
22. import android.widget.ListView;
23.
24. /**
25. * @Title: ListViewAnimationDemoActivity.java
26. * @Package com.xiaoma.listviewanimation.demo
27. * @Description: ListView控件動畫學習測試
28. * @author MZH
29. *
30. * 因為小馬也處於學習的階段,我會盡可能在在自己代碼中多加註釋,供大傢學習交流,也
31. * 供自己以後有用到的時候直接看代碼,不重翻API,所以註釋多瞭大傢別嫌煩,吼吼
32. *
33. */
34. public class ListViewAnimationDemoActivity extends Activity implements
35. OnClickListener {
36.
37. private ListView listview;
38. private Button btn;
39.
40. /** Called when the activity is first created. */
41. @Override
42. public void onCreate(Bundle savedInstanceState) {
43. super.onCreate(savedInstanceState);
44. setContentView(R.layout.main);
45. init();
46. }
47.
48. /**
49. * 初始化方法實現
50. */
51. private void init() {
52. btn = (Button) findViewById(R.id.button);
53. btn.setOnClickListener(this);
54. String items[] = { "還記得", "那一年", "那一天", "有個人", "愛過我",
55. "洗刷刷", "愛拉拉", "哇吼吼", "咔酷伊", "咔哇伊", "哦吼吼", "小馬果"};
56. listview = (ListView) findViewById(R.id.listview);
57. //適配器我就用最簡單的,要用復雜的,大傢可以自定義適配器
58. ArrayAdapter<String> adapter = new ArrayAdapter<String>(
59. getApplicationContext(), android.R.layout.simple_list_item_1,
60. items);
61. listview.setAdapter(adapter);
62. }
63.
64. /**
65. * 佈局內所有點擊事件監聽
66. */
67. @Override
68. public void onClick(View v) {
69. // 因為隻有一個按鈕,小馬就直接寫個if簡單的判斷下瞭,多個老規矩用分支判斷
70. if (v.getId() == R.id.button) {
71. //開始播放ListView動畫
72. startPlayAnimation();
73. }
74. }
75.
76. /**
77. * 開始播放ListView動畫方法實現
78. */
79. private void startPlayAnimation() {
80. // ListViewAnimationChange為矩陣控制類
81. listview.startAnimation(new ListViewAnimationChange());
82. }
83.
84. /**
85. * @Title: ListViewAnimationChange.java
86. * @Package com.xiaoma.listviewanimation.demo
87. * @Description: ListView控件的矩陣內部控制類
88. * @author MZH
89. * 在這個地方講下,要自行控制屏幕矩陣的話必須實現現在兩個方法
90. */
91. private class ListViewAnimationChange extends Animation {
92.
93. @Override
94. public void initialize(int width, int height, int parentWidth,
95. int parentHeight) {
96.
97. // 將動畫播放時間設置為5秒
98. setDuration(5000);
99. // 設置縮放完成後,效果不消失
100. setFillAfter(true);
101.
102. // 設置線性插值器,這個地方new出來的對象跟在scale.xml中的插值器沒什麼區別,也可以用別的
103.
104. /**
105. * 順帶著講下在2D動畫中常用的插值器吧,小馬先給自己及大夥提醒下:插值器,就是告訴Android,播放動畫時
106. * 是從快到慢還是從慢到快,從左到右的旋轉還是其它的方式的動畫,剛開始很怕這個詞,試瞭下效果,其實不太嚇人…
107. * 吼吼,類型如下面的八種,跟scale.xml或alpha.xml中使用的插值器一樣的,隻是寫的形式不一樣而已
108. *
109. */
110.
111. /**
112. * 所有的插值器都實現Interpolator接口中的 getInterpolation(float input)方法,好奇的朋友
113. * Ctrl跟進下….隻註意一點,插值器不能同時set多個,不然最前面的會被覆蓋,即:無效果..
114. * new AccelerateDecelerateInterpolator();
115. * new AccelerateInterpolator();
116. * new CycleInterpolator(1.0f);
117. * new DecelerateInterpolator();
118. * new AnticipateInterpolator();
119. * new AnticipateOvershootInterpolator();
120. * new BounceInterpolator();
121. * new OvershootInterpolator();
122. * new LinearInterpolator();
123. * 與以上幾種插值器相對應的方法在xml文件中的使用方式大傢可以自動ALT+/試下,換湯不換藥
124. */
125.
126. //下面是小馬試的效果,好奇的朋友們可以打開效果試下,小馬不一一解釋
127. // setInterpolator(new LinearInterpolator());
128. // setInterpolator(new CycleInterpolator(1.0f) );
129. // setInterpolator(new AccelerateDecelerateInterpolator());
130. // setInterpolator(new DecelerateInterpolator());
131.
132.
133. /**
134. * 這兩個好玩就選瞭,這個效果類似於Android 4.0的那個左右擺動..效果可以自己打開註釋試下..
135. * 要用自己效果的可以重新改下矩陣的控制
136. */
137. setInterpolator(new AnticipateOvershootInterpolator());
138. //setInterpolator(new OvershootInterpolator());
139. super.initialize(width, height, parentWidth, parentHeight);
140. }
141.
142. /**
143. * 這個重寫是控制矩陣中關鍵的一步
144. * 介紹一個參數:interpolatedTime 安卓系統在模擬動畫時會反復的調用這個方法
145. * 所以這個值是一直變化的,從0-1變化….
146. * 這個方法就是在某一個時間點上將動畫添加到指定的控件上
147. */
148. @Override
149. protected void applyTransformation(float interpolatedTime,
150. Transformation t) {
151. super.applyTransformation(interpolatedTime, t);
152.
153. /*
154. * final Matrix matrix = t.getMatrix();
155. * matrix.setScale(interpolatedTime, interpolatedTime);
156. * matrix.preTranslate(-50f, -50f); matrix.postTranslate(50f, 50f);
157. */
158. // matrix.setRotate(45f);
159. // matrix.setTranslate(40f,50f);
160.
161. /**
162. * Camera小馬犯的錯:導相機包…大傢註意下就可以瞭,
163. * 我們應該導入graphics包
164. */
165. Camera camera = new Camera();
166. //取得屏幕矩陣對象
167. final Matrix matrix = t.getMatrix();
168. camera.save();
169. /**
170. * 下面方法中的參數大傢自己CTRL跟下,小馬不一一解說,
171. * 不跟進的自己改改看下效果就知道是什麼意思瞭..
172. */
173. camera.translate(0.0f, 0.0f, (1300 – 1300.0f * interpolatedTime));
174. camera.rotateY(360 * interpolatedTime);
175. camera.getMatrix(matrix);
176. //設置矩陣播放動畫前的位置.原點為:0,0
177. matrix.preTranslate(-50f, -50f);
178. //設置矩陣播放完動畫後的位置
179. matrix.postTranslate(50f, 50f);
180. camera.restore();
181. // 如果用瞭以下的效果,則上面Camera做的矩陣變換將被覆蓋
182. // matrix.setScale(interpolatedTime, interpolatedTime);
183. }
184. }
185. }
這個地方小馬提醒下,在主控制類中,最重要的是那具自定義的動畫類,它控制著VIEW的所有動畫,如:插值器…2D渲染等,具體的看代碼及註釋部分的代碼即可:
四:下面來看下用來關聯View控件與動畫的動畫控制器代碼:
1. <?xml version="1.0" encoding="utf-8"?>
2. <!– 動畫控制器,這個文件隻是把要添加的動畫與我們的動畫資源關聯起來
3. 下面這個屬性來控制控制動畫的方向,如:比底部到頂部,或別的…
4. 我們在主佈局文件中控件的屬性裡面使用這個地方的動畫控制器
5. android:animationOrder="reverse"
6. –>
7. <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
8. android:delay="30%"
9. android:animationOrder="reverse"
10. android:animation="@anim/scale"
11. />
五:一個簡單的透明度變化的文件,代碼如下:
1. <?xml version="1.0" encoding="utf-8"?>
2. <!– alpha
3. 這個地方說幾句,android:interpolator 大傢自行換換別的試下
4. –>
5. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
6. android:interpolator="@android:anim/bounce_interpolator"
7. android:fromAlpha="0.0"
8. android:toAlpha="1.0"
9. android:duration="1000"
10. />
我已經在anim文件夾下創建瞭幾個動畫文件,大傢可以嘗試著更改下動畫控制XML文件裡面的動畫文件引用來查看不同的效果哦,更好的效果,也可以再再往裡面添加屬性完成即可,最後,還是一樣的,如果覺得小馬文章寫得不清楚的,有好建議的,可直接指點批評,有問題我們共同交流進步,謝謝啦,覺得看不爽的,小馬也把源碼放附件裡面瞭,有需要學習的朋友可下載下,交流交流。。吼吼。。加油
摘自 酷_莫名簡單