仿饿了么购物车下单效果

火龙裸先生 火龙裸先生     2022-08-19     542

关键词:

仿饿了么购物车下单效果

前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。 效果图如下:

主要的功能: 就是左侧展示分类,右侧展示分类下商品的,点击右侧分类下的商品,如果商品是套餐类型的话,点击可以看套餐详情,下单选择完商品后,可以在购物车里面添加或减少商品数量。

主要功能实现: 1:分类及商品及购物车里面商品数量的联动效果 2:底部购物车商品列表 3:选择左侧分类效果 4:添加商品是有0到1,减少商品有1到0动画效果 5:下单动画

1:分类及商品及购物车里面商品数量的联动效果

商品的分类和商品展示分别是两个列表,每一个商品的数量取商品的number、商品分类是取每一个分类下的商品list里面遍历商品取商品数量之和。然后商品列表的 GoodsAdapter里面有一个参数传的是商品分类的CatograyAdapter,当下单时减少或则添加商品时,都会调 MainActivityhandlerCarNum方法。 减少时type传0,添加时传1。通过一个SparseArray,key是商品的product_id,value为商品的下单个数。1:当添加商品都会传入一个商品对象goodsBean,通过product_id取到这个商品对象,如果商品对象为空时,给传入的对象下单数量goodsBean.setNum(1),否则goodsBean.setNum(++i)。2:当减少商品时,通过product_id取到这个商品对象,通过对象取对象的下单数量如果小与2的时候goodsBean.setNum(0),并将该对象从SparseArray中remove否goodsBean.setNum(--i)。最后调update方法更新GoodsAdapter,CatograyAdapter.

 1     public void handlerCarNum(int type, GoodsBean goodsBean, boolean refreshGoodList){
 2         if (type == 0) {
 3             GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
 4             if(temp!=null){
 5                 if(temp.getNum()<2){
 6                     goodsBean.setNum(0);
 7                     selectedList.remove(goodsBean.getProduct_id());
 8                 }else{
 9                     int i =  goodsBean.getNum();
10                     goodsBean.setNum(--i);
11                 }
12             }
13         } else if (type == 1) {
14             GoodsBean temp = selectedList.get(goodsBean.getProduct_id());
15             if(temp==null){
16                 goodsBean.setNum(1);
17                 selectedList.append(goodsBean.getProduct_id(), goodsBean);
18             }else{
19                 int i= goodsBean.getNum();
20                 goodsBean.setNum(++i);
21             }
22         }
23         update(refreshGoodList);
24     }
 1  //刷新布局 总价、购买数量等
 2     private void update(boolean refreshGoodList){
 3         int size = selectedList.size();
 4         int count =0;
 5         for(int i=0;i<size;i++){
 6             GoodsBean item = selectedList.valueAt(i);
 7             count += item.getNum();
 8             totleMoney += item.getNum()*Double.parseDouble(item.getPrice());
 9         }
10         tv_totle_money.setText("¥"+String.valueOf(df.format(totleMoney)));
11         totleMoney = 0.00;
12         if(count<1){
13             bv_unm.setVisibility(View.GONE);
14         }else{
15             bv_unm.setVisibility(View.VISIBLE);
16         }
17 
18         bv_unm.setText(String.valueOf(count));
19 
20         if(productAdapter!=null){
21             productAdapter.notifyDataSetChanged();
22         }
23 
24         if(goodsAdapter!=null){
25             goodsAdapter.notifyDataSetChanged();
26         }
27 
28         if(catograyAdapter!=null){
29             catograyAdapter.notifyDataSetChanged();
30         }
31 
32         if(bottomSheetLayout.isSheetShowing() && selectedList.size()<1){
33             bottomSheetLayout.dismissSheet();
34         }
35     }

2:底部购物车商品列表

点击购物车查看购物车列表时,就是给含有下单商品的HashMap作为参数传入ProductAdapter中,在购物车中添加或减少商品数量同样是调 MainActivityhandlerCarNum方法。 除此之外,购物车列表弹起的效果可以用一个bottomsheet效果。as直接集成 compile'com.flipboard:bottomsheet-core:1.5.1'即可。

3:选择左侧分类效果

由于选择分类时,既要改变分类的背景色也要改变选择分类文字的颜色,就不能直接在xml里面设置了,需要在getview里面根据外面传进来选择的selection与position比较后设置。

