添加商品到购物车动画解析

引言

对于android人员来说，肯定接触过电商类的app开发，而商品的添加动画会让用户体验提升一大截。

下面我给大家介绍一下如何制作商品的添加动画，先来看一下效果图：

怎么样，是不是还不错啊，接下来我们来看一下如何做到的：



创建动画的层

/**
* 创建执行的动画层
*
* @return 动画的执行的ViewGroup
*/
private ViewGroup createAnimLayout() {
ViewGroup rootView = (ViewGroup) ((Activity) mContext).getWindow().getDecorView();
LinearLayout animLayout = new LinearLayout(mContext);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
animLayout.setLayoutParams(lp);
rootView.addView(animLayout);
return animLayout;
}

2.创建执行动画

/**
* 添加执行动画的view的布局
*
* @param view          执行动画的View
* @param startLocation 动画的开始位置
* @return 执行动画的view
*/
private View addViewToAnimLayout(View view, int[] startLocation) {
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
lp.leftMargin = startLocation[0];
lp.topMargin = startLocation[1];
view.setLayoutParams(lp);
return view;
}

3.执行动画

/**
* 执行动画
*
* @param view          执行动画的View
* @param startLocation 执行动画的起始位置坐标
*/
private void setAnim(final View view, int[] startLocation) {
anim_layout = createAnimLayout();//创建动画执行层
anim_layout.addView(view);//将动画小球添加到执行层
final View ballView = addViewToAnimLayout(view, startLocation);
int[] endLocation = new int[2];
MainActivity.shopCar.getLocationInWindow(endLocation);

int animLocationX = endLocation[0] - startLocation[0] + 80;
int animLocatiopnY = endLocation[1] - startLocation[1] + 40;
Log.e(TAG, "setAnim: X=" + animLocationX + ":Y=" + animLocatiopnY);
/**
* 创建动画
*/
//左右移动画
TranslateAnimation translateAnimationX = new TranslateAnimation(0, animLocationX, 0, 0);
translateAnimationX.setInterpolator(new LinearInterpolator());
translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
translateAnimationX.setFillAfter(true);
//上下移动画
TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, animLocatiopnY);
translateAnimationY.setInterpolator(new AccelerateInterpolator());
translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
translateAnimationX.setFillAfter(true);

//缩放动画
ScaleAnimation scaleAnimation = new ScaleAnimation(0.3f, 0.1f, 0.3f, 0.1f);
scaleAnimation.setDuration(1);
scaleAnimation.setFillAfter(true);

//动画集合
AnimationSet animationSet = new AnimationSet(false);
animationSet.setFillAfter(false);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimationX);
animationSet.addAnimation(translateAnimationY);
animationSet.setDuration(400);
ballView.startAnimation(animationSet);

animationSet.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
ballView.setVisibility(View.VISIBLE);

}

@Override
public void onAnimationEnd(Animation animation) {
ballView.setVisibility(View.GONE);
MainActivity.redCircle.setText(++n + "");
/**
* 动画结束，下面可以执行向数据库添加购买的货物
*/
}

@Override
public void onAnimationRepeat(Animation animation) {

}
});

}

好了，其实代码也不复杂，点击查看GitHub源码