客户端代码

  • 点击小红心,发送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(点赞功能)的更多相关文章

  1. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  2. 【如何快速的开发一个完整的iOS直播app】(采集篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,首先需要采集主 ...

  3. 【如何快速的开发一个完整的iOS直播app】(播放篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看上篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,集成ijkpl ...

  4. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  5. 【如何快速的开发一个完整的iOS直播app】(推流篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如 ...

  6. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

  7. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

  8. 如何快速的开发一个完整的iOS直播app(美颜篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...

  9. 【如何快速的开发一个简单的iOS直播app】(代码篇)

    开篇([如何快速的开发一个完整的iOS直播app](原理篇)) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量 ...

  10. 抖音短视频爆火的背后到底是什么——如何快速的开发一个完整的直播app

    前言 今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,由于第一次接触的原因,因此花了很多时间了解直播,今天我来教你从零开始搭建一个完整的直播app,希望能帮助 ...

随机推荐

  1. 使用VSCode进行WSL2的本机调试

    首先我们需要安装Remote Development插件(这个Remote-WSL一定要保证是装上的哦). 然后我们先连接到WSL. (第一次进入远程模式,会慢一些,需要下载一些组件) (如果你打开这 ...

  2. ABC 364

    ABC 364 E - Maximum Glutton 给定 \((a_i,b_i),X,Y\), 记 \(k\) 是第一个让 \(\sum_{i=1}^{k} a_i > X\) 或 \(\s ...

  3. 《机器学习实战》(Machine Learning in Action)

    地址: https://www.manning.com/books/machine-learning-in-action 代码地址: https://www.manning.com/downloads ...

  4. Mysql篇-Buffer Pool中的三大链表

    为什么要有 Buffer Pool? 虽然说 MySQL 的数据是存储在磁盘里的,但是也不能每次都从磁盘里面读取数据,这样性能是极差的. 要想提升查询性能,那就加个缓存.所以,当数据从磁盘中取出后,缓 ...

  5. 780E开发板之errDump错误日志上报,操作方法解析

    ​ 一.errDump功能 LuatOS-Air错误日志上报功能模块名叫:errDump,errDump对"量产投放市场的设备,远程调试初步定位问题"至关重要,强烈建议客户一定要使 ...

  6. P4629 SHOI2015 聚变反应炉

    P4629 SHOI2015 聚变反应炉 树上背包+树形dp. 算是套娃题吗? 思路 看到数据考虑数据分治. part1 贪心 \(c_i\leq 1\) 对于这种情况,我们考虑贪心的点亮. 手玩几组 ...

  7. php操作sqlite3

    距离上次接触sqlite3已经快一年了,去年这篇文章讲跟着菜鸟教程学python操作sqlite3,https://www.cnblogs.com/lizhaoyao/p/13717381.html ...

  8. 基于 JUnit 的全局单元测试程序

    在 Java 程序中,JUnit 是备受开发人员喜爱的单元测试工具.通常,程序员会对每个程序的每个模块写单元测试.对于小型程序来说,程序员只需要手工执行这些单元测试程序就可以,工作量并不大,但是对于中 ...

  9. 如何使用建造者模式(Builder Pattern)创建不可变类

    本文由 ImportNew - 唐小娟 翻译自 Journaldev.如需转载本文,请先参见文章末尾处的转载要求. ImportNew注:如果你也对Java技术翻译分享感兴趣,欢迎加入我们的 Java ...

  10. LinkedList原码分析(基于JDK1.6)

    <Java集合类>一文中已经最List的基本操作进行说明,并且比较了ArrayList和LinkedList的效率.本文将进一步解析LinkedList. LinkedList也和Arra ...