如何快速的开发一个完整的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;
}
如何快速的开发一个完整的iOS直播app(点赞功能)的更多相关文章
- 【如何快速的开发一个完整的iOS直播app】(美颜篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...
- 【如何快速的开发一个完整的iOS直播app】(采集篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...
- 【如何快速的开发一个完整的iOS直播app】(播放篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...
- 【如何快速的开发一个完整的iOS直播app】(原理篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...
- 【如何快速的开发一个完整的iOS直播app】(推流篇)
前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...
- 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)
来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...
- 如何快速的开发一个完整的iOS直播app(原理篇)
目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...
- 如何快速的开发一个完整的iOS直播app(美颜篇)
前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...
- 【如何快速的开发一个简单的iOS直播app】(代码篇)
开篇([如何快速的开发一个完整的iOS直播app](原理篇)) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量 ...
- 抖音短视频爆火的背后到底是什么——如何快速的开发一个完整的直播app
前言 今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花了很多时间了解直播,今天我来教你从零开始搭建一个完整的直播app,希望能帮助 ...
随机推荐
- k8s之容器运行时
Kubernetes 中的容器运行时 容器运行时(Container Runtime)是 Kubernetes 最重要的组件之一,负责真正管理镜像和容器的生命周期.Kubelet 通过 Contain ...
- pycharm里的jinja2注释问题
pycharm里html注释是{# #}而不是<!-- -->? 修改方式:如图修改成值None以后,command+/快捷键,html注释的符号就是<!-- 注释内容 --&g ...
- brew之加速
有没有出现这种场景:使用brew install 安装程序,一直卡在brew updating,这可能是使用着默认的github镜像源导致,那么我们就需要将其切换到国内 1.镜像切换(推荐中科大) 1 ...
- 在CodeBolcks+wxWidgets+wxSmith下的C++编程教程——用向导创建一个wxWidgets项目(sTetris)
0.前言 我想通过编写一个完整的游戏程序方式引导读者体验程序设计的全过程.我将采用多种方式编写具有相同效果的应用程序,并通过不同方式形成的代码和实现方法的对比来理解程序开发更深层的知识. 了解我编写教 ...
- k8s pod错误的排查步骤和处理方法
查pod kubectl get pod -n amadeus -o wide 查pod日志 kubectl logs -f --timestamps -n amadeus weyo-server-6 ...
- 强化学习算法中的log_det_jacobian
相关: https://colab.research.google.com/github/google/brax/blob/main/notebooks/training_torch.ipynb 之前 ...
- 【C#】【MySQL】【配置数据源】SSL Connection error 发生一个或多个错误。由于·意外的数据包格式,握手失败
[编程语言]C# [数据库]MySQL [控件]SqlDataSource [问题描述]使用SqlDataSource远程连接数据库时,测试连接发生如下错误:"SSL Connection ...
- 【数据结构】【直接排序法】Java代码
public class 直接排序 { /** * 直接排序法 仅排序1轮 * @param arr 数组 * @param ji 基准索引,填写几,就以谁为基准进行一次划分 */ public st ...
- Docker OCI runtime exec failed: exec failed: container_linux.go:344: starting container process caus
docker执行命令:docker exec -it 1e33b26152e1 /bin/bash 在进入容器报错:OCI runtime exec failed: exec failed: cont ...
- 2024 Nuxt3 年度生态总结
hello,大家好,我是程序员海军.很荣幸能与大家分享我今年的第三篇文章.在过去的一年里,我深入探索了Nuxt3,并在多个项目中实际应用了这一前沿框架,从而对其功能和应用有了全面而深刻的理解.今天,我 ...