iOS重拾直播系列-直播间礼物效果

直播问题交流可加群 379258188 备注简书

之前写过直播间的礼物效果的文章
iOS开发 - Lottie实现直播间礼物特效
iOS开发-SVGA Animation实现直播间礼物特效
上面两篇只是对Lottie和SVGA的简单介绍

本次主要是结合我们上线直播项目对SVGA的使用,直播间接收到礼物消息之后,礼物效果要依次展示!
主要方式是创建一个SvgaManager,里面维护一个NSMutableArray,数组里存放的是礼物的信息,等待一个动画执行完成之后,再执行下一个动画!

SVGAPlayer

创建SVGACustomPlayer继承SVGAPlayer,SVGAPlayer本身是UIView,重写下面的方法,让礼物效果不接受事件

/**
 每个view都有这个方法，用来处理用户的操作事件。
 @return 它返回：self，代表这个view会接受用户的操作事件，返回：nil，则代表这个view不会接受用户的操作事件。
 */

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    return nil;
}

SvgaManager

  • SvgaManager.h
typedef NS_ENUM(NSInteger, SvgaMgrType)
{
    SvgaMgrTypeGifts = 0, //类型礼物
    SvgaMgrTypeMounts,    //进场动画
};


@interface SvgaManager : NSObject
/**
 单个动画循环次数
 */
@property (nonatomic, assign) NSInteger loops;

@property (nonatomic, assign) BOOL clearsAfterStop;

@property (nonatomic, assign) SvgaMgrType type;

@property (nonatomic, strong) SVGACustomPlayer *aPlayer; //Tag 礼物：0  座驾：1  用于区分


/**
 添加svga动画 等待执行
 
 @param model svga动画关联数据
 */
-(void)loadSvgaItem:(SvgaMgrModel *)model superview:(UIView *)view SVGAFrame:(CGRect)rect;

@end
  • SvgaManager.m
@interface SvgaManager()<SVGAPlayerDelegate>

@property (nonatomic, assign)BOOL isPlay;

@property (nonatomic, strong) SVGAParser *aParser;

/**
 存放需要执行的svga动画
 */
@property (nonatomic, strong) NSMutableArray<SvgaMgrModel *>* svgaItems;

@property (nonatomic, strong) UIView *tempSuperView;
// 是否是礼物操作
@property (nonatomic, assign) BOOL isGiftSvga;

// 是否是座驾操作
@property (nonatomic, assign) BOOL isMountsSvga;

@end

@implementation SvgaManager

- (instancetype)init {
    if (self = [super init]) {
        self.isGiftSvga = NO;
        self.isMountsSvga = NO;
    }
    return self;
}

- (void)loadSvgaItem:(SvgaMgrModel *)model superview:(UIView *)view SVGAFrame:(CGRect)rect {
    
    self.tempSuperView = view;
    
    // 缓存数据
    [self.svgaItems addObject:model];
    
    if (self.type == SvgaMgrTypeMounts) { // 进场特效
        
        [view addSubview:self.aPlayer];
        [self aPlayerSet:rect];
        
    }else{ // 礼物效果
        
        // 根据需求,是否需要修改礼物图层顺序
        for (UIView *svgaView in view.subviews) {
            
            if ([svgaView isKindOfClass:[SVGAPlayer class]] && svgaView.tag == 1) { // 这里直播间存在进场特效
                [view insertSubview:self.aPlayer belowSubview:svgaView];
                [self aPlayerSet:rect];
                return;
            }
        }
        
        // 正常情况
        [view addSubview:self.aPlayer];
        [self aPlayerSet:rect];
        
    }
    
    
}

- (void)aPlayerSet:(CGRect)rect{
    
    self.aPlayer.frame = rect;
    self.aPlayer.loops = (int)self.loops;
    self.aPlayer.clearsAfterStop = self.clearsAfterStop;
    
    if (self.isPlay != YES) {
        [self playSvga];
    }
}

#pragma mark - Private
- (void)playSvga {
    
    
    if (self.svgaItems.count == 0 ) { //队列中不存在效果
        return;
    }
    
    self.isPlay = YES;
    __weak typeof(self) weakSelf = self;
    
    SvgaMgrModel * model = self.svgaItems.firstObject;
    
    // 执行动画
    [self.aParser parseWithURL:[NSURL URLWithString:model.svgaUrl] completionBlock:^(SVGAVideoEntity * _Nullable videoItem) {
        
        if (videoItem) {
            
            weakSelf.aPlayer.videoItem = videoItem;
            [weakSelf.aPlayer startAnimation];
            self.isGiftSvga = YES;
            
            if (self.type == SvgaMgrTypeMounts) { // 这里入场动画的文字特效
                self.isMountsSvga = YES;
                [self showMounstView:model];
            }
            
            if (weakSelf.svgaItems.count > 0) {
                [weakSelf.svgaItems removeFirstObject];
            }
        }
        
    } failureBlock:^(NSError * _Nullable error) {
        
    }];
    
}

