仿火车出票效果

之前我下载了BaseAnimation 开源库(BaseAnimation是基于开源的APP,致力于收集各种动画效果) 

BaseAnimation 转载的链接:http://blog.csdn.net/vipzjyno1/article/details/20622621

发现里面有个火车票的出票效果,发现可以优化下:

BaseAnimation内的仿出票效果

可是它的出的票的布局高度啥都是写死的,通过这个思路,我便想到要做个类似于数据是通过网络获取,高度不一定的listview的订单出票效果。

一.  思路:

1)叠在布局上层的是订单信息,而在下层的就是订单内菜单的详细条目,详细条目的布局是置于布局最底层,并且在订单信息相对位置下方,这里使用了FrameLayout来处 理 详细条目布局。

2)出票的详细条目列表采用了LISTVIEW,它的动画初始位置要通过计算LISTVIEW的总高度进行计算获取,之后通过TranslateAnimation 进行Animation动画。

3)采用线程来模拟网络获取延迟的效果。

二.  碰到解决的问题:

1)碰到一个问题,就是如果数据一多,超过了一屏幕,在动画过程中动画衔接效果就很差,并有可能出现断层效果。

解决:通过重写ListView, 计算高度,并且在ListView 外面嵌套了一层ScrollView,这样便可以解决这样的问题。

2) 如果在订单信息布局下方直接放置一个LISTVIEW的话,这样,动画时候,LISTVIEW就会盖在订单信息上方。

解决:LISTVIEW外层一定要嵌套一层布局,并且设定在订单信息下方,这样便不会产生上述问题。

3)由于订单底部

 

 

一开始就是出现的,并且在数据刷新后跟随LISTVIEW一起下滑。

解决:采用Listview的addFooterView(底部view)方法,把它添加到LISTVIEW底部,在开始添加完毕后就直接初始化让Listview.setAdapter(null);

这样便在开始底部就显示出来了。

4)如何去计算LISTVIEW的总高度

解决:本DEMO采用了2种方式,

第一种:鉴于订单中每个ITEM的布局都是固定的,于是在布局中设置ITEM的高度为固定值,之后乘以listAdapter.getCount() 加上分割线listView.getDividerHeight() 的总高度

第二种:如果每个ITEM的布局是高度是不一定的话,就会造成影响,便找了一些资料,使用了以下方法:

[java] view plaincopy

  1. /** ListView 总高度 */  
  2. public static int totalHeight = 0;  
  3.   
  4. public static void setListViewHeightBasedOnChildren(ListView listView) {  
  5.     ListAdapter listAdapter = listView.getAdapter();  
  6.     if (listAdapter == null) {  
  7.         return;  
  8.     }  
  9.     totalHeight = 0;  
  10.     // 由于ADD了个footer,所以总量减去1  
  11.     Log.d("listAdapter.getCount()", "" + listAdapter.getCount());  
  12.     for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {  
  13.         View listItem = listAdapter.getView(i, null, listView);  
  14.         listItem.measure(0, 0);  
  15.         totalHeight += listItem.getMeasuredHeight();  
  16.         Log.d("getMeasuredHeight", "" + listItem.getMeasuredHeight());  
  17.     }  
  18.     totalHeight = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));  
  19. }  

计算得到了总高度。

5)实现动画效果

解决:

[java] view plaincopy

  1.       /** 
  2. * 启动打印订单动画 
  3. */  
  4. rivate void startAnimation() {  
  5. anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);  
  6. anim.setDuration(1000);  
  7. anim.setFillAfter(true);  
  8. anim.setAnimationListener(new AnimationListener() {  
  9.     @Override  
  10.     public void onAnimationStart(Animation animation) {  
  11.         // TODO Auto-generated method stub  
  12.     }  
  13.   
  14.     @Override  
  15.     public void onAnimationRepeat(Animation animation) {  
  16.         // TODO Auto-generated method stub  
  17.     }  
  18.   
  19.     @Override  
  20.     public void onAnimationEnd(Animation animation) {  
  21.         // TODO Auto-generated method stub  
  22.         cListview.clearAnimation();  
  23.     }  
  24. });  
  25. cListview.startAnimation(anim);  

