2025-05-23

周末下雨,拿這個時間來學習瞭下動畫,對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文件裡面的動畫文件引用來查看不同的效果哦,更好的效果,也可以再再往裡面添加屬性完成即可,最後,還是一樣的,如果覺得小馬文章寫得不清楚的,有好建議的,可直接指點批評,有問題我們共同交流進步,謝謝啦,覺得看不爽的,小馬也把源碼放附件裡面瞭,有需要學習的朋友可下載下,交流交流。。吼吼。。加油

 

摘自  酷_莫名簡單 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *