废话少说，技术为主，先看效果。
Untitled5.gif
附上Demo下载地址：
首先先来说下加入购物车的动画效果，这种效果的实现主要是用到三个核心知识，坐标转化、动画、贝塞尔曲线。加入购物车按钮点击事件，实现代码如下（代码就是如此少）：https://github.com/ZhengYaWei1992/ZWShoppingCar
- (void)thingCell:(ZWThingCell *)thingCell didClickBtn:(UIButton *)btn indexPath:(NSIndexPath *)indexPath{
//把button在cell坐标转化为在tableView上的坐标
CGPoint carButtonCenter = btn.center;
//carButtonCenter是要转化的左边，thingCell是父视图，self.view是要转换到的视图界面
CGPoint point = [thingCell convertPoint:carButtonCenter toView:self.view];
//控点
CGPoint controlPoint = CGPointMake(_endPoint.x, point.y);
//创建一个layer
// self.layer = [CALayer layer];
self.layer.hidden = NO;
self.layer.frame = CGRectMake(0, 0, 40, 40);
self.layer.position = point;
self.layer.backgroundColor = [UIColor redColor].CGColor;
self.layer.cornerRadius = self.layer.frame.size.width/2;
self.layer.masksToBounds = YES;
[self.view.layer addSublayer:self.layer];
//创建关键帧
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.delegate = self;
//动画时间
animation.duration = 0.5;
//当动画完成，停留到结束位置
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
//当方法名字遇到create,new,copy,retain，都需要管理内存
CGMutablePathRef path = CGPathCreateMutable();
//设置起点
CGPathMoveToPoint(path, NULL, point.x, point.y);
CGPathAddQuadCurveToPoint(path, NULL, controlPoint.x, controlPoint.y, _endPoint.x, _endPoint.y);
//设置动画路径
animation.path = path;
//执行动画
[self.layer addAnimation:animation forKey:nil];
//释放路径
CGPathRelease(path);
}
动画结束后移除layer层。
#pragma mark -CAAnimationDelegate
//加入购物车动画结束
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
//动画结束隐藏Layer
_layer.hidden = YES;
}
接下啦你重点看下购物车的逻辑，这里我没有采用分组形式的购物车，分组形式的购物车界面之前也有写过，这里先从简单的看起，以后有时间会将分组形式的购物车整理一下。购物车的逻辑主要在于以下两个方法，全选按钮点击事件，以及创建cell的UITableView代理方法中。
全选按钮点击事件实现逻辑如下：
#pragma mark-全选按钮点击事件
- (IBAction)selecteedBtn:(UIButton *)sender {
sender.selected = !sender.isSelected;
self.selectAll = sender.isSelected;
if (_selectAll) {//全选
for (Model *model in self.dataSource) {
model.isSelected = YES;
[self.selectedArray addObject:model];
}
}else{//全不选
for (Model *model in self.dataSource) {
model.isSelected = NO;
}
[self.selectedArray removeAllObjects];
}
[self.tableView reloadData];
//这是计算总价格的方法
[self calculateTheTotalPrice];
}
选中或取消选中商品按钮的逻辑代码。这里分厂有必要说明一下，很多人在写购物车或实现多选状态的时候会出现cell复用界面错乱相关问题。其实很好解决，解决思路主要是用模型去记录按钮选中状态，然后刷新tableView的特定cell即可。核心代码即 model.isSelected = !model.isSelected;
[weakTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
//选中或取消选中按钮回调事件
cell.selectedBlock = ^(UIButton *selectedBtn,NSIndexPath *indexPath){
//*****这是避免界面重复的重点****
model.isSelected = !model.isSelected;
[weakTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
if (model.isSelected) {//选中
[weakSelf.selectedArray addObject:model];
}else{//非选中
[weakSelf.selectedArray removeObject:model];
}
//如果要是选中的和数据源一样多，就把全选按钮设置为选中
if (_selectedArray.count == _dataSource.count) {
_selectedButton.selected = YES;
}else{
_selectedButton.selected = NO;
}
[self calculateTheTotalPrice];
};
减少商品数量按钮点击事件逻辑实现代码。
//减少按钮回调
cell.subBlock = ^(UIButton *subBtn,NSIndexPath *indexpath){
NSInteger count = [weakCell.numberLabel.text integerValue];
count--;
if (count <= 0) {
return ;
}
weakCell.numberLabel.text = [NSString stringWithFormat:@"%ld",count];
model.number = count;
[_dataSource replaceObjectAtIndex:indexPath.row withObject:model];
if ([_selectedArray containsObject:model]) {
[_selectedArray removeObject:model];
[_selectedArray addObject:model];
[weakSelf calculateTheTotalPrice];
}
};
增加商品数量按钮点击事件逻辑实现代码。这里要注意，判断模型中选中的商品个数，如果选中的个数和商品个数相等，全选按钮也要做相应的变化。
//增加按钮回调
cell.addBlock = ^(UIButton *addBtn,NSIndexPath *indexPath){
NSInteger count = [weakCell.numberLabel.text integerValue];
count++;
//最多商品不超过10件
if (count > 10) {
return;
}
weakCell.numberLabel.text = [NSString stringWithFormat:@"%ld",count];
model.number = count;
[_dataSource replaceObjectAtIndex:indexPath.row withObject:model];
//点击+号之前，如果没处于选中状态，则将其调为选中状态。模仿京东的情况,主要是在两行====之间的代码
//==========================================
if (model.isSelected == NO) {
model.isSelected = !model.isSelected;
[weakTableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
if (model.isSelected) {//选中
[weakSelf.selectedArray addObject:model];
}else{//非选中
[weakSelf.selectedArray removeObject:model];
}
//如果要是选中的和数据源一样多，就把全选按钮设置为选中
if (_selectedArray.count == _dataSource.count) {
_selectedButton.selected = YES;
}else{
_selectedButton.selected = NO;
}
}
//==========================================
if ([_selectedArray containsObject:model]) {
[_selectedArray removeObject:model];
[_selectedArray addObject:model];
[weakSelf calculateTheTotalPrice];
}
};
最后在附上计算总价格的逻辑代码。
#pragma mark - 计算总价格
- (void)calculateTheTotalPrice{
CGFloat totalMoney ;
for (Model *model in _selectedArray) {
totalMoney += model.price * model.number;
}
_totalPrice = totalMoney;
_totalPriceLabel.text = [NSString stringWithFormat:@"总价格:%.2f",_totalPrice];
}
具体以Demo为准，所有的逻辑就这一些，不算很难。
