自定义商品加入购物车动画

自定义加入购物车动画

最近有个加入购物车的动画需求,类似叮咚买菜的效果,先看效果

可以看到是图片裁剪成圆角,利用贝塞尔曲线,加入缩小旋转等动画效果

由于我的图片加载框架用的是glide,这里需要注意的是调用Glide Api不能错,不然无法进行bitmap裁剪,下面看代码

1.图片加载(Glide)

Glide.with(mActivity).load(listBean.getMainPicture()).asBitmap().into(holder.mIvIcon);

2.图片裁剪圆形加入贝塞尔动画

public static void shopCarAnimator(Activity activity, ImageView imageView,View cartView, final ViewGroup parentView,final OnAnimatorListener listener) {//第一步：//创造出执行动画的主题---imageView//代码new一个imageView，图片资源是上面的imageView的图片// (这个图片就是执行动画的图片，从开始位置出发，经过一个抛物线（贝塞尔曲线），移动到购物车里)if (activity == null || imageView == null || cartView == null || parentView == null) return;final ImageView goods = new ImageView(activity);Bitmap image = ((BitmapDrawable) imageView.getDrawable()).getBitmap();Drawable drawable = new BitmapDrawable(toRoundBitmap(image));goods.setImageDrawable(drawable);//设置RelativeLayout容器(这里必须设置RelativeLayout 设置LinearLayout动画会失效)RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(300, 300);//把动画view添加到动画层parentView.addView(goods, params);//第二步://得到父布局的起始点坐标（用于辅助计算动画开始/结束时的点的坐标）int[] parentLocation = new int[2];//获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）parentView.getLocationInWindow(parentLocation);int startLoc[] = new int[2];//获取商品图片在屏幕中的位置imageView.getLocationInWindow(startLoc);//得到购物车图片的坐标(用于计算动画结束后的坐标)int endLoc[] = new int[2];cartView.getLocationInWindow(endLoc);//第三步://正式开始计算动画开始/结束的坐标//开始掉落的商品的起始点：商品起始点-父布局起始点+该商品图片的一半float startX = startLoc[0] - parentLocation[0] + imageView.getWidth() / 2;// 动画开始的X坐标float startY = startLoc[1] - parentLocation[1] + imageView.getHeight() / 2;//动画开始的Y坐标//商品掉落后的终点坐标：购物车起始点-父布局起始点+购物车图片的1/5float toX = endLoc[0] - parentLocation[0] - imageView.getWidth()/5;float toY = endLoc[1] - parentLocation[1];//第四步://计算中间动画的插值坐标，绘制贝塞尔曲线Path path = new Path();//移动到起始点（贝塞尔曲线的起点）path.moveTo(startX, startY);//第一个起始坐标越大，贝塞尔曲线的横向距离就会越大 toX,toY:为终点path.quadTo((startX + toX) / 2, startY, toX, toY);final PathMeasure pathMeasure = new PathMeasure(path, false);//实现动画具体博客可参考 鸿洋大神的https://blog.csdn.net/lmj623565791/article/details/38067475ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, pathMeasure.getLength());AnimatorSet animSet = new AnimatorSet();//缩放ObjectAnimator anim1 = ObjectAnimator.ofFloat(goods, "scaleX", 1.0f, 0.2f).setDuration(400);ObjectAnimator anim2 = ObjectAnimator.ofFloat(goods, "scaleY", 1.0f, 0.2f).setDuration(400);//顺时针旋转360°ObjectAnimator anim3 = ObjectAnimator.ofFloat(goods, "rotation", 0f, 360f).setDuration(200);animSet.play(anim1).with(anim2).with(anim3).with(valueAnimator);//设置动画时间valueAnimator.setDuration(400);//LinearInterpolator补间器:它的主要作用是控制动画的变化速率valueAnimator.setInterpolator(new LinearInterpolator());valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) { //更新动画float value = (Float) animation.getAnimatedValue();float[] currentPosition = new float[2];pathMeasure.getPosTan(value, currentPosition, null);goods.setTranslationX(currentPosition[0]);//改变了ImageView的X位置goods.setTranslationY(currentPosition[1]);//改变了ImageView的Y位置}});//第五步:animSet.start();//第六步://对动画添加监听animSet.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {//onAnimationStart()方法会在动画开始的时候调用}//onAnimationEnd()方法会在动画结束的时候调用@Overridepublic void onAnimationEnd(Animator animation) {//把移动的图片imageView从父布局里移除parentView.removeView(goods);if (listener != null) {listener.onAnimationEnd(animation);}}@Overridepublic void onAnimationCancel(Animator animation) {//onAnimationCancel()方法会在动画被取消的时候调用}@Overridepublic void onAnimationRepeat(Animator animation) {//onAnimationRepeat()方法会在动画重复执行的时候调用}});}public interface OnAnimatorListener {void onAnimationEnd(Animator animator);}/*** 转换图片成圆形** @param bitmap 传入Bitmap对象* @return*/public static Bitmap toRoundBitmap(Bitmap bitmap) {int width = bitmap.getWidth();int height = bitmap.getHeight();float roundPx;float left, top, right, bottom, dst_left, dst_top, dst_right, dst_bottom;if (width <= height) {roundPx = width / 2;left = 0;top = 0;right = width;bottom = width;height = width;dst_left = 0;dst_top = 0;dst_right = width;dst_bottom = width;} else {roundPx = height / 2;float clip = (width - height) / 2;left = clip;right = width - clip;top = 0;bottom = height;width = height;dst_left = 0;dst_top = 0;dst_right = height;dst_bottom = height;}Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(output);final int color = 0xff424242;final Paint paint = new Paint();final Rect src = new Rect((int) left, (int) top, (int) right, (int) bottom);final Rect dst = new Rect((int) dst_left, (int) dst_top, (int) dst_right, (int) dst_bottom);final RectF rectF = new RectF(dst);paint.setAntiAlias(true);// 设置画笔无锯齿canvas.drawARGB(0, 0, 0, 0); // 填充整个Canvaspaint.setColor(color);// 以下有两种方法画圆,drawRounRect和drawCircle// canvas.drawRoundRect(rectF, roundPx, roundPx, paint);// 画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。canvas.drawCircle(roundPx, roundPx, roundPx, paint);paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));canvas.drawBitmap(bitmap, src, dst, paint); //以Mode.SRC_IN模式合并bitmap和已经draw了的Circlereturn output;}

3.调用改方法传入指定参数即可

以上就是一个添加购物车动画完成啦,感谢各位看官~

自定义商品加入购物车动画相关推荐

支付宝小程序商品加入购物车动画
思路:一个盒子做匀速运动,盒子里的小球做变速运动 js Page({data: {tran: [ ],//传参//1小球纵向移动距离//0小球横向移动距离//2//购物车宽度clientY: 0,// ...
html 购物车动画效果,Jquery商品飞入购物车动画效果实例展示
刚接手一个小玩意,值得收藏分享给大家! <产品图片飞入购物车的jQuery动画> 无标题文档 *{ margin:0; padding:0;} .good-area{ width:200p ...
安卓自定义view仿小米商城购物车动画
通过自定义View与ViewGroup实现小米商城购物车效果用到的知识点自定义View 自定义ViewGroup 贝塞尔曲线原理通过贝塞尔曲线实现商品抛入购物车的路径自定义ViewGroup ...
android添加商品到购物车,Android使用动画动态添加商品进购物车
本文实例为大家分享了Android添加商品进购物车的具体代码,供大家参考,具体内容如下 1.首先展示下效果图 2.讲一下思路,小球由加号位置运动到购物车位置,首先得获得这两个点在整个屏幕中的坐标,然后 ...
iOS动画之【添加商品到购物车】：将商品图片icon 移动到购物车iocn的位置
文章目录引言 I.demo下载 II .代码实现 2.1 商品的cell 2.2 开(下)单界面 2.3 下单商品的控制器VC 2.4 动画处理工具类 JoinCartAnimationTool s ...
android长按加入购物车,《Android APP可能有的东西》之UI篇：加入购物车动画
很多电商app的加入购物车的动作会要求加上动画效果:飞进购物车,想来也合理,在listview界面时商品快速加入购物车,一直toast用户加入成功好像不太正常,所以添加一个动画,用户自然就懂了,而且也 ...
android小球爆炸动画,自定义View抛物线爆炸动画
一.最近在写商城方面的业务,需求在商品加如购物车过程中,实现一个抛物线加入的动画. 先看我写的效果图: ezgif.com-video-to-gif (3).gif 二.编写前的设计思路是: Imag ...
iOS 手机淘宝加入购物车动画分析
iOS 手机淘宝加入购物车动画分析 1.最终效果仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_p ...
iOS手机淘宝加入购物车动画分析
1.最终效果仿淘宝动画 2.核心代码 _cartAnimView=[[UIImageView alloc] initWithFrame:CGRectMake(_propView.frame.size ...

自定义商品加入购物车动画

自定义商品加入购物车动画相关推荐

最新文章

热门文章