用戶端代碼
點選小紅心,發送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;
}