天天看點

【如何快速的開發一個完整的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 { 

   [superviewDidLoad];

// Do any additional setup after loading the view.

[[SocketIOClient clientSocket] on:@"upvote"callback:^(

NSArray* _Nonnull data, SocketAckEmitter * _Nonnull ack) 

{

// 監聽到點贊,進行點贊動畫[selfsetupVoteLayer];   

 }];

}

- (void)setupVoteLayer{

CALayer*layer = [CALayerlayer];    

layer.contents = (id)[UIImageimageNamed:@"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); 

   [selfsetupAnim:layer];

}

- (void)setupAnim:(CALayer*)layer{   

 [CATransactionbegin];  

  [CATransactionsetCompletionBlock:^{      

  [layer removeAllAnimations];     

   [layer removeFromSuperlayer];  

  }];

// 建立basic動畫

CABasicAnimation*alphaAnim = [CABasicAnimationanimation]; 

   alphaAnim.keyPath [email protected]"alpha";   

 alphaAnim.fromValue = @0;  

  alphaAnim.toValue = @1;

// 路徑動畫

CAKeyframeAnimation*pathAnim = [CAKeyframeAnimationanimation]; 

   pathAnim.keyPath [email protected]"position";  

  pathAnim.path = [selfanimPath].CGPath;

// 建立動畫組

CAAnimationGroup*group = [CAAnimationGroupanimation];  

  group.animations = @[alphaAnim,pathAnim];    

group.duration =5;  

  [layer addAnimation:group forKey:nil];   

 [CATransactioncommit];

}

- (UIBezierPath*)animPath{

UIBezierPath*path = [UIBezierPathbezierPath];

CGFloaty =self.view.height;

CGFloatx =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;  

  }

returnpath;

}