首页 > 代码库 > 文字飞入和飞出

文字飞入和飞出

转载请注明出处:http://blog.csdn.net/forwardyzk/article/details/42493641

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

思路:

  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

private void disapper() {
		int size = getChildCount();
		for (int i = size - 1; i >= 0; i--) {
			final TextView txt = (TextView) getChildAt(i);
			if (txt.getVisibility() == View.GONE) {
				removeView(txt);
				continue;
			}
			FrameLayout.LayoutParams layParams = (LayoutParams) txt
					.getLayoutParams();
			int[] xy = new int[] { layParams.leftMargin, layParams.topMargin,
					txt.getWidth() };
			AnimationSet animSet = getAnimationSet(xy, (width >> 1),
					(height >> 1), txtAnimOutType);
			txt.startAnimation(animSet);
			animSet.setAnimationListener(new AnimationListener() {
				public void onAnimationStart(Animation animation) {
				}

				public void onAnimationRepeat(Animation animation) {
				}

				public void onAnimationEnd(Animation animation) {
					txt.setOnClickListener(null);
					txt.setClickable(false);
					txt.setVisibility(View.GONE);
				}
			});
		}
	}


展示最新的View

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

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

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


private boolean show() {
		if (width > 0 && height > 0 && vecKeywords != null
				&& vecKeywords.size() > 0 && enableShow) {
			enableShow = false;
			lastStartAnimationTime = System.currentTimeMillis();
			// 找到中心点
			int xCenter = width >> 1, yCenter = height >> 1;
			// 关键字的个数。
			int size = vecKeywords.size();
			int xItem = width / size, yItem = height / size;
			Log.d("ANDROID_LAB", "--------------------------width=" + width
					+ " height=" + height + "  xItem=" + xItem + " yItem="
					+ yItem + "---------------------------");
			LinkedList<Integer> listX = new LinkedList<Integer>(), listY = new LinkedList<Integer>();
			for (int i = 0; i < size; i++) {
				// 准备随机候选数,分别对应x/y轴位置
				listX.add(i * xItem);
				listY.add(i * yItem + (yItem >> 2));
				Log.e("Search", "ListX:" + (i * xItem) + "#listY:"
						+ (i * yItem + (yItem >> 2)));
			}
			// TextView[] txtArr = new TextView[size];
			LinkedList<TextView> listTxtTop = new LinkedList<TextView>();
			LinkedList<TextView> listTxtBottom = new LinkedList<TextView>();
			for (int i = 0; i < size; i++) {
				String keyword = vecKeywords.get(i);
				// 随机颜色
				int ranColor = 0xff000000 | random.nextInt(0x0077ffff);
				// 随机位置,糙值
				int xy[] = randomXY(random, listX, listY, xItem);
				// 随机字体大小
				int txtSize = TEXT_SIZE_MIN
						+ random.nextInt(TEXT_SIZE_MAX - TEXT_SIZE_MIN + 1);
				// 实例化TextView
				final TextView txt = new TextView(getContext());
				txt.setOnClickListener(itemClickListener);
				txt.setText(keyword);
				txt.setTextColor(ranColor);
				txt.setTextSize(TypedValue.COMPLEX_UNIT_SP, txtSize);
				txt.setShadowLayer(1, 1, 1, 0xdd696969);
				txt.setGravity(Gravity.CENTER);

				// txt.setBackgroundColor(Color.RED);
				// 获取文本长度
				Paint paint = txt.getPaint();
				int strWidth = (int) Math.ceil(paint.measureText(keyword));
				xy[IDX_TXT_LENGTH] = strWidth;
				// 第一次修正:修正x坐标
				if (xy[IDX_X] + strWidth > width - (xItem >> 1)) {
					int baseX = width - strWidth;
					// 减少文本右边缘一样的概率
					xy[IDX_X] = baseX - xItem + random.nextInt(xItem >> 1);
				} else if (xy[IDX_X] == 0) {
					// 减少文本左边缘一样的概率
					xy[IDX_X] = Math.max(random.nextInt(xItem), xItem / 3);
				}
				xy[IDX_DIS_Y] = Math.abs(xy[IDX_Y] - yCenter);
				txt.setTag(xy);
				if (xy[IDX_Y] > yCenter) {
					listTxtBottom.add(txt);
				} else {
					listTxtTop.add(txt);
				}
			}
			attach2Screen(listTxtTop, xCenter, yCenter, yItem);
			attach2Screen(listTxtBottom, xCenter, yCenter, yItem);
			return true;
		}
		return false;
	}



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

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

private void attach2Screen(LinkedList<TextView> listTxt, int xCenter,
			int yCenter, int yItem) {
		int size = listTxt.size();
		sortXYList(listTxt, size);
		for (int i = 0; i < size; i++) {
			TextView txt = listTxt.get(i);
			int[] iXY = (int[]) txt.getTag();
			// Log.d("ANDROID_LAB", "fix[  " + txt.getText() + "  ] x:" +
			// iXY[IDX_X] + " y:" + iXY[IDX_Y] + " r2="
			// + iXY[IDX_DIS_Y]);
			// 第二次修正:修正y坐标
			int yDistance = iXY[IDX_Y] - yCenter;
			// 对于最靠近中心点的,其值不会大于yItem<br/>
			// 对于可以一路下降到中心点的,则该值也是其应调整的大小<br/>
			int yMove = Math.abs(yDistance);
			inner: for (int k = i - 1; k >= 0; k--) {
				int[] kXY = (int[]) listTxt.get(k).getTag();
				int startX = kXY[IDX_X];
				int endX = startX + kXY[IDX_TXT_LENGTH];
				// y轴以中心点为分隔线,在同一侧
				if (yDistance * (kXY[IDX_Y] - yCenter) > 0) {
					// Log.d("ANDROID_LAB", "compare:" +
					// listTxt.get(k).getText());
					if (isXMixed(startX, endX, iXY[IDX_X], iXY[IDX_X]
							+ iXY[IDX_TXT_LENGTH])) {
						int tmpMove = Math.abs(iXY[IDX_Y] - kXY[IDX_Y]);
						if (tmpMove > yItem) {
							yMove = tmpMove;
						} else if (yMove > 0) {
							// 取消默认值。
							yMove = 0;
						}
						// Log.d("ANDROID_LAB", "break");
						break inner;
					}
				}
			}
			// Log.d("ANDROID_LAB", txt.getText() + " yMove=" + yMove);
			if (yMove > yItem) {
				int maxMove = yMove - yItem;
				int randomMove = random.nextInt(maxMove);
				int realMove = Math.max(randomMove, maxMove >> 1) * yDistance
						/ Math.abs(yDistance);
				iXY[IDX_Y] = iXY[IDX_Y] - realMove;
				iXY[IDX_DIS_Y] = Math.abs(iXY[IDX_Y] - yCenter);
				// 已经调整过前i个需要再次排序
				sortXYList(listTxt, i + 1);
			}
			FrameLayout.LayoutParams layParams = new FrameLayout.LayoutParams(
					FrameLayout.LayoutParams.WRAP_CONTENT,
					FrameLayout.LayoutParams.WRAP_CONTENT);
			layParams.gravity = Gravity.LEFT | Gravity.TOP;
			layParams.leftMargin = iXY[IDX_X];
			layParams.topMargin = iXY[IDX_Y];
			addView(txt, layParams);
			// 动画
			AnimationSet animSet = getAnimationSet(iXY, xCenter, yCenter,
					txtAnimInType);
			txt.startAnimation(animSet);
		}
	}


有几个关键的方法:

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

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

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

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


使用步骤:

找到自动控件的全部名称(包含包名),我的位置在:com.example.inoutanimationdemo.KeywordsFlow

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical"
    tools:context="com.example.inoutanimationdemo.MainActivity" >

    <com.example.inoutanimationdemo.KeywordsFlow
        android:id="@+id/fly_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >
    </com.example.inoutanimationdemo.KeywordsFlow>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/in"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="in" />

        <Button
            android:id="@+id/out"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="out" />
    </LinearLayout>

</LinearLayout>


MainActivity.java

public class MainActivity extends Activity implements OnClickListener {
	public static final String[] keywords = { "手机", "QQ", "Animation", "APK",
			"GFW", "铅笔",//
			"短信", "桌面精灵", "MacBook Pro", "平板电脑", "雅诗兰黛",//
			"Base", "笔记本", "SPY Mouse", "Thinkpad E40", "捕鱼达人",//
			"内存清理", "地图", "导航", "闹钟", "主题",//
			"通讯录", "播放器", "CSDN leak", "安全", "Animation",//
			"美女", "天气", "4743G", "戴尔", "联想",//
			"欧朋", "浏览器", "愤怒的小鸟", "mmShow", "网易公开课",//
			"iciba", "油水关系", "网游App", "互联网", "365日历",//
			"脸部识别", "Chrome", "Safari", "中国版Siri", "苹果",//
			"iPhone5S", "摩托 ME525", "魅族 MX3", "小米" };
	private KeywordsFlow keywordsFlow;
	private Button btnIn, btnOut;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();

	}

	public void initView() {
		btnIn = (Button) findViewById(R.id.in);
		btnOut = (Button) findViewById(R.id.out);
		btnIn.setOnClickListener(this);
		btnOut.setOnClickListener(this);
		keywordsFlow = (KeywordsFlow) findViewById(R.id.fly_view);
		keywordsFlow.setDuration(1000l);
		keywordsFlow.setOnItemClickListener(this);
		// 添加
		feedKeywordsFlow(keywordsFlow, keywords);
		keywordsFlow.go2Show(KeywordsFlow.ANIMATION_IN);// 开启动画

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.in:
			keywordsFlow.rubKeywords();// 移除当前显示的文本内容
			feedKeywordsFlow(keywordsFlow, keywords);// 向View中添加显示的文本
			keywordsFlow.go2Show(KeywordsFlow.ANIMATION_IN);// 开启动画
			break;
		case R.id.out:
			keywordsFlow.rubKeywords();
			feedKeywordsFlow(keywordsFlow, keywords);
			keywordsFlow.go2Show(KeywordsFlow.ANIMATION_OUT);
			break;
		case R.id.fly_view:
			Toast.makeText(getApplicationContext(), "点击了View", 0).show();
			break;

		default:
			break;
		}

	}

	/**
	 * @param keywordsFlow
	 * @param arr
	 *            填充的文字
	 */
	private static void feedKeywordsFlow(KeywordsFlow keywordsFlow, String[] arr) {
		Random random = new Random();
		for (int i = 0; i < KeywordsFlow.MAX; i++) {
			int ran = random.nextInt(arr.length);
			String tmp = arr[ran];
			keywordsFlow.feedKeyword(tmp);
		}
	}
}

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

效果图:

技术分享



文字飞入和飞出