• 如何快速的开发一个完整的iOS直播app(点赞功能)


    客户端代码

    • 点击小红心,发送socket给服务器,并且要传递房间Key给服务器,通知给哪个主播点赞,就能传入到对应的分组socket中
    • 怎么传递房间key,房间Key在主播界面,一般一个客户端,只会产生一个房间,可以记录到socket对象中
    • 业务逻辑:用户点击小红心,小红心就会往上慢慢飘。
    • 实现原理:其实就是一个动画。
    • 怎么实现:用UIView做不了,因为小红心是不规则的左右摆动,慢慢上去的。
    • 可以使用核心动画(创建CALayer),CABasicAnimation和CAKeyframeAnimation,放在一个group组中。
    • CABasicAnimation:渐渐显示动画,修改透明度
    • CAKeyframeAnimation:做路径动画,描述小红心的路径,然后按照这个路径走.
      • 描述一根线,x从宽度中获取随机值,y值每次减减
    • 动画完成,记得移除,可以用动画事务类,监听动画是否完成,代码一定要放在最前面
    XMGLiveOverlayViewController.m
    
    - (IBAction)clickUpvote:(id)sender {
        
        // 发送点赞事件
        [[SocketIOClient clientSocket] emit:@"upvote" with:@[[SocketIOClient clientSocket].roomKey]];
        
    }
    
    
    XMGUpVoteViewController.m
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
        
        [[SocketIOClient clientSocket] on:@"upvote" callback:^(NSArray * _Nonnull data, SocketAckEmitter * _Nonnull ack) {
           // 监听到点赞,进行点赞动画
            [self setupVoteLayer];
        }];
        
    }
    
    - (void)setupVoteLayer
    {
        CALayer *layer = [CALayer layer];
        layer.contents = (id)[UIImage imageNamed:@"hearts (1)"].CGImage;
        [self.view.layer addSublayer:layer];
        layer.bounds = CGRectMake(0, 0, 30, 30);
        layer.position = CGPointMake(self.view.width * 0.5, self.view.height);
        
        [self setupAnim:layer];
    }
    
    - (void)setupAnim:(CALayer *)layer
    {
        [CATransaction begin];
        
        [CATransaction setCompletionBlock:^{
            [layer removeAllAnimations];
            [layer removeFromSuperlayer];
        }];
        
        // 创建basic动画
        CABasicAnimation *alphaAnim = [CABasicAnimation animation];
        alphaAnim.keyPath = @"alpha";
        alphaAnim.fromValue = @0;
        alphaAnim.toValue = @1;
        
        // 路径动画
        CAKeyframeAnimation *pathAnim = [CAKeyframeAnimation animation];
        pathAnim.keyPath = @"position";
        pathAnim.path = [self animPath].CGPath;
        
        
        // 创建动画组
        CAAnimationGroup *group = [CAAnimationGroup animation];
        group.animations = @[alphaAnim,pathAnim];
        group.duration = 5;
        [layer addAnimation:group forKey:nil];
        
        
        
        [CATransaction commit];
    }
    
    
    - (UIBezierPath *)animPath
    {
        UIBezierPath *path = [UIBezierPath bezierPath];
        
        CGFloat y = self.view.height;
        CGFloat x = self.view.width * 0.5;
        while (y > 0) {
            x = arc4random_uniform(self.view.width - 20) + 20;
            if (y == self.view.height) {
                [path moveToPoint:CGPointMake(x, y)];
            } else {
                [path addLineToPoint:CGPointMake(x, y)];
            }
            y -= 20;
        }
        
        
        return path;
    }
  • 相关阅读:
    vuex状态管理
    vue3.0创建一个项目
    Django + Vue
    Django部署
    django简单使用
    Django模型
    Centos7编译openjdk8源码
    深入了解final
    深入了解java值传递
    java自带的Logger日志系统
  • 原文地址:https://www.cnblogs.com/hanease/p/16253183.html
Copyright © 2020-2023  润新知