文字飞入和飞出

我们看到在一个界面上，文字可以从里向外飞出，也可以从外向里飞入，下面我们就研究一下这个效果。

思路:

  1.设置要最新要展示的文字。

  2.设置View的动画
   (1)设置当前的View消失
      如果是飞入，设置当前的View动画
            渐变动画:由不透明变成透明
            伸缩动画:缩小
            平移动画：向里平移
      如果是飞出
            渐变动画:由不透明变成透明
            伸缩动画:由放大
            平移动画：向外平移
   (2)显示最新的View
      如果是飞入,设置当前的动画
          渐变动画:由透明变不透明
          伸缩动画:有放大变正常
          平移:向里移动
      如果是飞出,设置当前的动画
          渐变动画:由透明变不透明
          伸缩动画:从不显示到显示
          平移:向外移动

3.当前显示的View的动画结束的时候，要从当前的窗体移除。

4.显示新的View。
   4.1.要随机生成每个View的坐标，并且不能重复。
   4.2.随机生成显示文本的颜色和大小，要在最大和最小之间。
   4.3.通过设置文本后，根据文本的内容，调整View的X坐标，左边界和上边界的大小。
          防止当前View中的文本显示不全或者会多行显示
          防止显示在最左边。
   4.4.如果Y方向移动的位置小于View/最多的个数，那么要重新调整位置
   4.5.根据Y方向的中心位置，分为上下两部分View，到中心位置的距离大小进行排序。然后一次添加到当前的父窗体View上，
      并且给添加的View设置对应的动画

主要代码:

  设置当前所有的View消失。

  主要做:

   移除的是前一个动画结束时不可显示的View

   获取当前的View的坐标，左间距，上间距和View额宽度。为了是给你设置移动动画时，计算目的坐标。

   当动画结束的时候，使其不显示，GONE

[java] view plain copy

1. private void disapper() {  
2.         int size = getChildCount();  
3.         for (int i = size - 1; i >= 0; i--) {  
4.             final TextView txt = (TextView) getChildAt(i);  
5.             if (txt.getVisibility() == View.GONE) {  
6.                 removeView(txt);  
7.                 continue;  
8.             }  
9.             FrameLayout.LayoutParams layParams = (LayoutParams) txt  
10.                     .getLayoutParams();  
11.             int[] xy = new int[] { layParams.leftMargin, layParams.topMargin,  
12.                     txt.getWidth() };  
13.             AnimationSet animSet = getAnimationSet(xy, (width >> 1),  
14.                     (height >> 1), txtAnimOutType);  
15.             txt.startAnimation(animSet);  
16.             animSet.setAnimationListener(new AnimationListener() {  
17.                 public void onAnimationStart(Animation animation) {  
18.                 }  
19.   
20.                 public void onAnimationRepeat(Animation animation) {  
21.                 }  
22.   
23.                 public void onAnimationEnd(Animation animation) {  
24.                     txt.setOnClickListener(null);  
25.                     txt.setClickable(false);  
26.                     txt.setVisibility(View.GONE);  
27.                 }  
28.             });  
29.         }  
30.     }  

展示最新的View

创建新的View，然后随机的计算其坐标，不可重复

随机设置其文本颜色，并且根绝Y轴的坐标和屏幕中间的Y方向坐标进行比较，分为上下两部分。

根据设置的文本内容，重新调节View的X轴坐标。

[java] view plain copy

