android 仿美团购物车,Android仿美团、饿了购物车功能

效果截图

关键代码就是下面这个方法，可直接复制到你的项目，修改部分地方即可。

private void gouwuchedonghua() {

// 贝塞尔曲线起始点

int[] startPoint = new int[2];

// 贝塞尔曲线结束点

int[] endPoint = new int[2];

// 控制点

int[] relativeLayoutPoint = new int[2];

// 获取坐标点在页面布局中的位置

iv_jiahao.getLocationInWindow(startPoint);//起点 加号控件

gouwuche.getLocationInWindow(endPoint);//终点 购物车图片控件

rv_xq.getLocationInWindow(relativeLayoutPoint);//控制点 RecyclerView控件，如果加号位置是固定的一个，该控件可以换成整个布局的id

// 赋值贝塞尔曲线用到的点

PointF startF = new PointF();//起始点

PointF endF = new PointF();//结束点

PointF controllF = new PointF();//控制点

startF.x = startPoint[0];//起点横坐标

startF.y = startPoint[1] - relativeLayoutPoint[1];//起点纵坐标

endF.x = endPoint[0];//终点横坐标

endF.y = endPoint[1] - relativeLayoutPoint[1];//终点纵坐标

controllF.x = endF.x;

controllF.y = startF.y;

final ImageView imageView = new ImageView(this);

linearLayout_point.addView(imageView);

// imageView.setImageResource(R.mipmap.gouwuche);

Glide.with(this).load(Urls.BASE_URL + "/pro_photo/" + list.get(position).getImg()).error(R.mipmap.yuanxingtupian).into(imageView);

imageView.getLayoutParams().width = 64;//动画图片的宽

imageView.getLayoutParams().height = 64;//动画图片的高

imageView.setVisibility(View.VISIBLE);

imageView.setX(startF.x);

imageView.setY(startF.y);

// 估值器

ValueAnimator valueAnimator = ValueAnimator.ofObject(new BezierTypeEvaluator(controllF), startF, endF);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

// 获取曲线坐标

PointF pointF = (PointF) animation.getAnimatedValue();

imageView.setX(pointF.x);

imageView.setY(pointF.y);

}

});

valueAnimator.addListener(new Animator.AnimatorListener() {

@Override

public void onAnimationStart(Animator animation) {

}

@Override

public void onAnimationEnd(Animator animation) {

linearLayout_point.removeView(imageView);

}

@Override

public void onAnimationCancel(Animator animation) {

}

@Override

public void onAnimationRepeat(Animator animation) {

}

});

// 购物车图标从缩小到放大的实现 属性动画，缩放

ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(gouwuche, "scaleX", 0.6f, 1.0f);

ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(gouwuche, "scaleY", 0.6f, 1.0f);

// 加速掉落

objectAnimatorX.setInterpolator(new AccelerateInterpolator());

objectAnimatorY.setInterpolator(new AccelerateInterpolator());

//设置动画播放顺序

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.play(objectAnimatorX).with(objectAnimatorY).after(valueAnimator);

// 设置动画时间

animatorSet.setDuration(1000);

// 开始动画

animatorSet.start();

}

// 估值器

public class BezierTypeEvaluator implements TypeEvaluator{

private PointF controllF;

public BezierTypeEvaluator(PointF controllF) {

this.controllF = controllF;

}

@Override

public PointF evaluate(float fraction, PointF startValue, PointF endValue) {

PointF pointCur = new PointF();

// 基于三阶贝塞尔曲线公式，计算出曲线坐标点

// B(t)=(1-t)²P0+2(1-t)P1+t²P2，t€[0,1]

pointCur.x = (1 - fraction) * (1 - fraction) * startValue.x + 2 * fraction * (1 - fraction) * controllF.x + fraction * fraction * endValue.x;

pointCur.y = (1 - fraction) * (1 - fraction) * startValue.y + 2 * fraction * (1 - fraction) * controllF.y + fraction * fraction * endValue.y;

return pointCur;

}

}

页面布局代码：

注意：布局最外层一定要用RelativeLayout(相对布局)，我一开始用的LinearLayout(线性布局)，每次动画执行购物车那一栏总是往起蹦跶，也可以尝试其它布局。