1  public void setSelection(int selection) {
2         this.selection = selection;
3     }
1  if (position == selection) {
2             viewholder.tv_catogray.setBackgroundResource(R.drawable.rec_red_left_stroke);
3             viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.black));
4         } else {
5             viewholder.tv_catogray.setBackgroundResource(R.drawable.empty);
6             viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.gray));
7         }

4:添加商品是有0到1,减少商品有1到0动画效果

其实动画效果做起来也不是特别复杂,首先要搞清android的几种动画效果,分为在Android3.0(即API Level11)以前,Android仅支持2种动画:分别是Frame Animation(逐帧动画)和Tween Animation(补间动画),在3.0之后Android支持了一种新的动画系统,称为:Property Animation(属性动画)。 最常用的补间动画最常用的4中效果如下: 渐变透明度动画效果 渐变尺寸伸缩动画效果 画面转换位置移动动画效果 画面转移旋转动画效果

添加商品是有0到1,减少商品有1到0动画效果其实就是利用了translate、rotate水平位移和旋转动画效果。

 1  //显示减号的动画
 2     private Animation getShowAnimation(){
 3         AnimationSet set = new AnimationSet(true);
 4         RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
 5         set.addAnimation(rotate);
 6         TranslateAnimation translate = new TranslateAnimation(
 7                 TranslateAnimation.RELATIVE_TO_SELF,2f
 8                 ,TranslateAnimation.RELATIVE_TO_SELF,0
 9                 ,TranslateAnimation.RELATIVE_TO_SELF,0
10                 ,TranslateAnimation.RELATIVE_TO_SELF,0);
11         set.addAnimation(translate);
12         AlphaAnimation alpha = new AlphaAnimation(0,1);
13         set.addAnimation(alpha);
14         set.setDuration(500);
15         return set;
16     }
17     //隐藏减号的动画
18     private Animation getHiddenAnimation(){
19         AnimationSet set = new AnimationSet(true);
20         RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f);
21         set.addAnimation(rotate);
22         TranslateAnimation translate = new TranslateAnimation(
23                 TranslateAnimation.RELATIVE_TO_SELF,0
24                 ,TranslateAnimation.RELATIVE_TO_SELF,2f
25                 ,TranslateAnimation.RELATIVE_TO_SELF,0
26                 ,TranslateAnimation.RELATIVE_TO_SELF,0);
27         set.addAnimation(translate);
28         AlphaAnimation alpha = new AlphaAnimation(1,0);
29         set.addAnimation(alpha);
30         set.setDuration(500);
31         return set;
32     }

5:下单动画

下单动画首先要获取添加商品时的初始位置坐标,通过getLocationInWindow方法获取初始位置的心x,y坐标,然后获取添加商品要消失的地方的坐标,一般都选择购物车logo的坐标。然后计算x,y的位移值后,通过TranslateAnimation转换移动效果,x,y同时移动就实现了抛物线的效果。最后不要忘记设置当动画结束的时候隐藏抛过来的小图标。

 1 public void setAnim(final View v, int[] startLocation) {
 2         anim_mask_layout = null;
 3         anim_mask_layout = createAnimLayout();
 4         anim_mask_layout.addView(v);//把动画小球添加到动画层
 5         final View view = addViewToAnimLayout(anim_mask_layout, v, startLocation);
 6         int[] endLocation = new int[2];// 存储动画结束位置的X、Y坐标
 7         tv_car.getLocationInWindow(endLocation);
 8         // 计算位移
 9         int endX = 0 - startLocation[0] + 40;// 动画位移的X坐标
10         int endY = endLocation[1] - startLocation[1];// 动画位移的y坐标
11 
12         TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0);
13         translateAnimationX.setInterpolator(new LinearInterpolator());
14         translateAnimationX.setRepeatCount(0);// 动画重复执行的次数
15         translateAnimationX.setFillAfter(true);
16 
17         TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
18         translateAnimationY.setInterpolator(new AccelerateInterpolator());
19         translateAnimationY.setRepeatCount(0);// 动画重复执行的次数
20         translateAnimationY.setFillAfter(true);
21 
22         AnimationSet set = new AnimationSet(false);
23         set.setFillAfter(false);
24         set.addAnimation(translateAnimationY);
25         set.addAnimation(translateAnimationX);
26         set.setDuration(800);// 动画的执行时间
27         view.startAnimation(set);
28         // 动画监听事件
29         set.setAnimationListener(new Animation.AnimationListener() {
30             // 动画的开始
31             @Override
32             public void onAnimationStart(Animation animation) {
33                 v.setVisibility(View.VISIBLE);
34             }
35 
36             @Override
37             public void onAnimationRepeat(Animation animation) {
38                 // TODO Auto-generated method stub
39             }
40 
41             // 动画的结束
42             @Override
43             public void onAnimationEnd(Animation animation) {
44                 v.setVisibility(View.GONE);
45             }
46         });
47 
48     }

