版本记录

前言

在直播类app中，是需要主播和观众进行互动的，这样子才有趣，其中点赞就是互动方式中比较常见的一种，点赞可以鼓励主播，提高主播的直播情绪和直播意愿，这一篇我们就讲一下主播端和观众端的一种点赞动画效果的实现形式。

观众端

1. 功能要求

实现礼物往外抛出的效果。

2. 代码实现

下面还是直接看代码。

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
{
    //这里发送的的是点赞的消息给服务器，这样直播间所有的人都可以收到
}

#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;

//图片（随机出现）
@property (nonatomic, copy)NSArray *images;

//图片（随机出现）
//气泡的大小。不设置的话默认是图片的大小
@property (nonatomic, assign)CGSize imageSize;

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

//暴击间隔
@property (nonatomic, assign)int critInterval;

//暴击后 产生的气泡数
@property (nonatomic, assign)int critBubbleNum;

@property (nonatomic, assign) CGPoint startPoint;

//随机出现
- (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;               //点击数
@property (nonatomic, assign) NSInteger residueClickNum;        //当前剩余点击数

@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) {
        //如果暴击 则开始计数
        self.clickNum++;
        if(self.critInterval == self.clickNum){
            //暴击
            //点击数变回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. 效果验证

下面就看一下具体的实现效果。

主播端

1. 功能要求

主播端和观众端点赞红心的动画效果展示。

2. 代码实现

这里说的是主播端的效果，其实，客户端和主播端的效果是一样的。从消息服务器获取点赞数，然后在主播和观众端的预览视图里面的setter方法里面进行动画的设置。

下面看一下代码

//消息：点赞数

- (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];
    
    //统计1s之内的点赞数总和
    [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);
    
    //更新点赞数
    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. 效果验证

下面我们就看一下实现的效果。

可以很好的实现这个效果。

后记

未完，待续~~~~