购物车动画Android开发经验谈

高级UI-实现添加到购物车的动画效果

2016-06-14  本文已影响778人  289346a467da

一、动画分析

1、实现移动动画的类:TranslateAnimation

分析TranslateAnimation:

TranslateAnimation是移动的动画效果。它有三个构造函数,分别是:

> 1.public TranslateAnimation(Context context,AttributeSet attrs)略过

> 2.public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

这个是我们最常用的一个构造方法,

float fromXDelta:这个参数表示动画开始的点离当前View X坐标上的差值;

float toXDelta, 这个参数表示动画结束的点离当前View X坐标上的差值;

float fromYDelta, 这个参数表示动画开始的点离当前View Y坐标上的差值;

float toYDelta)这个参数表示动画开始的点离当前View Y坐标上的差值;

如果view在A(x,y)点 那么动画就是从B点(x+fromXDelta, y+fromYDelta)点移动到C 点(x+toXDelta,y+toYDelta)点.

2、获取View坐标

int[] end_location =new int[2];// 这是用来存储动画结束位置的X、Y坐标

view.getLocationInWindow(end_location);

二、动画实现

1、创建动画层

```

privateViewGroupcreateAnimLayout() {

ViewGroup rootView = (ViewGroup)this.getWindow().getDecorView();

LinearLayout animLayout =newLinearLayout(this);

LinearLayout.LayoutParams lp =newLinearLayout.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);

returnanimLayout;

}

```

2、添加动画层,并获取开始坐标

```

private View addViewToAnimLayout(finalViewGroup vg, finalView view,

int[] location) {

intx = location[0];

inty = location[1];

LinearLayout.LayoutParams lp =newLinearLayout.LayoutParams(

LinearLayout.LayoutParams.WRAP_CONTENT,

LinearLayout.LayoutParams.WRAP_CONTENT);

lp.leftMargin= x;

lp.topMargin= y;

view.setLayoutParams(lp);

returnview;

}

```

3、开始动画

```

private voidsetAnims(finalView v, int[] start_location) {

anim_mask_layout=null;

anim_mask_layout= createAnimLayout();

anim_mask_layout.addView(v);//把动画小球添加到动画层

finalView view = addViewToAnimLayout(anim_mask_layout,v,

start_location);

int[] end_location =new int[2];// 这是用来存储动画结束位置的X、Y坐标

iv_like.getLocationInWindow(end_location);// shopCart是那个购物车

```

// 计算位移

```

intendX =0- start_location[0] +40;// 动画位移的X坐标

intendY = end_location[1] - start_location[1];// 动画位移的y坐标

TranslateAnimation translateAnimationX =newTranslateAnimation(0,

endX,0,0);

translateAnimationX.setInterpolator(newLinearInterpolator());

translateAnimationX.setRepeatCount(0);// 动画重复执行的次数

translateAnimationX.setFillAfter(true);

TranslateAnimation translateAnimationY =newTranslateAnimation(0,0,

0,endY);

translateAnimationY.setInterpolator(newAccelerateInterpolator());

translateAnimationY.setRepeatCount(0);// 动画重复执行的次数

translateAnimationX.setFillAfter(true);

AnimationSet set =newAnimationSet(false);

set.setFillAfter(false);

set.addAnimation(translateAnimationY);

set.addAnimation(translateAnimationX);

set.setDuration(800);// 动画的执行时间

view.startAnimation(set);

// 动画监听事件

set.setAnimationListener(newAnimationListener() {

// 动画的开始

@Override

public voidonAnimationStart(Animation animation) {

v.setVisibility(View.VISIBLE);

}

@Override

public voidonAnimationRepeat(Animation animation) {

//TODO Auto-generated method stub

}

// 动画的结束

@Override

public voidonAnimationEnd(Animation animation) {

v.setVisibility(View.GONE);

//处理结束完动画的逻辑

}

});

}

```

这样我们就是实现了添加到购物车的动画效果。

上一篇 下一篇

猜你喜欢

热点阅读