最后肯定少不了源码下载地址:shopcar

仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮

转载请标明出处:http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门:喜欢的话,随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文,酷炫Path动画已经预告了,今... 查看详情

饿了么购物车动画(代码片段)

前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来... 查看详情

仿饿了么首页导航栏(viewpager)

1、需求分析在饿了么首页中我们能看到这样的布局(如下图)。红框内是一个可以左右滑动的页面,每一个页面类似于九宫格,都有可供点击图标。对于这样的布局,我在网上找了很久都没有找到相关的名称,所以我这里暂时... 查看详情

基于vue2+nuxt构建的高仿饿了么(2018版)(代码片段)

前言高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vuessr的同学参考和学习项目地址如遇网络不佳,请移步国内镜像加速节点效果演示查看demo请戳这里(请用chrome手机模式预览)移动端扫描下方二维码API接口文... 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用:vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接:http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括:MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问://引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

基于springboot+redis+vue仿饿了么外卖系统(后台+移动端)

优质文章,第一时间送达 六、运行效果前端展示(点击图片查看大图)后台管理(点击图片查看大图) 七、源码下载源码下载云盘链接:链接:https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码:lry9复制这... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前,首先我们需要安装Node环境,安装Node很简单,只需要去官网下载http://nodejs.cn/download/,下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。检... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提:已安装好node、npm、vue、vue-cli、stylus(此项目使用stylus来编译)2.开发软件:GoogleChrome(建议安装插件vue-devtools,方便调试),webstorm/sublimeText/VSCode(推荐使用webstorm,sublime和VSCode需要安装相应的插件)3.... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题技术点:使用slot进行组件间的通信;父组件给子组件传值(子组件里面通过props接收父组件传过来的数据)查看链接:https://blog.csdn.net/sinat_17775997/article/... 查看详情

css贝塞尔曲线模仿饿了么购物车小球动画

在线观看贝塞尔曲线值:传送门在线观看动画效果:传送门代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JSBin</title><style> 查看详情

饿了么android版下拉筛选效果是如何实现的呢

选择首行,然后:数据——筛选——自动筛选,就可以了参考技术A最简单有效的法,用代码画一条出来,加在framelayout里就ok了 参考技术B1、点餐按钮点击动画2、利用二次贝塞尔曲线做成下单特效 参考技术C没明白你说的什么意... 查看详情

【css动画】饿了么加入购物车抛物线动画实现

...肥宅,手动滑稽),或者在淘宝购物的时候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:所以百度了一下前端使用css实现这个效果,然后就自己就照葫芦画瓢的写了一个小小的demo,完全当作学习了一... 查看详情

前端实战项目:vue.js实现外卖平台webapp,饿了么项目的翻版

...为一体的移动端点餐APP1.点餐页面点选商品后自动添加到购物车,并计算好总价,在商品列表、购物车列表和商品详情页都可以随意增减数目,此外左侧商品分类和右侧的商品相互关联,通过better-scroll插件滑动商品列表时,相应... 查看详情

vuejs仿美团,饿了么项目之——商品数量加减篇

...品数量的加减功能组件,就叫cartcontrol.vue吧。新增个底部购物车组件,叫shopcart.vue吧。在good.vue中引入并注册组件。cartcontrol.vue中,通过props来接收list对象因为我在json中没有设置数量这个key,所以需要全局用vue.set进行注册这个... 查看详情

用vue制作饿了么首页

...sp;上面的头部(商家信息),  中间路由  购物车每部分先占住自己位置,然后挨个将这三部分分别实现完整。我理解的vue里,index.html好比是车轱辘,main.js就好比是变速箱,App.vue就好比是汽车方向盘和档把子,其... 查看详情

一个基于springboot+redis+vue仿饿了么外卖系统(后台+移动端),可二次开发接私活!...(代码片段)

...PN翻墙被抓了!已大规模行政处罚!该项目是一款仿饿了么外卖平台系统,参考了一些现有其他开源外卖项目,在此基础之上,做了优化处理,并使用SpringBoot+Vue技术开发。可用于学习使用。01项目说明... 查看详情