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!