网购App购物车点击动画实现,网购app购物车动画,在做网购APP时,很多的
网购App购物车点击动画实现,网购app购物车动画,在做网购APP时,很多的
在做网购APP时,很多的app在点击购物车时都有一个图片动画效果,比较形象,我目前做的项目也涉及到了,把我使用的方法做个笔记:先看一个简单的截图:我们在点击列表中带+号的购物车时,会有一个图片多点击的购物车位置跑到右上角的购物车中,同时右上角的购物车数量增加1,实现原理很简单,就是我们常用的位移动画:
首先要个动画层ViewGroup anim_mask_layout;动画图片就在这个动画层上面移动:
创建动画层代码:
public ViewGroup createAnimLayout() {ViewGroup rootView = (ViewGroup)this.getActivity().getWindow().getDecorView();LinearLayout animLayout = new LinearLayout(getActivity());LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);animLayout.setLayoutParams(lp);animLayout.setId(Integer.MAX_VALUE);animLayout.setBackgroundResource(android.R.color.transparent);rootView.addView(animLayout);return animLayout;}
添加动画视图到动画层:
public View addViewToAnimLayout(final ViewGroup vg, final View view,int[] location) {int x = location[0];int y = location[1];LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);lp.leftMargin = x;lp.topMargin = y;view.setLayoutParams(lp);return view;}
最后就是动画实现:其中的第一个参数就是在你调用这个方法时传入的动画图片,第二个参数是你传入图片所在的Location:
public void setTranslateAnim(final View v, int[] start_location) {if(anim_mask_layout==null)anim_mask_layout = createAnimLayout();anim_mask_layout.addView(v);//把动画视图添加到动画层final View view = addViewToAnimLayout(anim_mask_layout, v,start_location);int[] end_location = new int[2];// 这是用来存储动画结束位置的X、Y坐标shopCart.getLocationInWindow(end_location);// shopCart是那个购物车// 计算位移int endX = 0 ;// 动画位移的X坐标int endY = end_location[1] - start_location[1];// 动画位移的y坐标TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0);translateAnimationX.setInterpolator(new LinearInterpolator());translateAnimationX.setRepeatCount(0);// 动画重复执行的次数translateAnimationX.setFillAfter(true);TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0,0, endY);translateAnimationY.setInterpolator(new AccelerateInterpolator());translateAnimationY.setRepeatCount(0);// 动画重复执行的次数translateAnimationX.setFillAfter(true);AnimationSet set = new AnimationSet(false);set.setFillAfter(false);set.addAnimation(translateAnimationY);set.addAnimation(translateAnimationX);set.setDuration(800);// 动画的执行时间view.startAnimation(set);// 动画监听事件set.setAnimationListener(new AnimationListener() {// 动画的开始@Overridepublic void onAnimationStart(Animation animation) {v.setVisibility(View.VISIBLE);}@Overridepublic void onAnimationRepeat(Animation animation) {// TODO Auto-generated method stub}// 动画的结束@Overridepublic void onAnimationEnd(Animation animation) {v.setVisibility(View.GONE);anim_mask_layout.removeView(view);// buyNum++;//让购买数量加1}});}
用户点评