[android]仿制新浪微博消息页面 图标切换动画

研究了下以前不怎么用到的动画效果的实现 

顺便做了一个新浪微博消息页面 图标切换动画 效果的实例

 

如图

然后封装了一下这个效果的实现代码

 

如下

 

Java代码  

1. package com.lurencun.unit.unit;  
2.   
3. import android.app.Activity;  
4. import android.graphics.BitmapFactory;  
5. import android.graphics.Matrix;  
6. import android.view.animation.Animation;  
7. import android.view.animation.TranslateAnimation;  
8. import android.widget.ImageView;  
9.   
10. /** 
11.  * 标签切换对应动画效果实现类 
12.  *  
13.  * @author poolo 
14.  * @since 2012年8月10日 
15.  * @version 1.0.0 完成了2,3,4个标签的情况下的处理(越多- -就要以笛卡尔积的数量增长- -我觉得呢2~4够用了) 
16.  */  
17. public class Unit {  
18.     private int current = 0;  
19.     private Activity at;  
20.     private ImageView cursor;  
21.     private float bmpW;  
22.     private float screenW;  
23.     private float offset;// 偏移量  
24.   
25.     /** 
26.      *  
27.      * @param a 
28.      *            当前Activity 
29.      * @param layoutId 
30.      *            当前作为图标使用的ImageViewId 
31.      * @param drawId 
32.      *            当前图标的drawId 
33.      * @param num 
34.      *            当前标签个数 
35.      */  
36.     public Unit(Activity a, int viewId, int drawId, int num) {  
37.         at = a;  
38.         init(viewId, drawId, num);  
39.     }  
40.   
41.     /** 
42.      * 纯粹是为了好看些的一个初始化数据包 无视这里吧 
43.      *  
44.      * @param viewId 
45.      * @param drawId 
46.      * @param num 
47.      */  
48.     private void init(int viewId, int drawId, int num) {  
49.         cursor = (ImageView) at.findViewById(viewId);  
50.         bmpW = BitmapFactory.decodeResource(at.getResources(), drawId)  
51.                 .getWidth();  
52.         screenW = at.getWindowManager().getDefaultDisplay().getWidth();  
53.         offset = (screenW / num - bmpW) / 2;  
54.         Matrix matrix = new Matrix();  
55.         matrix.postTranslate(offset, 0);  
56.         cursor.setImageMatrix(matrix);  
57.     }  
58.   
59.     /** 
60.      * 两个标签的情况 
61.      * @param selectId 被选中的id 
62.      */  
63.     public void move2tag(int selectId) {  
64.         Animation animation = null;  
65.         float zero = 0;  
66.         float one = offset * 2 + bmpW;  
67.         switch (selectId) {  
68.         case 0:  
69.             if (current == 1) {  
70.                 animation = new TranslateAnimation(one, zero, 0, 0);  
71.             }  
72.             break;  
73.         case 1:  
74.             if (current == 0) {  
75.                 animation = new TranslateAnimation(zero, one, 0, 0);  
76.             }  
77.             break;  
78.         }  
79.         current = selectId;  
80.         animation.setFillAfter(true);  
81.         animation.setDuration(300);  
82.         cursor.startAnimation(animation);  
83.     }  
84.   
85.     /** 
86.      * 三个标签的情况 
87.      * @param selectId 被选中的id 
88.      */  
89.     public void move3tag(int selectId) {  
90.         Animation animation = null;  
91.         float zero = 0;  
92.         float one = offset * 2 + bmpW;  
93.         float two = one * 2;  
94.         switch (selectId) {  
95.         case 0:  
96.             if (current == 1) {  
97.                 animation = new TranslateAnimation(one, zero, 0, 0);  
98.             }  
99.             if (current == 2) {  
100.                 animation = new TranslateAnimation(two, zero, 0, 0);  
101.             }  
102.             break;  
103.         case 1:  
104.             if (current == 0) {  
105.                 animation = new TranslateAnimation(zero, one, 0, 0);  
106.             }  
107.             if (current == 2) {  
108.                 animation = new TranslateAnimation(two, one, 0, 0);  
109.             }  
110.             break;  
111.   
112.         case 2:  
113.             if (current == 0) {  
114.                 animation = new TranslateAnimation(zero, two, 0, 0);  
115.             }  
116.             if (current == 1) {  
117.                 animation = new TranslateAnimation(one, two, 0, 0);  
118.                 break;  
119.             }  
120.         }  
121.         current = selectId;  
122.         animation.setFillAfter(true);  
123.         animation.setDuration(300);  
124.         cursor.startAnimation(animation);  
125.     }  
126.   
127.     /** 
128.      * 四个标签的情况 
129.      * @param selectId 被选中的id 
130.      */  
131.     public void move4tag(int selectId) {  
132.         Animation animation = null;  
133.         float zero = 0;  
134.         float one = offset * 2 + bmpW;  
135.         float two = one * 2;  
136.         float three = one * 3;  
137.         switch (selectId) {  
138.         case 0:  
139.             if (current == 1) {  
140.                 animation = new TranslateAnimation(one, zero, 0, 0);  
141.             }  
142.             if (current == 2) {  
143.                 animation = new TranslateAnimation(two, zero, 0, 0);  
144.             }  
145.             if (current == 3) {  
146.                 animation = new TranslateAnimation(three, zero, 0, 0);  
147.             }  
148.             break;  
149.         case 1:  
150.             if (current == 0) {  
151.                 animation = new TranslateAnimation(zero, one, 0, 0);  
152.             }  
153.             if (current == 2) {  
154.                 animation = new TranslateAnimation(two, one, 0, 0);  
155.             }  
156.             if (current == 3) {  
157.                 animation = new TranslateAnimation(three, one, 0, 0);  
158.             }  
159.             break;  
160.   
161.         case 2:  
162.             if (current == 0) {  
163.                 animation = new TranslateAnimation(zero, two, 0, 0);  
164.             }  
165.             if (current == 1) {  
166.                 animation = new TranslateAnimation(one, two, 0, 0);  
167.   
168.             }  
169.             if (current == 3) {  
170.                 animation = new TranslateAnimation(three, two, 0, 0);  
171.             }  
172.             break;  
173.         case 3:  
174.             if (current == 0) {  
175.                 animation = new TranslateAnimation(zero, three, 0, 0);  
176.             }  
177.             if (current == 1) {  
178.                 animation = new TranslateAnimation(one, three, 0, 0);  
179.   
180.             }  
181.             if (current == 2) {  
182.                 animation = new TranslateAnimation(two, three, 0, 0);  
183.             }  
184.             break;  
185.         }  
186.         current = selectId;  
187.         animation.setFillAfter(true);  
188.         animation.setDuration(300);  
189.         cursor.startAnimation(animation);  
190.     }  
191. }  

 

 

 一个需要注意的地方 使用此方法的童鞋 切记自己的ImageView需要设置 android:scaleType="matrix" 才能使图形作为矩形计算 不至于出现错误

 

Xml代码  

1. <ImageView  
2.     android:id="@+id/testImg1"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:contentDescription="@string/hello"  
6.     android:scaleType="matrix"  
7.     android:src="@drawable/jian_tou" />  

 

 

部分借鉴与：http://www.eoeandroid.com/code/2012/0322/994_2.html

 

另如果路过的同学知道如何截android手机上的动态图麻烦留言告知下，谢谢。

 

jar包,源码,apk,截图都在下面。

 

 

已经交给团队封装代码的童鞋 将会封装到这个工具jar中

https://github.com/chenyoca/ToolkitForAndroid