1. private boolean show() {  
2.         if (width > 0 && height > 0 && vecKeywords != null  
3.                 && vecKeywords.size() > 0 && enableShow) {  
4.             enableShow = false;  
5.             lastStartAnimationTime = System.currentTimeMillis();  
6.             // 找到中心点  
7.             int xCenter = width >> 1, yCenter = height >> 1;  
8.             // 关键字的个数。  
9.             int size = vecKeywords.size();  
10.             int xItem = width / size, yItem = height / size;  
11.             Log.d("ANDROID_LAB", "--------------------------width=" + width  
12.                     + " height=" + height + "  xItem=" + xItem + " yItem="  
13.                     + yItem + "---------------------------");  
14.             LinkedList<Integer> listX = new LinkedList<Integer>(), listY = new LinkedList<Integer>();  
15.             for (int i = 0; i < size; i++) {  
16.                 // 准备随机候选数，分别对应x/y轴位置  
17.                 listX.add(i * xItem);  
18.                 listY.add(i * yItem + (yItem >> 2));  
19.                 Log.e("Search", "ListX:" + (i * xItem) + "#listY:"  
20.                         + (i * yItem + (yItem >> 2)));  
21.             }  
22.             // TextView[] txtArr = new TextView[size];  
23.             LinkedList<TextView> listTxtTop = new LinkedList<TextView>();  
24.             LinkedList<TextView> listTxtBottom = new LinkedList<TextView>();  
25.             for (int i = 0; i < size; i++) {  
26.                 String keyword = vecKeywords.get(i);  
27.                 // 随机颜色  
28.                 int ranColor = 0xff000000 | random.nextInt(0x0077ffff);  
29.                 // 随机位置，糙值  
30.                 int xy[] = randomXY(random, listX, listY, xItem);  
31.                 // 随机字体大小  
32.                 int txtSize = TEXT_SIZE_MIN  
33.                         + random.nextInt(TEXT_SIZE_MAX - TEXT_SIZE_MIN + 1);  
34.                 // 实例化TextView  
35.                 final TextView txt = new TextView(getContext());  
36.                 txt.setOnClickListener(itemClickListener);  
37.                 txt.setText(keyword);  
38.                 txt.setTextColor(ranColor);  
39.                 txt.setTextSize(TypedValue.COMPLEX_UNIT_SP, txtSize);  
40.                 txt.setShadowLayer(1, 1, 1, 0xdd696969);  
41.                 txt.setGravity(Gravity.CENTER);  
42.   
43.                 // txt.setBackgroundColor(Color.RED);  
44.                 // 获取文本长度  
45.                 Paint paint = txt.getPaint();  
46.                 int strWidth = (int) Math.ceil(paint.measureText(keyword));  
47.                 xy[IDX_TXT_LENGTH] = strWidth;  
48.                 // 第一次修正:修正x坐标  
49.                 if (xy[IDX_X] + strWidth > width - (xItem >> 1)) {  
50.                     int baseX = width - strWidth;  
51.                     // 减少文本右边缘一样的概率  
52.                     xy[IDX_X] = baseX - xItem + random.nextInt(xItem >> 1);  
53.                 } else if (xy[IDX_X] == 0) {  
54.                     // 减少文本左边缘一样的概率  
55.                     xy[IDX_X] = Math.max(random.nextInt(xItem), xItem / 3);  
56.                 }  
57.                 xy[IDX_DIS_Y] = Math.abs(xy[IDX_Y] - yCenter);  
58.                 txt.setTag(xy);  
59.                 if (xy[IDX_Y] > yCenter) {  
60.                     listTxtBottom.add(txt);  
61.                 } else {  
62.                     listTxtTop.add(txt);  
63.                 }  
64.             }  
65.             attach2Screen(listTxtTop, xCenter, yCenter, yItem);  
66.             attach2Screen(listTxtBottom, xCenter, yCenter, yItem);  
67.             return true;  
68.         }  
69.         return false;  
70.     }  

经过比较，重新调节一下View轴坐标，防止View的Y坐标和YCenter差值，View最小的高度。移动效果不明显。

将上下两部分的View案遭到中心位置的距离大小进行排序。然后以此添加到当前的界面上，并且带有动画效果。

[java] view plain copy

