客户端代码
点击小红心,发送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 =@"alpha";
alphaAnim.fromValue = @0;
alphaAnim.toValue = @1;
// 路径动画
CAKeyframeAnimation*pathAnim = [CAKeyframeAnimationanimation];
pathAnim.keyPath =@"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;
}