首页 > 代码库 > 文字飞入和飞出
文字飞入和飞出
转载请注明出处: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案遭到中心位置的距离大小进行排序。然后以此添加到当前的界面上,并且带有动画效果。
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
效果图:
文字飞入和飞出