版本記錄

前言

在直播類app中，是需要主播和觀眾進行互動的，這樣子才有趣，其中點贊就是互動方式中比較常見的一種，點贊可以鼓勵主播，提高主播的直播情緒和直播意愿，這一篇我們就講一下主播端和觀眾端的一種點贊動畫效果的實現(xiàn)形式。

觀眾端

1. 功能要求

實現(xiàn)禮物往外拋出的效果。

2. 代碼實現(xiàn)

下面還是直接看代碼。

1. JJLiveClientPraiseVC.h

#import <UIKit/UIKit.h>

@interface JJLiveClientPraiseVC : UIViewController

@end

2. JJLiveClientPraiseVC.m

#import "JJLiveClientPraiseVC.h"
#import "JJPraiseView.h"

#define kScreenHeight  [UIScreen mainScreen].bounds.size.height
#define kScreenWidth   [UIScreen mainScreen].bounds.size.width

@interface JJLiveClientPraiseVC ()

@property (nonatomic, assign) CGPoint beginPoint;
@property (nonatomic, strong) JJPraiseView *praiseView;

@end

@implementation JJLiveClientPraiseVC

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    self.view.backgroundColor = [UIColor blackColor];
    
    [self.view addSubview:self.praiseView];
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    self.navigationController.navigationBarHidden = YES;
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    
    self.navigationController.navigationBarHidden = NO;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [super touchesBegan:touches withEvent:event];
    
    UITouch *touch = [touches anyObject];
    self.beginPoint = [touch locationInView:self.view];
    if (CGRectContainsPoint(CGRectMake(100, 100, kScreenWidth - 200, kScreenHeight - 200), self.beginPoint)) {
        self.praiseView.maxLeft = 100;
        self.praiseView.maxRight = 100;
        self.praiseView.maxHeight = [touch locationInView:self.view].y - 100;
        self.praiseView.startPoint = [touch locationInView:self.view];
        self.praiseView.duration = 2;
        [self didClickSendAdmire];
        [self.praiseView generateBubbleInRandom];
    }
}

#pragma mark - Object Private Function

- (void)didClickSendAdmire
{
    //這里發(fā)送的的是點贊的消息給服務(wù)器，這樣直播間所有的人都可以收到
}

#pragma mark - Lazy Load

- (JJPraiseView *)praiseView
{
    if (!_praiseView) {
        _praiseView = [[JJPraiseView alloc] initWithFrame:self.view.bounds];
        _praiseView.maxLeft = 0;
        _praiseView.maxRight = 180/2;
        _praiseView.maxHeight = 492/2;
        _praiseView.duration = 2;
        _praiseView.critBubbleNum = 1;
        _praiseView.imageSize = CGSizeMake(54, 55);
        NSMutableArray *array = [NSMutableArray arrayWithCapacity:25];
        for (int i = 1; i < 25; i++) {
            UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"light_%d",i]];
            [array addObject:image];
        }
        _praiseView.images = array.copy;
        _praiseView.isCrit = YES;
        _praiseView.critInterval = 1;
    }
    return _praiseView;
}


@end

3. JJPraiseView.h

#import <UIKit/UIKit.h>

@interface JJPraiseView : UIView

//最左邊位置
@property (nonatomic, assign)CGFloat maxLeft;

//最右邊位置
@property (nonatomic, assign)CGFloat maxRight;

//最高位置
@property (nonatomic, assign)CGFloat maxHeight;

//消失的時間
@property (nonatomic, assign)CGFloat duration;

//圖片（隨機出現(xiàn)）
@property (nonatomic, copy)NSArray *images;

//圖片（隨機出現(xiàn)）
//氣泡的大小。不設(shè)置的話默認是圖片的大小
@property (nonatomic, assign)CGSize imageSize;

//是否有暴擊
@property (nonatomic, assign)BOOL isCrit;

//暴擊間隔
@property (nonatomic, assign)int critInterval;

//暴擊后 產(chǎn)生的氣泡數(shù)
@property (nonatomic, assign)int critBubbleNum;

@property (nonatomic, assign) CGPoint startPoint;

//隨機出現(xiàn)
- (void)generateBubbleInRandom;