1. private void attach2Screen(LinkedList<TextView> listTxt, int xCenter,  
2.             int yCenter, int yItem) {  
3.         int size = listTxt.size();  
4.         sortXYList(listTxt, size);  
5.         for (int i = 0; i < size; i++) {  
6.             TextView txt = listTxt.get(i);  
7.             int[] iXY = (int[]) txt.getTag();  
8.             // Log.d("ANDROID_LAB", "fix[  " + txt.getText() + "  ] x:" +  
9.             // iXY[IDX_X] + " y:" + iXY[IDX_Y] + " r2="  
10.             // + iXY[IDX_DIS_Y]);  
11.             // 第二次修正:修正y坐标  
12.             int yDistance = iXY[IDX_Y] - yCenter;  
13.             // 对于最靠近中心点的，其值不会大于yItem<br/>  
14.             // 对于可以一路下降到中心点的，则该值也是其应调整的大小<br/>  
15.             int yMove = Math.abs(yDistance);  
16.             inner: for (int k = i - 1; k >= 0; k--) {  
17.                 int[] kXY = (int[]) listTxt.get(k).getTag();  
18.                 int startX = kXY[IDX_X];  
19.                 int endX = startX + kXY[IDX_TXT_LENGTH];  
20.                 // y轴以中心点为分隔线，在同一侧  
21.                 if (yDistance * (kXY[IDX_Y] - yCenter) > 0) {  
22.                     // Log.d("ANDROID_LAB", "compare:" +  
23.                     // listTxt.get(k).getText());  
24.                     if (isXMixed(startX, endX, iXY[IDX_X], iXY[IDX_X]  
25.                             + iXY[IDX_TXT_LENGTH])) {  
26.                         int tmpMove = Math.abs(iXY[IDX_Y] - kXY[IDX_Y]);  
27.                         if (tmpMove > yItem) {  
28.                             yMove = tmpMove;  
29.                         } else if (yMove > 0) {  
30.                             // 取消默认值。  
31.                             yMove = 0;  
32.                         }  
33.                         // Log.d("ANDROID_LAB", "break");  
34.                         break inner;  
35.                     }  
36.                 }  
37.             }  
38.             // Log.d("ANDROID_LAB", txt.getText() + " yMove=" + yMove);  
39.             if (yMove > yItem) {  
40.                 int maxMove = yMove - yItem;  
41.                 int randomMove = random.nextInt(maxMove);  
42.                 int realMove = Math.max(randomMove, maxMove >> 1) * yDistance  
43.                         / Math.abs(yDistance);  
44.                 iXY[IDX_Y] = iXY[IDX_Y] - realMove;  
45.                 iXY[IDX_DIS_Y] = Math.abs(iXY[IDX_Y] - yCenter);  
46.                 // 已经调整过前i个需要再次排序  
47.                 sortXYList(listTxt, i + 1);  
48.             }  
49.             FrameLayout.LayoutParams layParams = new FrameLayout.LayoutParams(  
50.                     FrameLayout.LayoutParams.WRAP_CONTENT,  
51.                     FrameLayout.LayoutParams.WRAP_CONTENT);  
52.             layParams.gravity = Gravity.LEFT | Gravity.TOP;  
53.             layParams.leftMargin = iXY[IDX_X];  
54.             layParams.topMargin = iXY[IDX_Y];  
55.             addView(txt, layParams);  
56.             // 动画  
57.             AnimationSet animSet = getAnimationSet(iXY, xCenter, yCenter,  
58.                     txtAnimInType);  
59.             txt.startAnimation(animSet);  
60.         }  
61.     }  

有几个关键的方法：

feedKeyword(String keyword):填充显示的文本内容

rubKeywords():移除当前界面显示的文本内容

go2Show(int animType)：开始展示界面内容并且伴有动画。

ANIMATION_IN:飞入的效果  ANIMATION_OUT：飞出的效果

使用步骤:

找到自动控件的全部名称（包含包名），我的位置在:com.example.inoutanimationdemo.KeywordsFlow

activity_main.xml

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="@android:color/white"  
6.     android:orientation="vertical"  
7.     tools:context="com.example.inoutanimationdemo.MainActivity" >  
8.   
9.     <com.example.inoutanimationdemo.KeywordsFlow  
10.         android:id="@+id/fly_view"  
11.         android:layout_width="match_parent"  
12.         android:layout_height="0dp"  
13.         android:layout_weight="1" >  
14.     </com.example.inoutanimationdemo.KeywordsFlow>  
15.   
16.     <LinearLayout  
17.         android:layout_width="match_parent"  
18.         android:layout_height="wrap_content"  
19.         android:orientation="horizontal" >  
20.   
21.         <Button  
22.             android:id="@+id/in"  
23.             android:layout_width="0dp"  
24.             android:layout_height="wrap_content"  
25.             android:layout_weight="1"  
26.             android:text="in" />  
27.   
28.         <Button  
29.             android:id="@+id/out"  
30.             android:layout_width="0dp"  
31.             android:layout_height="wrap_content"  
32.             android:layout_weight="1"  
33.             android:text="out" />  
34.     </LinearLayout>  
35.   
36. </LinearLayout>  

