iOS重拾直播系列-直播間禮物效果

直播問題交流可加群 379258188 備注簡書

之前寫過直播間的禮物效果的文章
iOS開發(fā) - Lottie實(shí)現(xiàn)直播間禮物特效
 iOS開發(fā)-SVGA Animation實(shí)現(xiàn)直播間禮物特效
上面兩篇只是對Lottie和SVGA的簡單介紹

本次主要是結(jié)合我們上線直播項(xiàng)目對SVGA的使用,直播間接收到禮物消息之后,禮物效果要依次展示!
主要方式是創(chuàng)建一個(gè)SvgaManager,里面維護(hù)一個(gè)NSMutableArray,數(shù)組里存放的是禮物的信息,等待一個(gè)動(dòng)畫執(zhí)行完成之后,再執(zhí)行下一個(gè)動(dòng)畫!

SVGAPlayer

創(chuàng)建SVGACustomPlayer繼承SVGAPlayer,SVGAPlayer本身是UIView,重寫下面的方法,讓禮物效果不接受事件

/**
 每個(gè)view都有這個(gè)方法兼贡，用來處理用戶的操作事件容劳。
 @return 它返回：self丑念，代表這個(gè)view會(huì)接受用戶的操作事件，返回：nil倚搬，則代表這個(gè)view不會(huì)接受用戶的操作事件蹂窖。
 */

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

SvgaManager

SvgaManager.h

typedef NS_ENUM(NSInteger, SvgaMgrType)
{
    SvgaMgrTypeGifts = 0, //類型禮物
    SvgaMgrTypeMounts,    //進(jìn)場動(dòng)畫
};


@interface SvgaManager : NSObject
/**
 單個(gè)動(dòng)畫循環(huán)次數(shù)
 */
@property (nonatomic, assign) NSInteger loops;

@property (nonatomic, assign) BOOL clearsAfterStop;

@property (nonatomic, assign) SvgaMgrType type;

@property (nonatomic, strong) SVGACustomPlayer *aPlayer; //Tag 禮物：0  座駕：1  用于區(qū)分


/**
 添加svga動(dòng)畫 等待執(zhí)行
 
 @param model svga動(dòng)畫關(guān)聯(lián)數(shù)據(jù)
 */
-(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;

/**
 存放需要執(zhí)行的svga動(dòng)畫
 */
@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;
    
    // 緩存數(shù)據(jù)
    [self.svgaItems addObject:model];
    
    if (self.type == SvgaMgrTypeMounts) { // 進(jìn)場特效
        
        [view addSubview:self.aPlayer];
        [self aPlayerSet:rect];
        
    }else{ // 禮物效果
        
        // 根據(jù)需求,是否需要修改禮物圖層順序
        for (UIView *svgaView in view.subviews) {
            
            if ([svgaView isKindOfClass:[SVGAPlayer class]] && svgaView.tag == 1) { // 這里直播間存在進(jìn)場特效
                [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 ) { //隊(duì)列中不存在效果
        return;
    }
    
    self.isPlay = YES;
    __weak typeof(self) weakSelf = self;
    
    SvgaMgrModel * model = self.svgaItems.firstObject;
    
    // 執(zhí)行動(dòng)畫
    [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) { // 這里入場動(dòng)畫的文字特效
                self.isMountsSvga = YES;
                [self showMounstView:model];
            }
            
            if (weakSelf.svgaItems.count > 0) {
                [weakSelf.svgaItems removeFirstObject];
            }
        }
        
    } failureBlock:^(NSError * _Nullable error) {
        
    }];
    
}

// 執(zhí)行特效文字
- (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(@"內(nèi)存已經(jīng)釋放");
}

#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也對進(jìn)場特效進(jìn)行的出去

如何使用:
懶加載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;
}

接收到消息的時(shí)候

// model中還有其他的屬性,比如用戶信息用于進(jìn)場動(dòng)畫
 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