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

BaseAnimation 转载的链接：

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

 

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的布局是高度是不一定的话，就会造成影响，便找了一些资料，使用了以下方法：

 

/** ListView 总高度 */
public static int totalHeight = 0;

public static void setListViewHeightBasedOnChildren(ListView listView) {
    ListAdapter listAdapter = listView.getAdapter();
    if (listAdapter == null) {
        return;
    }
    totalHeight = 0;
    // 由于ADD了个footer，所以总量减去1
    Log.d("listAdapter.getCount()", "" + listAdapter.getCount());
    for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {
        View listItem = listAdapter.getView(i, null, listView);
        listItem.measure(0, 0);
        totalHeight += listItem.getMeasuredHeight();
        Log.d("getMeasuredHeight", "" + listItem.getMeasuredHeight());
    }
    totalHeight = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));
}

/** ListView 总高度 */	public static int totalHeight = 0;	public static void setListViewHeightBasedOnChildren(ListView listView) {		ListAdapter listAdapter = listView.getAdapter();		if (listAdapter == null) {			return;		}		totalHeight = 0;		// 由于ADD了个footer，所以总量减去1		Log.d("listAdapter.getCount()", "" + listAdapter.getCount());		for (int i = 0, len = listAdapter.getCount() - 1; i < len; i++) {			View listItem = listAdapter.getView(i, null, listView);			listItem.measure(0, 0);			totalHeight += listItem.getMeasuredHeight();			Log.d("getMeasuredHeight", "" + listItem.getMeasuredHeight());		}		totalHeight = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1));	}

计算得到了总高度。

 

 

 

 

 

 

 

 

 

5）实现动画效果

解决：

 

      /**
* 启动打印订单动画
*/
rivate void startAnimation() {
anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);
anim.setDuration(1000);
anim.setFillAfter(true);
anim.setAnimationListener(new AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        // TODO Auto-generated method stub
        cListview.clearAnimation();
    }
});
cListview.startAnimation(anim);

/**	 * 启动打印订单动画	 */	private void startAnimation() {		anim = new TranslateAnimation(0.0f, 0.0f, -totalHeight, 0);		anim.setDuration(1000);		anim.setFillAfter(true);		anim.setAnimationListener(new AnimationListener() {			@Override			public void onAnimationStart(Animation animation) {				// TODO Auto-generated method stub			}			@Override			public void onAnimationRepeat(Animation animation) {				// TODO Auto-generated method stub			}			@Override			public void onAnimationEnd(Animation animation) {				// TODO Auto-generated method stub				cListview.clearAnimation();			}		});		cListview.startAnimation(anim);	}

 

 

 

 

 

 

 

 

 

最后来看看动画效果把：

 

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

转载请附上：

DEMO源码下载链接：