文字飞入和飞出

转载请注明出处: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

效果图:

时间： 2024-10-03 18:12:48

文字飞入和飞出的相关文章

关键词随机飞入飞出效果

今天又有人问了,吧啦吧啦在网盘里找到了备份 整理一下 其实当时我也是网上找的,不过年代久远出处不详了,抱歉 图图图: http://blog.csdn.net/onlyonecoder/article/details/8518148 布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/ap

CSS3实现Tooltip提示框飞入飞出动画

我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观不怎么好看.今天我来分享一下利用CSS3快速实现既美观又实用的Tooltip提示框,提示框伴有飞入飞出的动画效果.先来看看效果图. 看上去还简单吧,其实实现的思路的确很简单. 具体效果我们可以在这里查看在线演示. 接下来我们来简单分析一下这个Tooltip实现的CSS3代码. 首先是HTML代码,主要是构造了3个小图标菜单以及对应的Tooltip提示

“文字”聚合、散出动画-转自奇舞团

本文介绍一个文字聚合.散出效果的动画效果,先看 demo Chinese tea cups, wholesale Chinese tea cups demo借鉴了 智能社首页图片轮播效果.接下来介绍聚合.散出效果的实现方法. 首先定义一个容器元素 <div class="ctn"></div> 然后,将这个容器的宽高划分成数块. var oDiv = document.getElementByClassName('ctn')[0]; var C=4; //划分的

android自定义控件之飞入飞出控件

最近呢,本人辞职了,在找工作期间,不幸碰到了这个求职淡季,另外还是大学生毕业求职的高峰期,简历发了无数份却都石沉大海,宝宝心里那是一个苦啊!翻着过去的代码,本人偶然找到了一个有意思的控件,那时本人还没有写博客的习惯,现在补上,先看效果图: 然后看用法代码: StellarMap stellarMap = (StellarMap) findViewById(R.id.stellar); // 设置数据 RecommendAdapter adapter = new RecommendAdapter(

界面切换之飞入飞出

用QT实现的一个简单动画,比较简单 所以,直接上代码,呵呵. [cpp] view plaincopyprint? //tqt.h #ifndef TQT_H_ #define TQT_H_ #include <QtGui> #include <QtCore> class Widget : public QWidget { Q_OBJECT private: QFrame *frame[10]; QPushButton *prevButton; QPushButton *nextB

CSS3实现两行或三行文字，然后多出的部分省略号代替

概述 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中.限制在一个块元素显示的文本的行数. 为了实现该效果,它需要组合其他外来的WebKit属性.常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 .-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 .text-overflow,可以用来多行文本

奇异的粒子继续飞出南极洲的冰，他们可能会破坏现代物理学

? 一支飞行成功后,一支团队恢复了NASA的南极脉冲瞬态天线(ANITA). 图片来源:澳大利亚南极分部 在南极洲的冰冻地面上出现了一些神秘的东西,它可能会破坏我们所知道的物理学. 物理学家不知道究竟是什么.但他们确实知道它是某种宇宙射线 - 一种高能粒子,它在太空中冲击地球,然后再次退出.但物理学家所知道的粒子 - 粒子的集合构成科学家称之为粒子物理学的标准模型(SM) - 不应该这样做.当然,有低能量的中微子可以穿过数英里的岩石不受影响.但高能中微子以及其他高能粒子具有"大截面".

利用velocity.js将svg动起来

关于velocity.js Velocity.js是一款jquery动画引擎插件,它拥有与jquery中的$.animate()相同的API,还打包了颜色动画,转换,循环,easing效果,类动画.滚动等功能,因此大家可以像使用$.animate()方法一样使用velocity,您可以快速的上手velocity.js.简单点说:Velocity就是实现页面元素中的飞入,飞出,旋转.颜色变换,esaing效果的jquery插件库. 当然我们可以自定义我们的动画,比较好用的是我们可以设定动画序列,方

ViewPager的用法和实现过程

看图先:          页面中填充内容是随机关键词飞入和飞出动画效果,随后会更新,如今请先无视吧 首先是 导入jar包   下载地址:android-support-v4.jar 布局文件中加入viewPager布局 <android.support.v4.view.ViewPager android:id="@+id/search_viewpager" android:layout_width="wrap_content" android:layout_