最后来看看动画效果把:

由于是第一次写博客,有不足之处望各位大神提出意见和建议,共同进步。谢谢!

转载请附上:http://blog.csdn.net/vipzjyno1/article/details/20623401

DEMO源码下载链接:

http://download.csdn.net/detail/vipzjyno1/7000355

时间: 2025-01-19 09:21:01

仿火车出票效果的相关文章

PS如何把可爱的小女孩图片转为细腻的仿手绘效果

  PS如何把可爱的小女孩图片转为细腻的仿手绘效果            原图 最终效果 <点小图查看大图> 1.新建一个图层,涂上背景. 2.再新建一个图层,覆盖上头发和用背景色涂上头发的反光,头发边缘处可以虚化一下(比如用橡皮擦擦一下). 3.回到原图层(小萝莉)调色,首先是降低饱和度,再调一下可选颜色,调色时主要是看肤色,头发已经新建图层覆盖了颜色,可以暂时忽略它. 分类: PS图片处理

PS怎么把美女头像转为仿手绘效果

  PS怎么把美女头像转为仿手绘效果           原图   最终效果 1.打开素材图片,选择菜单:图像 > 图像大小,把分辨率设置大一点,如下图. 2.把背景图层复制一层. 3.按Ctrl + M 调整曲线,稍微调亮一点. 分类: PS图片处理

用PS把美女转成清爽甜美的仿手绘效果

  用Ps把美女转成清爽甜美的仿手绘效果           原图 最终效果 1.首先复制图层调尺寸大小. 2.整体提亮. 3.可选颜色. 分类: PS图片处理

Photoshop把美女转成甜美的仿手绘效果

  Photoshop把美女转成甜美的仿手绘效果              原图 最终效果 1.首先复制图层调尺寸大小. 2.整体提亮. 3.可选颜色. 分类: PS图片处理

Photoshop绘制花美男仿手绘效果

  ps教程:Photoshop绘制花美男仿手绘效果           原图 最终效果 1.调色目标:整体提亮,饱和度降低,黄色减少,增加青色. 2.调整图像大小. 分类: PS图片处理

PS把美女转为浓艳的仿手绘效果

      PS把美女转为浓艳的仿手绘效果         原图 最终效果 1.修改图片分辨率,200~300都行,像素大小10M左右就够了,大了容易卡. 2.然后就是调色啦,色阶感觉还可以. 3.把背景层复制两层,图层1副本模式为柔光,把图层1中间值,数值5. 4.在图层1副本上面执行滤镜--其它--高反差保留,数值85,然后ctrl+e向下合并图层. 分类: PS图片处理

Photoshop把美女图片转为秀气的仿手绘效果

  Photoshop把美女图片转为秀气的仿手绘效果           最终效果 原图 1.首先复制图层调尺寸大小. 2.整体提亮. 3.可选颜色. 4.刷一层淡淡颜色. 分类: PS图片处理

PS结合SAI把小女孩的图片转成漂亮的仿手绘效果

  PS结合SAI把小女孩的图片转成漂亮的仿手绘效果          转手绘需要一些手绘功底,拿到照片后,我们可以先调色,局部有不满意的部分用液化滤镜修复一下;然后更换背景,再在sai里面画五官和头发等. 原图 最终效果 1.打开一张图,首先复制一层,然后去液化,因为是练习图,所以可以随自己喜好来.液化完成后,我们随便用什么工具把背景选出来,我用的是"快速选择"工具,给她换个背景. 2.然后反选给人物调色. 3.我们去思考头发,画笔工具取下圆颜色,我要画偏棕色一点,所以高光的位置轻轻

photoshop把美女照片设计转成可爱仿手绘效果

  photoshop把美女照片设计转成可爱的仿手绘效果.本教程教大家如何使用photoshop加sai把美女照片设计转成可爱清爽的仿手绘效果! 即使没有绘画功底也可以轻松get!教程主要难点是细节的把握,先了解清楚构造,掌握一套有效的绘制方法,注意高光部分,尽量把五官和肤色处理通透一点 分类: PS入门教程