MainActivity.java

[java] view plain copy

1. public class MainActivity extends Activity implements OnClickListener {  
2.     public static final String[] keywords = { "手机", "QQ", "Animation", "APK",  
3.             "GFW", "铅笔",//  
4.             "短信", "桌面精灵", "MacBook Pro", "平板电脑", "雅诗兰黛",//  
5.             "Base", "笔记本", "SPY Mouse", "Thinkpad E40", "捕鱼达人",//  
6.             "内存清理", "地图", "导航", "闹钟", "主题",//  
7.             "通讯录", "播放器", "CSDN leak", "安全", "Animation",//  
8.             "美女", "天气", "4743G", "戴尔", "联想",//  
9.             "欧朋", "浏览器", "愤怒的小鸟", "mmShow", "网易公开课",//  
10.             "iciba", "油水关系", "网游App", "互联网", "365日历",//  
11.             "脸部识别", "Chrome", "Safari", "中国版Siri", "苹果",//  
12.             "iPhone5S", "摩托 ME525", "魅族 MX3", "小米" };  
13.     private KeywordsFlow keywordsFlow;  
14.     private Button btnIn, btnOut;  
15.   
16.     @Override  
17.     protected void onCreate(Bundle savedInstanceState) {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.         initView();  
21.   
22.     }  
23.   
24.     public void initView() {  
25.         btnIn = (Button) findViewById(R.id.in);  
26.         btnOut = (Button) findViewById(R.id.out);  
27.         btnIn.setOnClickListener(this);  
28.         btnOut.setOnClickListener(this);  
29.         keywordsFlow = (KeywordsFlow) findViewById(R.id.fly_view);  
30.         keywordsFlow.setDuration(1000l);  
31.         keywordsFlow.setOnItemClickListener(this);  
32.         // 添加  
33.         feedKeywordsFlow(keywordsFlow, keywords);  
34.         keywordsFlow.go2Show(KeywordsFlow.ANIMATION_IN);// 开启动画  
35.   
36.     }  
37.   
38.     @Override  
39.     public void onClick(View v) {  
40.         switch (v.getId()) {  
41.         case R.id.in:  
42.             keywordsFlow.rubKeywords();// 移除当前显示的文本内容  
43.             feedKeywordsFlow(keywordsFlow, keywords);// 向View中添加显示的文本  
44.             keywordsFlow.go2Show(KeywordsFlow.ANIMATION_IN);// 开启动画  
45.             break;  
46.         case R.id.out:  
47.             keywordsFlow.rubKeywords();  
48.             feedKeywordsFlow(keywordsFlow, keywords);  
49.             keywordsFlow.go2Show(KeywordsFlow.ANIMATION_OUT);  
50.             break;  
51.         case R.id.fly_view:  
52.             Toast.makeText(getApplicationContext(), "点击了View", 0).show();  
53.             break;  
54.   
55.         default:  
56.             break;  
57.         }  
58.   
59.     }  
60.   
61.     /** 
62.      * @param keywordsFlow 
63.      * @param arr 
64.      *            填充的文字 
65.      */  
66.     private static void feedKeywordsFlow(KeywordsFlow keywordsFlow, String[] arr) {  
67.         Random random = new Random();  
68.         for (int i = 0; i < KeywordsFlow.MAX; i++) {  
69.             int ran = random.nextInt(arr.length);  
70.             String tmp = arr[ran];  
71.             keywordsFlow.feedKeyword(tmp);  
72.         }  
73.     }  
74. }  

源码下载:http://download.csdn.net/detail/forwardyzk/8337201

效果图: