【全细节分析】- iOS端直播间礼物模块—2019

这个是从已上线半年的直播项目中抽出来的礼物模块,通过压测无任何问题。

准备1. 生成礼物模型

@interface NDGiftModel : NSObject

@property (nonatomic, strong) NDGifts *gift;
@property (nonatomic, strong) NDUserModel *user;

/** 礼物操作的唯一Key 由用户ID+礼物ID生成 */
@property (nonatomic, copy) NSString *giftKey;
// 气泡动画显示时间 秒
@property (nonatomic, assign) CGFloat time;
// 单次收到礼物的数量
@property (nonatomic, assign) NSInteger giftCount;
// 礼物连击上限
@property (nonatomic, assign) NSInteger doubleHitCount;

@end

准备2. 了解我们的礼物动画运行过程

/** 动画过程
    这是一个普遍的礼物动画过程,
    当然你可以根据自身业务调整
 */
typedef NS_ENUM(NSInteger, NDAnimationStatus) {
    NDAnimationStatusUnknown = 0,
    NDAnimationStatusStart,     // 开始运行动画,从左边横向出现的动画(0.2s)
    NDAnimationStatusSerial,    // 连击动画中~,一个放大缩小动画(0.3s)
    NDAnimationStatusStop,      // 动画已停止,悬浮在视图上(默认2秒,可根据🎁调整时间)
    NDAnimationStatusEnd,       // 动画将结束,视图向上的渐隐消失动画(0.2s)
};

初始化我们的礼物管理器

- (instancetype)initWithView:(UIView *)bearView {
    if (self = [super init]) {
        
        // 没有做屏幕适配,可自行调整
        CGFloat _width = 260;
        CGFloat _maxY = [UIScreen mainScreen].bounds.size.height / 2 - 48;
        for (int i = 0; i<2; i++) {
            NDGiftAnimationView *animationV = [[NDGiftAnimationView alloc] init];
            if (i == 1) {
                animationV.frame = CGRectMake(-_width, _maxY, _width, 40);
            } else {
                animationV.frame = CGRectMake(-_width, 40+8+_maxY, _width, 40);
            }
            [bearView addSubview:animationV];
            [self.animationArray addObject:animationV];
        }
    }
    return self;
}

1. 客户端收到礼物

// 收到礼物
- (void)receivedGift:(NDGiftModel *)gift {
    if (!gift) return;
    
    // 更新总数量
    gift.doubleHitCount = gift.giftCount;
    
    // 1. 判读当前礼物视图是否需要显示动画
    for (NDGiftAnimationView *giftView in self.animationArray) {
        BOOL update = [giftView animationStatusWith:gift];
        if (update) {
            return;
        }
    }
    
    // 2. 追加|更新礼物队列
    [self insertOrUpdate:gift];
    
    // 3. 执行礼物队列动画
    [self animateNextGift];
}

1.1 根据礼物视图状态决定接下来的操作

- (BOOL)animationStatusWith:(NDGiftModel *)gift {
    // 是否同用户同礼物  判断唯一的key
    if ([self.currentGift.giftKey isEqualToString:gift.giftKey]) {
        // 礼物即将结束或者处于未启动状态
        if (self.animationStatus == NDAnimationStatusUnknown || self.animationStatus == NDAnimationStatusEnd) {
            return NO;
        }
        // 礼物处于开始动画中
        if (self.animationStatus == NDAnimationStatusStart) {
            self.currentGift.giftCount = gift.giftCount;
            self.currentGift.doubleHitCount += self.currentGift.giftCount;
            return YES;
        }
        // 礼物处于连击状态
        if (self.animationStatus == NDAnimationStatusSerial) {
            self.currentGift.giftCount = gift.giftCount;
            self.currentGift.doubleHitCount += self.currentGift.giftCount;
            return YES;
        }
        // 礼物停止运行动画,处于停止中
        if (self.animationStatus == NDAnimationStatusStop) {
            self.currentGift.giftCount = gift.giftCount;
            self.currentGift.doubleHitCount += self.currentGift.giftCount;
            // 连击
            [self doShakeNumberLabel];
            return YES;
        }
    }
    return NO;
}

从上面的礼物视图状态:

  1. 当动画未开始和即将结束我们直接返回 NO,
  2. 动画即将开始了,这个时候我们又接收到同样的礼物我们只需要更新数量就可以了
  3. 动画处于连击状态中,同样的只需要更新礼物数量
  4. 动画处于悬浮在页面上,动画也停止了,这个时候我们需要更新数量,并且从新启动连击动画。

