购物车逻辑以及加入购物车动画

废话少说，技术为主，先看效果。

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为准，所有的逻辑就这一些，不算很难。