android 仿美团购物车,Android仿美团、饿了购物车功能
效果截图关键代码就是下面这个方法,可直接复制到你的项目,修改部分地方即可。private void gouwuchedonghua() {//贝塞尔曲线起始点int[] startPoint = new int[2];//贝塞尔曲线结束点int[] endPoint = new int[2];//控制点int[] relativeLayoutPoin...
效果截图
关键代码就是下面这个方法,可直接复制到你的项目,修改部分地方即可。
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(线性布局),每次动画执行购物车那一栏总是往起蹦跶,也可以尝试其它布局。
更多推荐
所有评论(0)