1.2 动画开始中~~

- (void)startAnimationWithGift:(NDGiftModel *)gift finishedBlock:(void (^)(NDGiftModel * _Nonnull))finishedBlock {
    
    self.animationStatus = NDAnimationStatusStart;
    self.currentGift = gift;
    
    self.finishedBlock = finishedBlock;
    self.originFrame = self.frame;
    
    NDWeakSelf
    [UIView animateWithDuration:AnimationStartDuration animations:^{
        weakSelf.alpha = 1.0;
        // 该动画是将X轴设置为0 横向移动效果
        weakSelf.x = 0;
    } completion:^(BOOL finished) {
        [weakSelf doShakeNumberLabel];
    }];
}

1.3 动画连击中

- (void)doShakeNumberLabel {
    [self cleanDelayedBlockHandle];
    
    self.animationStatus = NDAnimationStatusSerial;
    _currentIndex = self.currentGift.doubleHitCount;
    self.animationImgView.showCount = _currentIndex;
    
    NDWeakSelf;
    [self.animationImgView startAnimWithDuration:AnimationSerialDuration complate:^{
        // 判断礼物连击是否达到上限 
        if (weakSelf.currentIndex >= weakSelf.currentGift.doubleHitCount) {
            
            // 更新礼物状态处于静止中
            weakSelf.animationStatus = NDAnimationStatusStop;
            weakSelf.delayedBlockHandle = perform_block_after_delay(weakSelf.timeFloat, ^{
                [weakSelf endAnimation];
            });
        } else { // 递归 继续连击
            [weakSelf doShakeNumberLabel];
        }
    }];
}

1.4 动画即将结束

- (void)endAnimation {
    self.animationStatus = NDAnimationStatusEnd;
    NDWeakSelf;
    // 该动画是向上移动一小段距离的效果 隐藏
    [UIView animateWithDuration:AnimationEndDuration delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        weakSelf.y -= 10;
        weakSelf.alpha = 0.0; // 渐变逐渐隐藏
    } completion:^(BOOL finished) {
        weakSelf.frame = weakSelf.originFrame;
        weakSelf.alpha = 0.0;
        weakSelf.animationStatus = NDAnimationStatusUnknown;
        weakSelf.currentGift = nil;
        if (weakSelf.finishedBlock) {
            weakSelf.finishedBlock(weakSelf.currentGift);
        }
    }];
}

2. 追加|更新礼物队列

- (void)insertOrUpdate:(NDGiftModel *)model {
    // 遍历相同礼物累加
    for (NDGiftModel *item in self.giftArray) {
        if ([item.giftKey isEqualToString:model.giftKey]) {
            item.giftCount = model.giftCount;
            item.doubleHitCount += item.giftCount;
            return;
        }
    }
    // 优先级插入(价格高的在前)
    // [obj.gift.contributions floatValue] < [model.gift.contributions floatValue])
    
    [self.giftArray addObject:model];
}

3. 执行礼物队列动画

/** 执行礼物动画 */
- (void)animateNextGift {
    // 1. 没有要显示的礼物
    NDGiftModel *gift = self.giftArray.firstObject;
    if (!gift) {
        return;
    }
    // 2. 执行礼物动画
    NDWeakSelf;
    for (NDGiftAnimationView *animationView in self.animationArray) {
        if (animationView.animationStatus == NDAnimationStatusUnknown) {
            
            [weakSelf.giftArray removeObject:gift];
            
            [animationView startAnimationWithGift:gift finishedBlock:^(NDGiftModel *gift) {
                
                // 执行完动画递归
                [weakSelf animateNextGift];
            }];
            return;
        }
    }
}

最后就是demo地址啦~~~~ github地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 封装一个动画任务到操作对象之中? 所有写在操作对象NSOperation的main方法里面的代码,都是分线程执行。...
    Carden阅读 665评论 0 2
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,083评论 1 32
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • --268天 去同行的宠物店感受销售方法,不同区域,不同管理理念,不同消费群体,销售模式也不一样,只要能把客人...
    Alina_qi阅读 153评论 0 0
  • 光阴谣 (致小冠老师) 唐星河 初秋的天气暖和 相逢的人终于再相逢了 光线在落 果实在落 万物都在...
    唐星河阅读 310评论 0 1