@end

4. JJPraiseView.m

#import "JJPraiseView.h"

@interface JJPraiseView () <CAAnimationDelegate>

@property (nonatomic, assign) CGFloat maxWidth;
@property (nonatomic, strong) NSMutableSet *recyclePool;
@property (nonatomic, strong) NSMutableArray *array;
@property (nonatomic, assign) NSInteger clickNum;               //點擊數(shù)
@property (nonatomic, assign) NSInteger residueClickNum;        //當前剩余點擊數(shù)

@end

@implementation JJPraiseView

#pragma mark - Override Base Function

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self){
        [self initData];
    }
    return self;
}

#pragma mark - Object Private Function

- (void)initData
{
    self.array       = @[].mutableCopy;
    self.recyclePool = [NSMutableSet set];
    self.critBubbleNum = 18;
    self.critInterval = 9;
}

- (void)setlayer
{
    CALayer *layer;
    
    if (_recyclePool.count > 0) {
        layer = [_recyclePool anyObject];
        [_recyclePool removeObject:layer];
    }
    else{
        UIImage *image = self.images[arc4random() % self.images.count];
        layer = [self createLayerWithImage:image];
    }
    if (self.layer.sublayers.count > 15) {
        return;
    }
    
    [self.layer addSublayer:layer];
    [self generateBubbleWithCAlayer:layer];
}

- (void)generateBubbleWithCAlayer:(CALayer *)layer
{
    _maxWidth = _maxLeft + _maxRight;
    CGPoint endPoint   = CGPointMake(_startPoint.x - _maxWidth/2 + _maxWidth * [self randomFloat] - _maxLeft, _startPoint.y-_maxHeight);
    CGPoint controlPoint1 = CGPointMake(_startPoint.x - _maxWidth/2 + _maxWidth * [self randomFloat] - _maxLeft, (_startPoint.y-_maxHeight) * 0.2);
    CGPoint controlPoint2 = CGPointMake(_startPoint.x - _maxWidth/2 + _maxWidth * [self randomFloat] - _maxLeft, (_startPoint.y-_maxHeight) * 0.6);
    
    CGMutablePathRef curvedPath = CGPathCreateMutable();
    CGPathMoveToPoint(curvedPath, NULL, _startPoint.x, _startPoint.y);
    CGPathAddCurveToPoint(curvedPath, NULL, controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y, endPoint.x, endPoint.y);
    
    CAKeyframeAnimation *keyFrame = [CAKeyframeAnimation animation];
    keyFrame.keyPath = @"position";
    keyFrame.path = CFAutorelease(curvedPath);
    keyFrame.duration = self.duration;
    keyFrame.calculationMode = kCAAnimationPaced;
    
    CABasicAnimation *scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    scale.toValue = @0.8;
    scale.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.3, 0.3, 0.3)];
    scale.duration = 1;
    
    CABasicAnimation *alpha = [CABasicAnimation animation];
    alpha.keyPath = @"opacity";
    alpha.fromValue = @1;
    alpha.toValue = @0;
    alpha.duration = self.duration * 0.4;
    alpha.beginTime = self.duration - alpha.duration;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[keyFrame, scale, alpha];
    group.duration = self.duration;
    group.delegate = self;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    [layer addAnimation:group forKey:@"group"];
    
    [_array addObject:layer];
}

- (CGFloat)randomFloat
{
    return (arc4random() % 100)/100.0f;
}

- (CALayer *)createLayerWithImage:(UIImage *)image
{
    CALayer *layer = [CALayer layer];
    CGSize size = image.size;
    if(self.imageSize.width>0 && self.imageSize.height>0){
        size = self.imageSize;
    }
    layer.frame    = CGRectMake(0, 0, size.width, size.height);
    layer.contents = (__bridge id)image.CGImage;;
    return layer;
}

#pragma mark - Object Public Function

- (void)generateBubbleInRandom
{
    //判斷是否有暴擊
    if (self.isCrit) {
        //如果暴擊 則開始計數(shù)
        self.clickNum++;
        if(self.critInterval == self.clickNum){
            //暴擊
            //點擊數(shù)變回0
            for(int i=0;i<_critBubbleNum;i++){
                [self performSelector:@selector(setlayer) withObject:self afterDelay:i*0.1];
            }
            self.clickNum = 0;
        }
    }
}

