iOS仿抖音短视频
iOS仿抖音—左右滑动切换效果
iOS仿抖音—上下滑动播放视频
iOS仿抖音—评论视图滑动消失
iOS仿抖音—加载点赞动画效果
iOS仿抖音—播放视图滑动隐藏
前言
最近继续对仿抖音的demo进行了更新，本次增加的内容是抖音的个人详情页的播放视图动画显示及隐藏功能，先来看下效果图：
播放视图滑动隐藏
说明
实现方案的选取其实用了不少的时间，中间也走了很多弯路。最后通过各种调试基本完成了跟抖音一样的效果，下面说下实现的过程
1、通过自定义present转场实现
刚开始是在网上看到有通过自定义present转场来实现抖音的效果，但是present出的控制器是UIViewController，而抖音的效果是显示出来的播放视图还可以push到新的控制器，于是我把present的控制器改为UINavigationController，但是中间出现了各种问题，具体可以自己试试，而且如果每次都是通过present的话就会出现很多层的presentVC，后面会很难处理，所以放弃了这个方案
2、通过自定义push转场实现
第二个自定义push转场，这个动画显示的时候没问题，但是左滑隐藏的时候由于还没有pop操作，所以下面的控制器是看不到的，跟抖音的效果不一样，通过各种尝试也没有调好，所以也放弃了这种方案。
3、通过自定义视图实现
由于刚开始看网上的是自定义转场实现，所以就没考虑自定义视图，直到最后转场各种尝试不成功才偶然间想到这个方法，下面具体说说实现的步骤
实现
1、显示播放视图
首先自定义视图并传入源控制器及数据
- (instancetype)initWithVC:(GKDYPersonalViewController *)vc videos:(NSArray *)videos index:(NSInteger)index {
if (self = [super init]) {
self.backgroundColor = [UIColor blackColor];
self.vc = vc;
[self addSubview:self.videoView];
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] init];
[panGesture addTarget:self action:@selector(handlePanGesture:)];
[self addGestureRecognizer:panGesture];
[self.videoView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self);
}];
// 设置数据
[self.videoView setModels:videos index:index];
}
return self;
}
显示播放视图，获取到点击的cell，通过动画改变frame，最终实现显示效果
- (void)show {
// 隐藏状态栏及禁用手势
self.vc.gk_statusBarHidden = YES;
self.vc.gk_interactivePopDisabled = YES;
// 添加视图
[self.vc.view addSubview:self];
// 获取当前显示的列表控制器
GKDYListViewController *listVC = self.vc.currentListVC;
// 获取当前点击的cell
GKDYListCollectionViewCell *cell = (GKDYListCollectionViewCell *)[listVC.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:listVC.selectedIndex inSection:0]];
CGRect originalFrame = [listVC.collectionView convertRect:cell.frame toView:self.vc.view];
CGRect finalFrame = self.vc.view.frame;
self.frame = finalFrame;
self.center = CGPointMake(originalFrame.origin.x + originalFrame.size.width * 0.5, originalFrame.origin.y + originalFrame.size.height * 0.5);
self.transform = CGAffineTransformMakeScale(originalFrame.size.width / finalFrame.size.width, originalFrame.size.height / finalFrame.size.height);
// 显示动画
[UIView animateWithDuration:0.3
delay:0
usingSpringWithDamping:0.8
initialSpringVelocity:1
options:UIViewAnimationOptionLayoutSubviews
animations:^{
self.center = CGPointMake(finalFrame.origin.x + finalFrame.size.width * 0.5, finalFrame.origin.y + finalFrame.size.height * 0.5);
self.transform = CGAffineTransformMakeScale(1, 1);
} completion:nil];
}
2、滑动手势的处理
- (void)handlePanGesture:(UIPanGestureRecognizer *)panGesture {
CGPoint translation = [panGesture translationInView:panGesture.view.superview];
if (!self.interacting && (translation.x < 0 || translation.y < 0 || translation.x < translation.y)) return;
switch (panGesture.state) {
case UIGestureRecognizerStateBegan: {
// 修复当从右侧向左侧滑动时的bug，避免开始的时候从右向左滑动
CGPoint vel = [panGesture velocityInView:panGesture.view];
if (!self.interacting && vel.x < 0) {
self.interacting = NO;
return;
}
self.interacting = YES;
self.vc.gk_statusBarHidden = NO;
[self.videoView pause];
}
break;
case UIGestureRecognizerStateChanged: {
CGFloat progress = translation.x / [UIScreen mainScreen].bounds.size.width;
progress = fminf(fmaxf(progress, 0.0f), 1.0f);
CGFloat ratio = 1.0f - progress * 0.5f;
self.videoView.center = CGPointMake(self.vc.view.center.x + translation.x * ratio, self.vc.view.center.y + translation.y * ratio);
self.videoView.transform = CGAffineTransformMakeScale(ratio, ratio);
CGFloat percent = 1 - fabs(translation.x) / [UIScreen mainScreen].bounds.size.width;
self.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:percent];
}
break;
case UIGestureRecognizerStateCancelled:
case UIGestureRecognizerStateEnded: {
CGFloat progress = translation.x / [UIScreen mainScreen].bounds.size.width;
progress = fminf(fmaxf(progress, 0.0f), 1.0f);
if (progress < 0.2) { // 恢复
self.vc.gk_statusBarHidden = YES;
self.vc.gk_interactivePopDisabled = YES;
[UIView animateWithDuration:0.25
delay:0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
self.videoView.center = self.vc.view.center;
self.videoView.transform = CGAffineTransformMakeScale(1.0f, 1.0f);
} completion:^(BOOL finished) {
self.interacting = NO;
[self.videoView resume];
self.backgroundColor = [UIColor blackColor];
}];
}else { // 消失
[self dismiss];
}
}
break;
default:
break;
}
}
3、隐藏播放视图
- (void)dismiss {
// 获取当前显示的控制器
GKDYListViewController *listVC = self.vc.currentListVC;
// 获取cell
UICollectionViewCell *cell = [listVC.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForItem:self.videoView.currentPlayIndex inSection:0]];
UIView *snapShotView;
CGRect finalFrame = CGRectZero;
if (cell) {
snapShotView = [cell snapshotViewAfterScreenUpdates:NO];
snapShotView.frame = self.videoView.frame;
finalFrame = [listVC.collectionView convertRect:cell.frame toView:self.vc.view];
}else {
snapShotView = [self.videoView snapshotViewAfterScreenUpdates:NO];
finalFrame = CGRectMake((SCREEN_WIDTH - 5) * 0.5f, (SCREEN_HEIGHT - 5) * 0.5f, 5, 5);
}
[self addSubview:snapShotView];
self.videoView.hidden = YES;
[self.videoView pause];
self.backgroundColor = [UIColor clearColor];
// 隐藏动画
[UIView animateWithDuration:0.25 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0.2 options:UIViewAnimationOptionCurveEaseInOut animations:^{
snapShotView.frame = finalFrame;
} completion:^(BOOL finished) {
[snapShotView removeFromSuperview];
self.vc.gk_interactivePopDisabled = NO;
[self removeFromSuperview];
}];
}
最后
通过上面的步骤，基本实现了抖音的播放视图滑动隐藏效果，具体的实现可以到github下载，demo地址GKDYVideo，如果您觉得不错还请点个star。当然如果你对此效果的实现有更好的方案，也可以提出来，我们可以共同探讨。
网友评论