ios pan手势滑动消失动画_iOS仿抖音—评论视图滑动消失
iOS仿抖音短视频
前言
这是仿抖音短视频的第三篇—评论视图滑动消失,先来看下效果图:
comment.gif
说明
通过观察可以发现抖音的评论视图是从底部弹出的,包括顶部视图和UITableView视图,当UITableView滑动到最顶部时,整体视图可以滑动消失,特别需要注意的有以下三点:
1、当手指慢慢滑动的时候,松手后视图不消失
2、当手指快速滑动的时候,松手后视图消失
3、当手指点击上面的空白区域或关闭按钮,视图消失
经过分析可以知道评论视图最底部是一个透明的UIView,并且添加了UITapGestureRecognizer和UIPanGestureRecognizer来分别处理点击和滑动。下面来说说具体的实现:
1、添加手势并设置代理
// 添加点击手势
self.tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
self.tapGesture.delegate = self;
[self addGestureRecognizer:self.tapGesture];
// 添加滑动手势
self.panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePanGesture:)];
self.panGesture.delegate = self;
[self addGestureRecognizer:self.panGesture];
2、手势代理处理
#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
if (gestureRecognizer == self.panGesture) {
UIView *touchView = touch.view;
while (touchView != nil) {
if ([touchView isKindOfClass:[UIScrollView class]]) {
self.scrollView = (UIScrollView *)touchView;
self.isDragScrollView = YES;
break;
}else if (touchView == self.contentView) {
self.isDragScrollView = NO;
break;
}
touchView = (UIView *)[touchView nextResponder];
}
}
return YES;
}
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
if (gestureRecognizer == self.tapGesture) {
CGPoint point = [gestureRecognizer locationInView:self.contentView];
if ([self.contentView.layer containsPoint:point] && gestureRecognizer.view == self) {
return NO;
}
}else if (gestureRecognizer == self.panGesture) {
return YES;
}
return YES;
}
// 是否与其他手势共存
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
if (gestureRecognizer == self.panGesture) {
if ([otherGestureRecognizer isKindOfClass:NSClassFromString(@"UIScrollViewPanGestureRecognizer")] || [otherGestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]]) {
if ([otherGestureRecognizer.view isKindOfClass:[UIScrollView class]]) {
return YES;
}
}
}
return NO;
}
3、滑动手势处理
- (void)handlePanGesture:(UIPanGestureRecognizer *)panGesture {
CGPoint translation = [panGesture translationInView:self.contentView];
if (self.isDragScrollView) {
// 当UIScrollView在最顶部时,处理视图的滑动
if (self.scrollView.contentOffset.y <= 0) {
if (translation.y > 0) { // 向下拖拽
self.scrollView.contentOffset = CGPointZero;
self.scrollView.panGestureRecognizer.enabled = NO;
self.isDragScrollView = NO;
CGRect contentFrame = self.contentView.frame;
contentFrame.origin.y += translation.y;
self.contentView.frame = contentFrame;
}
}
}else {
CGFloat contentM = (self.frame.size.height - self.contentView.frame.size.height);
if (translation.y > 0) { // 向下拖拽
CGRect contentFrame = self.contentView.frame;
contentFrame.origin.y += translation.y;
self.contentView.frame = contentFrame;
}else if (translation.y < 0 && self.contentView.frame.origin.y > contentM) { // 向上拖拽
CGRect contentFrame = self.contentView.frame;
contentFrame.origin.y = MAX((self.contentView.frame.origin.y + translation.y), contentM);
self.contentView.frame = contentFrame;
}
}
[panGesture setTranslation:CGPointZero inView:self.contentView];
if (panGesture.state == UIGestureRecognizerStateEnded) {
CGPoint velocity = [panGesture velocityInView:self.contentView];
self.scrollView.panGestureRecognizer.enabled = YES;
// 结束时的速度>0 滑动距离> 5 且UIScrollView滑动到最顶部
if (velocity.y > 0 && self.lastTransitionY > 5 && !self.isDragScrollView) {
[self dismiss];
}else {
[self show];
}
}
self.lastTransitionY = translation.y;
}
最后
通过上面的步骤,基本上就实现了抖音的评论视图效果,当然还有一些细节需要处理,具体可以看github上的demoGKDYVideo,如果觉得不错,还请来个star!
ios pan手势滑动消失动画_iOS仿抖音—评论视图滑动消失相关推荐
- 仿抖音 火山视频滑动播放
VideoListDemo 介绍 仿抖音 火山视频滑动播放 TableView 自动播放 项目缘自fork,但fork得仓库代码不忍直视,后来基本连项目名都换了 三方库 pod 'ReactiveCo ...
- 仿抖音评论底部弹出框(列表框+发表框)
BottomSheetDialogFragment高仿抖音评论底部弹出框 先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...
- android+底部评论框,Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)...
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他 ...
- Android 仿抖音评论列表
仿抖音评论列表 https://github.com/sunjian0/Comment 突然来需求,需要协助公司其他部门项目,分给我们部门评论的功能部分.本来寻思,一个评论能有多少东西,写的时候发现细 ...
- 抖音只能上下滑动吗_iOS仿抖音—上下滑动播放视频
iOS仿抖音短视频 图做的不太好,将就看吧 2018.12.12 添加了tabbar,数据写死到了本地(接口过一段时间就会访问没数据) dy_tabbar.gif 前言 上一篇文章仿写了抖音的左右滑动 ...
- 仿抖音写上下滑动切换视频
公司小程序要做个仿抖音上下切换视频的效果,一开始想用swiper,有资料说多了会卡.原因是video标签太多的原因,查看资料有只是用一个video标签的,滑动时切换src即可 全部代码 <tem ...
- Android仿抖音双击点赞动画,Android仿抖音点击效果
原标题:Android仿抖音点击效果 作者丨wish_xy https://www.jianshu.com/p/1d17c38a3db1 学习自定义view,想找点东西耍一下,刚好看到抖音的点赞效果不 ...
- BottomSheetDialog仿抖音评论区的UI效果
大家好!我国著名数学家华罗庚曾说:聪明在于勤奋,天才出于积累. 一.问题背景 当下抖音成为了人们平常生活消遣娱乐必不可少的视频软件,它评论区的UI具有良好的用户交互性,其动画效果非常人性化,滑动出现的 ...
- 抖音只能上下滑动吗_抖音只能上下滑动吗_实现仿抖音视频滑动的两个方案
0.效果图 1.先来看一下需求 1. 项目中的视频播放,要求实现抖音那种竖直方向一次滑动一页的效果.滑动要流畅不卡顿,并且手动触摸滑动超过1/2的时候松开可以滑动下一页,没有超过1/2返回原页. 2. ...
最新文章
- 如何在vc的拆分窗口中使用CFormView派生类
- LTE: 系统内移动性知识点总结
- 7.STM32中对DMA_Config()函数的理解(自定义)测试DMA传输数据时CPU还可继续工作其他的事
- MyEclipse完好提示配置
- RealARM210 V3.2硬件版本 nand flash地址分配明细
- 448. Find All Numbers Disappeared in an Array
- Micrium/UCOS官网账号密码重新改问题
- net能和python结合吗_如何不用安装python就能在.NET里调用Python库
- 【转】C# HttpWebRequest 异常时获取 HttpWebResponse 数据
- Linux文件属性3——文件权限管理
- 那天删库跑路后,在牢里写的MySQL数据恢复大法……
- 20145226夏艺华 《Java程序设计》第2周学习总结
- 网络协议IPV6基础知识点集锦
- 移动 web 1px 边框解决方案
- OpenKM文档管理系统开源源码v6.3.9
- Assimp 裁剪编译 Android 库
- 服务器 关闭系统默认共享,默认共享还是有用滴!
- matplotlib系列-plt.axis
- t440p安装黑苹果+win10双系统记录
- k8s-卸载K8S集群