#pragma mark - CAAnimationDelegate

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    if (flag) {
        CALayer *layer = [_array firstObject];
        [layer removeAllAnimations];
        [layer removeFromSuperlayer];
        [_array removeObject:layer];
        [_recyclePool addObject:layer];
    }
}

@end

3. 效果驗證

下面就看一下具體的實現(xiàn)效果。

主播端

1. 功能要求

主播端和觀眾端點贊紅心的動畫效果展示。

2. 代碼實現(xiàn)

這里說的是主播端的效果，其實，客戶端和主播端的效果是一樣的。從消息服務(wù)器獲取點贊數(shù)，然后在主播和觀眾端的預(yù)覽視圖里面的setter方法里面進行動畫的設(shè)置。

下面看一下代碼

//消息：點贊數(shù)

- (void)setPraiseNumStr:(NSString *)praiseNumStr
{
    _praiseNumStr = praiseNumStr;
    
    self.praiseNumLabel.text = praiseNumStr;
    
    NSInteger __block innerSecondPraiseNum = 0;
    
    //獲取當期點贊的時間戳
    NSDate *currentDate = [NSDate date];
    NSTimeInterval interval = [currentDate timeIntervalSince1970];
    NSNumber *timeNumObj = [NSNumber numberWithDouble:interval];
    [self.timeStampArrM addObject:timeNumObj];
    
    //統(tǒng)計1s之內(nèi)的點贊數(shù)總和
    [self.timeStampArrM enumerateObjectsUsingBlock:^(NSNumber * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        
        //找到大于1s的點贊，將其移除
        if ([self.timeStampArrM.lastObject doubleValue] - [obj doubleValue] > 1) {
            [self.timeStampArrM removeObject:obj];
        }
    }];
    
    innerSecondPraiseNum = self.timeStampArrM.count;
    NSLog(@"innerSecondPraiseNum-innerSecondPraiseNum = %ld",innerSecondPraiseNum);
    
    //更新點贊數(shù)
    NSInteger onlineNum = [self.onlineNumStr integerValue];
    CGFloat frequency = innerSecondPraiseNum * 1.0 / onlineNum;
    NSLog(@"frequency = %lf,onlineNum = %ld", frequency,onlineNum);
    
    if (frequency == 0) {
        NSLog(@"無人點擊");
        self.praiseImageView.image = [UIImage imageNamed:@"live_praise_level1"];
    }
    else {
        if (frequency > 0 && frequency <= 0.3) {
            NSLog(@"低頻點擊");
            self.praiseImageView.image = [UIImage imageNamed:@"live_praise_level2"];
        }
        else if (frequency > 0.3 && frequency <= 0.6) {
            NSLog(@"中頻點擊");
             self.praiseImageView.image = [UIImage imageNamed:@"live_praise_level3"];
        }
        else if (frequency > 0.6) {
            NSLog(@"高頻點擊");
            self.praiseImageView.image = [UIImage imageNamed:@"live_praise_level4"];
        }
        
        self.praiseImageView.transform  = CGAffineTransformIdentity;
        
        CAKeyframeAnimation *cakanimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
        cakanimation.duration = 0.25;
        NSValue *value1 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.9, 0.9, 1.0)];
        NSValue *value2 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
        NSValue *value3 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.3, 1.3, 1.0)];
        NSValue *value4 = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];
        cakanimation.values = @[value1,value2,value3,value4];
        cakanimation.removedOnCompletion = NO;
        cakanimation.fillMode = kCAFillModeForwards;
        [self.praiseImageView.layer addAnimation:cakanimation forKey:nil];
        
        [self performSelector:@selector(settingBtnDefault) withObject:nil afterDelay:0.5f];
    }
}

- (void) settingBtnDefault
{
    self.praiseImageView.image = [UIImage imageNamed:@"live_praise_level1"];
}

3. 效果驗證

下面我們就看一下實現(xiàn)的效果。

可以很好的實現(xiàn)這個效果。

后記

未完，待續(xù)~~~~