电商项目购物车简单分析

前几天写了个购物车demo,期间有几个朋友找我讨论这个问题,我这里重新分析下购物车的简单原理吧。文章底部有demo链接,本文只会简单分析下实现过程,而不太多涉及代码部分。

电商项目购物车简单分析

加入购物车抛物效果

很多电商app里都有这个效果,其实也就是在点击了加入购物车按钮后的一个将商品抛到购物车里的动画效果。因为商品图片是在tableViewCell里的,所以我们要想办法将商品图片传递给控制器,来完成这一系列的抛物动画。我们可以使用block或者delegate,看个人喜好。我这里使用delegate,在点击购买按钮后,就将商品图片传递给控制器。核心代码:

然后在控制器实现代理方法,成为cell的代理对象。在这个代理方法里,获取到被点击的模型,加入我们定义的一个临时购物车模型数组里,并转换商品图片的坐标系,参照与当前控制器的view,并调用startAnimation方法开始执行动画。

在startAnimation方法里,我根据商品图片创建了一个layer来完成动画,并绘制动画的抛物路径,这里我使用UIBezierPath,给定一个起点为商品图片的位置,给定一个终点为购物车位置,再给定一个贝塞尔曲线的控制点让路径有一个弧度。然后开启组动画groupAnimation,将要执行的一系列动画添加到我们自定义的layer上。

在groupAnimation方法里,禁用tableView的交互。然后我添加了一个抛物路径的帧动画和放大、缩小layer的基础动画,并将这三个动画加入一个组动画里执行。最后实现代理方法animationDidStop,在动画停止后做一些操作。

在animationDidStop方法里,在组动画完成后开启tableView的交互。移除我们用来做动画自定义layer图层,并实现购物车的简单抖动动画和商品数量渐出效果。至此,加入购物车的动画效果也就完成了。

购物车商品增减

实现同一个商品数量增加、商品单选、多选、反选的原理其实非常简单,只要记住我们操作的永远是商品模型,界面上显示的内容都是根据模型里的数据来展示的,增加、减少商品数量也是修改模型里对应的属性,选中、不选中也是在模型里定义一个是否被选中的布尔类型属性。有了这些理解,我们实现起来就比较方便了,需要注意我们修改cell中的数据,也就是修改当前cell对于的模型时,我们需要使用delegate将这个操作传递给控制器来实现。这样管理起来非常的方便,具体看demo,我注释已经写得非常多了,可能单选、多选、反选逻辑和你的需求不匹配,但只要知道了这个原理都是可以随意修改的。

demo采用swift语言、纯代码编写ui、autolayout技术布局,如果对swift语言还不熟悉的朋友,可以参考注释来看,然后自己使用熟悉的语言实践。

demo地址:https://github.com/6ag/shoppingCart

  • 4
  • 2,558 views
    A+
发布日期:2015年11月27日  所属分类:iOS
标签:
六阿哥

目前评论:4   其中:访客  3   博主  1

  1. avatar location 0
  2. avatar 超哥 0
  3. avatar 幻音丶小涛 0
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: