如何快速的开发一个完整的iOS直播app(礼物篇)

搭建礼物列表

• 使用modal,设置modal样式为custom,就能做到从小往上显示礼物列表，并且能看见前面的直播界面
• 礼物模型设计
• 一开始创建3个礼物模型，保存到数组，传入给礼物View展示，本来礼物数据应该从服务器获取，这里没做了。
• 到时候拿到礼物View就能拿到对应按钮，传给服务器就好了.

礼物模型设计

礼物模型

• 用户模型(userID，userName)，用于标志哪个用户发送,这里为方便测试，保证UserID一样
• 礼物ID(giftID),用于标志当前礼物
• 礼物名称（giftName）
• 礼物总数(giftCount),用于记录礼物连发数，总共发了多少礼物
• 发送礼物的房间Key(roomKey),用于知道是发送个哪个房间

@interface XMGGiftItem : NSObject

// 礼物ID
@property (nonatomic, assign) NSInteger giftId;

// 用户模型:记录哪个用户发送
@property (nonatomic, strong) XMGUserItem *user;

// 礼物名称
@property (nonatomic, strong) XMGUserItem *giftName;

// 礼物个数,用来记录礼物的连击数
@property (nonatomic, assign) NSInteger giftCount;

// 发送哪个房间
@property (nonatomic, strong) NSString *roomKey;

+ (instancetype)giftWithGiftId:(NSInteger)giftId userId:(NSInteger)userId giftCount:(NSInteger)giftCount roomKey:(NSString *)roomKey;

@end

+ (instancetype)giftWithGiftId:(NSInteger)giftId giftCount:(NSInteger)giftCount roomKey:(NSString *)roomKey giftName:(NSString *)giftName
{
    XMGGiftItem *item = [[self alloc] init];
    item.giftId = giftId;
    item.user = [[XMGUserItem alloc] init];
    // ID一样，模拟只有一个用户
    item.user.id = 1;
    item.user.userName = @"用户1";
    item.giftCount = giftCount;
    item.roomKey = roomKey;
    item.giftName = giftName;
    return item;

}

监听礼物点击

点击礼物的时候，发送礼物

• 这里使用了websocket搭建的后台服务器，进行礼物发送

    // 发送礼物
    SocketIOClient *socket = [SocketIOClient shareSocketIOClient];

    XMGGiftItem *gift = [XMGGiftItem giftWithGiftId:sender.tag userId:socket.user.id giftCount:1 roomKey:socket.roomKey];

    [socket emit:@"gift" with:@[gift.mj_keyValues]];

三、礼物界面监听礼物发送

   // 监听礼物
    SocketIOClient *socket = [SocketIOClient shareSocketIOClient];

    [socket on:@"gift" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ask) {
        NSLog(@"接收到礼物%@",data);
        XMGGiftItem *item = [XMGGiftItem mj_objectWithKeyValues:data[0]];

        // 显示礼物动画
        [self setupGiftAnim:item];
    }];

四、设置礼物动画

• 显示礼物业务逻辑

  • 1.并不是每次接收到礼物，都需要创建对应礼物动画View，一次最多显示2个礼物View，当执行完一个礼物，就判断是否还有未执行的礼物，继续执行.
  • 2.需要搞个礼物队列(数组)保存所有需要执行的礼物模型，并不是只保存未执行的礼物模型.
    • 2.1 什么是需要执行的礼物模型?每一个需要执行的礼物模型都对应一个礼物View
    • 2.2 如果只保存未执行的礼物，不记录之前的执行礼物，没法判断下一个礼物是否是连发礼物，因为拿不到之前的做判断。
    • 2.3 什么是连发礼物，同一个用户，连续发送相同的礼物。
    • 2.4 因此每接收一个新的礼物，需要与之前的礼物对比，是否是同一个人发送的相同礼物。

  @property (nonatomic, strong) NSMutableArray *giftQueue;
  
  - (NSMutableArray *)giftQueue
  

{
if (_giftQueue == nil) {
_giftQueue = [NSMutableArray array];
}
return _giftQueue;
}

```

*   3.判断是否是连发礼物
    * 3.1 遍历礼物队列中所有礼物，判断当前接收的礼物与之前礼物是否有相同的UserID和相同的礼物ID。
    * 3.2 如果有相同的UserID和相同的礼物ID，就表示是连发礼物，，把礼物模型的礼物总数+1.
    * 3.3 不需要把连发礼物添加到礼物队列中，因为只要是连发礼物就表示之前已经有相同的礼物，会和之前礼物共用同一个礼物View,不需要创建新的礼物View.
    * 3.4 因此只要是连发礼物，就直接return,不做操作.

```

pragma mark - 判断当前接收礼物是否属于连发礼物

• (BOOL)isComboGift:(XMGGiftItem *)gift
  {
  XMGGiftItem *comboGift = nil;

  for (XMGGiftItem *giftItem in self.giftQueue) {

    // 如果是连发礼物就记录下来
    if (giftItem.giftId == gift.giftId && giftItem.userId == gift.userId) {
        comboGift = giftItem;
    }
  

  }

  if (comboGift) { // 连发礼物有值
  // 礼物模型的礼物总数+1
  comboGift.giftCount += 1;
  return YES;
  }

  return NO;
  }

  
  *   4.如果不是连发礼物，直接把接收到的礼物添加到礼物队列
  *   5.搞个数组记录当前显示的动画View
      *   5.1 最多显示两个礼物动画View,记录当前正在做动画的View
      *   5.2 如果超过2个显示的View,就先不创建礼物View，直接retun
  
  

  @property (nonatomic, strong) NSMutableArray *giftAnimViews;

  • (NSMutableArray *)giftAnimViews
    {
    if (_giftAnimViews == nil) {
    _giftAnimViews = [NSMutableArray array];
    }
    return _giftAnimViews;
    }

  *   6.过滤掉以上2个条件之后，`处理礼物动画`
      *   6.1 创建礼物View
      *   6.2 设置礼物View的frame
          *   6.2.1 分为上下两部分，先显示到底部，在显示顶部
          *   6.2.2 怎么才知道当前礼物View显示在哪部分，搞个位置数组，每次从数组中取出一个位置，取完，就移除，这样下次就不会显示重复的地方了。
      *   6.3 添加礼物View到控制器的View中
      *   6.4 做礼物平移动画
      *   6.5 礼物平移动画做完，开始做连击动画
  
  

  // 处理礼物动画

• (void)handleGiftAnim:(XMGGiftItem *)gift
  {
  // 1.创建礼物动画的View
  XMGGiftAnimView *giftView = [XMGGiftAnimView giftAnimView];

  CGFloat h = self.view.bounds.size.height * 0.5;
  CGFloat w = self.view.bounds.size.width;

  // 取出礼物位置
  id position = self.positions.lastObject;

  // 从数组移除位置
  [self.positions removeObject:position];

  CGFloat y = [position floatValue] * h;
  // 2.设置礼物View的frame
  giftView.frame = CGRectMake(0, y, w, h);

  // 3.传递礼物模型
  giftView.gift = gift;

  // 记录当前位置
  giftView.tag = [position floatValue];

  // 添加礼物View
  [self.view addSubview:giftView];

  // 添加记录礼物View数组
  [self.giftAnimViews addObject:giftView];

  __weak typeof(self) weakSelf = self;

  giftView.dismissView = ^(XMGGiftAnimView *giftView){
  [weakSelf dismissView:giftView];
  };

  // 设置动画
  giftView.transform = CGAffineTransformMakeTranslation(-w, 0);
  [UIView animateWithDuration:.25 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:1 options:UIViewAnimationOptionCurveLinear animations:^{
  giftView.transform = CGAffineTransformIdentity;
  } completion:^(BOOL finished) {
  // 开始连击动画
  [giftView startComboAnim];
  }];
  }

  
  *   7.礼物连击动画
      *   7.1 封装到礼物View中，礼物需要拿到礼物连击Label做事情
      *   7.2 每隔一段时间，需要修改连击数，搞个定时器，每隔0.3秒做事情
      *   7.3 连击动画，也需要控制在0.3秒刚好做完，就能直接做下一次动画。
      *   7.4 搞个属性记录当前连击数，没执行一次连击就++，当当前连击数大于礼物总数的时候，表示连击动画执行完毕，需要销毁定时器，销毁当前礼物View
      *   7.5 `注意点`：当当前连击数大于礼物总数的时候，不能马上确定连击动画执行完毕，因为电脑执行速度大于用户点击速度，有可能用户在点的时候，没有电脑执行快，电脑执行完直接把礼物View移除了，就看不到连击效果了。
      *   7.6 因此需要延迟销毁定时器，而且只要有新的连击数了，需要取消销毁定时器，要不然可能连击数还没显示完，定时器就销毁了
  
  

  • (void)startComboAnim{
    if (_timer == nil) {
    _timer = [NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(combo) userInfo:nil repeats:YES];
    _curComboCount = 1;
    }
    }

  // 连击