// 执行特效文字
- (void)showMounstView:(SvgaMgrModel *)model {
    // TODO:
}

#pragma mark - <SVGAPlayerDelegate>
- (void)svgaPlayerDidFinishedAnimation:(SVGAPlayer *)player {
    
    if (self.svgaItems.count == 0) {
        
        [self.aPlayer removeFromSuperview];
        self.isGiftSvga = NO;
        
        if (self.isMountsSvga == NO && self.isGiftSvga == NO) {
            self.isPlay = NO;
        }
        
    }else{
        
        self.isGiftSvga = NO;
        
//        if (self.type == SvgaMgrTypeGifts && self.isGiftSvga == NO) {
//            [self playSvga];
//        }else if (self.type == SvgaMgrTypeMounts && self.isMountsSvga == NO){
//            [self playSvga];
//        }
        
        if (self.isMountsSvga == NO && self.isGiftSvga == NO) {
            [self playSvga];
        }
    }
    
}

- (void)dealloc{
    
    DLog(@"内存已经释放");
}

#pragma mark - setter/getter
- (SVGACustomPlayer *)aPlayer {
    
    if (_aPlayer == nil) {
        _aPlayer = [[SVGACustomPlayer alloc] init];
        _aPlayer.delegate = self;
        _aPlayer.contentMode = UIViewContentModeScaleAspectFit;
    }
    return _aPlayer;
}

- (SVGAParser *)aParser{
    
    if (_aParser == nil) {
        _aParser = [[SVGAParser alloc]init];
    }
    
    return _aParser;
}

- (NSMutableArray<SvgaMgrModel *> *)svgaItems {
    
    if (_svgaItems == nil) {
        _svgaItems = [NSMutableArray array];
    }
    return _svgaItems;
}

@end

上述的SvgaManager也对进场特效进行的出去

如何使用:
懒加载Manager

- (SvgaManager *)giftSvgaManager {
    if (_giftSvgaManager == nil) {
        _giftSvgaManager = [[SvgaManager alloc]init];
        _giftSvgaManager.type = SvgaMgrTypeGifts;
        _giftSvgaManager.aPlayer.tag = 0;
        _giftSvgaManager.clearsAfterStop = YES;
        _giftSvgaManager.loops = 1;
    }
    return _giftSvgaManager;
}

接收到消息的时候

// model中还有其他的属性,比如用户信息用于进场动画
 SvgaMgrModel *model = [[SvgaMgrModel alloc]init];
 model.svgaUrl = @"";
[self.giftSvgaManager loadSvgaItem:model superview:self.view SVGAFrame:self.view.frame];

模拟一下礼物消息

    NSArray *items = @[
                       @"https://github.com/yyued/SVGA-Samples/blob/master/EmptyState.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/HamburgerArrow.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/PinJump.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/TwitterHeart.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/Walkthrough.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/angel.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/halloween.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/kingset.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/posche.svga?raw=true",
                       @"https://github.com/yyued/SVGA-Samples/blob/master/rose.svga?raw=true",
                       ];
    SvgaMgrModel *model = [[SvgaMgrModel alloc]init];
    model.svgaUrl = items[arc4random() % 10];
    [self.giftSvgaManager loadSvgaItem:model superview:self.view SVGAFrame:self.view.frame];

本文demo https://github.com/TsuiOS/HsuLive

上面的SVGA文件是存放再github上的,访问很慢! 我在七牛上也上传了一份,加载速度明显提升

http://phq4iiqb5.bkt.clouddn.com/HamburgerArrow.svga
http://phq4iiqb5.bkt.clouddn.com/Walkthrough.svga
http://phq4iiqb5.bkt.clouddn.com/PinJump.svga
http://phq4iiqb5.bkt.clouddn.com/EmptyState.svga
http://phq4iiqb5.bkt.clouddn.com/heartbeat.svga
http://phq4iiqb5.bkt.clouddn.com/halloween.svga
http://phq4iiqb5.bkt.clouddn.com/posche.svga
http://phq4iiqb5.bkt.clouddn.com/kingset.svga
http://phq4iiqb5.bkt.clouddn.com/TwitterHeart.svga
http://phq4iiqb5.bkt.clouddn.com/angel.svga
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335