• (void)combo
  {
  // 当前连发数，已经显示完毕
  if (_curComboCount > _gift.giftCount) { // 停止定时器
  // 停止定时器
  [self performSelector:@selector(cancel) withObject:nil afterDelay:1];
  } else {

    // 修改label显示
    _comboView.text = [NSString stringWithFormat:@"x%ld",_curComboCount];
  
    [UIView animateWithDuration:0.15 animations:^{
        _comboView.transform = CGAffineTransformMakeScale(3, 3);
    } completion:^(BOOL finished) {
       [UIView animateWithDuration:0.15 animations:^{
           _comboView.transform = CGAffineTransformIdentity;
       }];
    }];
  
    // 取消定时器销毁
    [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(cancel) object:nil];
  
    _curComboCount++;
  

  }
  }

  
  *   8.连击动画做完，
      *   8.1 需要停止定时器
      *   8.2 需要移除礼物动画的View
      *   8.3 把礼物动画的View和礼物都移除数组，需要回到之前控制器，用Block
      *   `注意点`：cancel方法可能会调用多次，定时器没有销毁，就会一直调用cancel方法，但是只需要执行一次，需要搞个属性记录下.
      *   原因：因为要在1秒之后才会调用cancle，那在这一秒内，肯定又会调用定时器方法，而且这时候当前连击数已经大于礼物总数，就会在1秒内多少执行cancle方法，导致cancle在1秒内调用多次.
  
      ```
      - (void)cancel
      {
          if (_isCancel == NO) {
  
              _isCancel = YES;
  
              [_timer invalidate];
              _timer = nil;
  
              if (_dismissView) {
                  _dismissView(self);
              }
          }
      }
      ```
  
  *   9.连击动画结束后执行的DismissBlock.
      *   9.1 做礼物View移除动画，往上移动，透明度为0
      *   9.2 把礼物模型从队列移除
      *   9.3 把礼物View从显示的礼物View数组移除
      *   9.4 移除当前View
      *   9.5 恢复位置到位置数组
          *   9.3.1 怎么知道恢复哪个位置？可以用礼物View的tag记录当前礼物View的位置
          *   9.3.2 如果当前tag为0，需要插入第0个位置，其他情况使用addObject.
      *   9.6 当一个礼物做完动画，查看队列中是否还有未执行的礼物。
  
      ```
              - (void)dismissView:(XMGGiftAnimView *)giftView
      {
  
          [UIView animateWithDuration:0.25 animations:^{
  
              giftView.alpha = 0;
              giftView.transform = CGAffineTransformMakeTranslation(0, -20);
  
          } completion:^(BOOL finished) {
  
              // 移除当前礼物
              [self.giftQueue removeObject:giftView.gift];
  
              // 移除当前动画的View
              [giftView removeFromSuperview];
  
              // 移除礼物动画View数组
              [self.giftAnimViews removeObject:giftView];
  
              // 恢复当前位置
              if (giftView.tag == 0) {
                  // 插入第0个位置
                  [self.positions insertObject:@(0) atIndex:0];
              } else {
                  [self.positions addObject:@(giftView.tag)];
              }
  
              // 判断队列中是否还有未处理的礼物
              XMGGiftItem *item = [self fetchNoHandleGiftItemOfQueue];
  
              // 处理礼物动画
              if (item) {
                  [self handleGiftAnim:item];
              }
  
          }];
  
      }
      ```
  *   10.执行完一个礼物，判断礼物队列是否还有未执行的礼物
      *   10.1 遍历礼物队列中所有礼物，查看是否有未执行的礼物
      *   10.2 取出的礼物，有可能是当前正在执行的礼物，需要排除掉
          *   10.2.1 遍历当前正在执行的礼物View,查看取出的礼物是否和它的礼物相同，相同表示当前礼物在执行
      *   10.3 获取到未执行的礼物，直接处理礼物
      ```
      // 搜索礼物队列中未执行的礼物
      - (XMGGiftItem *)fetchNoHandleGiftItemOfQueue
      {
  
          // 取出队列中的礼物
          for (XMGGiftItem *item in self.giftQueue) {
              // 当前礼物模型有可能在执行
              if (![self isExcutingGift:item]) return item;
          }
  
          return nil;
      }
  
      // 判断当前礼物是否正在执行
      - (BOOL)isExcutingGift:(XMGGiftItem *)gift
      {
          // 判断当前模型是否已经在执行，执行就不需要在做动画
          for (XMGGiftAnimView *giftView in self.giftAnimViews) {
  
              if (giftView.gift == gift) return YES;
          }
  
          return NO;
      }
  
      ```
  
  

• 礼物整体业务逻辑

      - (void)setupGiftAnim:(XMGGiftItem *)gift
      {
          // 1.判断当前接收的礼物是否属于连发礼物 属于直接return，不需要在重新创建新的动画View
          if ([self isComboGift:gift]) return;
  
          // 2.添加到礼物队列
          [self.giftQueue addObject:gift];
  
          // 3.判断当前显示多少个礼物动画View
          if (self.giftAnimViews.count == 2) return;
  
          // 4.处理礼物动画
          [self handleGiftAnim:gift];
      }