tableview到collectionView自定义转场动画+手势驱动

写在前面

这两天还是在捣鼓collectionView，每当我切换自己自定义的各种奇奇怪怪的collectionViewLayout的时候，我都对苹果对布局切换的动画处理佩服得五体投地，如此丝滑般流畅，同时苹果也将这种丝滑的动画效果用到了自定义转场中，从iOS7开始，在collectionViewController中就伴随着自定义转场的功能产生了一个新的属性：useLayoutToLayoutNavigationTransitions,这是一个BOOL值，如果设置该值为YES，如果navigationController push或者pop 一个collectionViewController 到另一个collectionViewController的时候，其所在的navigationController就可以用collectionView的布局转场动画来替换标准的转场，这点大家可以自行尝试一下，但是显然，这个属性的致命的局限性就是你得必须满足都是collectionViewController，对于collectionView就没办法了，所以我就思考了一下如何在两个collectionView之间转场，进而有了一个更奇怪的想法，能不能在一个tableView和collectionView之间实现自定义转场效果，所以就有了如下的效果：

图1

t1.gif

图2：小到大 + 手势驱动

t3.gif

图3：大到小 + 手势驱动

t2.gif

关于效果的逻辑

1、push的时候点击tableView中的任意一个cell，当转场到collectionView中的时候，将collectionView移动到这个cell在第一行的位置显示，如果这个位置超过了collectionView的最大contentOffset，则移动到最大contentOffset就行了，这样了保证点击的cell的显示尽量靠前，比较符合逻辑；
2、同理，pop的的时候点击collectionView中任意cell，当转场到tableView的时候，将tableView移动到把这个cell显示到最前方的位置，如果超过了最大contentOffset则移动到最大的offset；如果点击了back，就把当前可显示cell的第一个展示到最前方；

原理

关于自定义转场的基础知识，大家可以参照我在简书的第一篇文章：iOS自定义转场动画，所以下面我不在介绍自定义转场的基本知识的，我这里用到的转场管理者和手势过渡管理者都是来自于这篇文章中的代码，毕竟它们被苹果设计的相当容易复用，下面主要解释一下动画实现的原理，不过需要吐槽一下，动画的代码量比较大，如果真的需要在项目中用到这个效果，你可能还需要微调很多，毕竟项目中大部分cell都是自定义的，而且cell的高度可能都不同，所以计算会更麻烦，我只是写出了我的思路，供大家参考而已，github地址请戳->XWTableViewToCollectionViewTransition,如果大家有更好的想法欢迎留言和拍砖！

1、首先是push的动画:(大概逻辑就是根据点击的indexPath计算collectionView展示时候应该的contentOffset -> 根据offset得到可collectionView可显示的item -> 根据当前tableView的cell和可显示的item 得出需要动画的所有cell并计算他们的起始和终止的frame，然后动画)

- (void)doPushAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    UITableView *tableView = fromVC.view.subviews.lastObject;
    UICollectionView *collectionView = toVC.view.subviews.lastObject;
    [containerView addSubview:toVC.view];
    toVC.view.alpha = 0;
    collectionView.hidden = YES;
    //得到当前tableView显示在屏幕上的indexPath
    NSArray *visibleIndexpaths = [tableView indexPathsForVisibleRows];
    //拿到tableView可显示的第一个indexPath
    NSIndexPath *tableViewFirstPath = visibleIndexpaths.firstObject;
    //拿到tableView可显示的最后一个indexPath
    NSIndexPath *tableViewLastPath = visibleIndexpaths.lastObject;
    //得到tableView可显示的第一个cell
    UITableViewCell *firstVisibleCell = [tableView cellForRowAtIndexPath:tableViewFirstPath];
    //得到当前点击的indexPath
    NSIndexPath *selectIndexPath = [tableView indexPathForSelectedRow];
    //通过点击的indexPath和collectionView的ContentSize计算collectionView显示时候的contentOffset
    //获取点击indexPath对应在collectionView中的attr
    UICollectionViewLayoutAttributes *selectAttr = [collectionView layoutAttributesForItemAtIndexPath:selectIndexPath];
    //获取collectionView的ContentSize
    CGSize contentSize = [collectionView.collectionViewLayout collectionViewContentSize];
    //计算contentOffset的最大值
    CGFloat maxY = contentSize.height - collectionView.bounds.size.height;
    //计算collectionView显示时候的offset：如果该offset超过了最大值就去最大值，否则就取将所选择的indexPath的item排在可显示的第一行的时候的indexPath
    CGPoint newOffset = CGPointMake(0, MIN(maxY, selectAttr.frame.origin.y - 64));
    //得到当前显示区域的frame
    CGRect newFrame = CGRectMake(0, MIN(maxY, selectAttr.frame.origin.y), collectionView.bounds.size.width, collectionView.bounds.size.height);
    //根据frame得到可显示区域内所有的item的attrs
    NSArray *showAttrs = [collectionView.collectionViewLayout layoutAttributesForElementsInRect:newFrame];
    //进而得到所有可显示的item的indexPath
    NSMutableArray *showIndexPaths = @[].mutableCopy;
    for (UICollectionViewLayoutAttributes *attr in showAttrs) {
        [showIndexPaths addObject:attr.indexPath];
    }
    //拿到collectionView可显示的第一个indexPath
    NSIndexPath *collectionViewFirstPath = showIndexPaths.firstObject;
    //拿到collectionView可显示的最后一个indexPath
    NSIndexPath *collectionViewLastPath = showIndexPaths.lastObject;
    //现在可以拿到需要动画的第一个indexpath
    NSIndexPath *animationFirstIndexPath = collectionViewFirstPath.item > tableViewFirstPath.row ? tableViewFirstPath : collectionViewFirstPath;
    //现在可以拿到需要动画的最后一个indexpath
    NSIndexPath *animationLastIndexPath = collectionViewLastPath.item > tableViewLastPath.row ? collectionViewLastPath : tableViewLastPath;
    //下面就可以计算需要动画的视图的起始frame了
    NSMutableArray *animationViews = @[].mutableCopy;
    NSMutableArray *animationIndexPaths = @[].mutableCopy;
    NSMutableArray *images = @[].mutableCopy;
    for (NSInteger i = animationFirstIndexPath.row; i <= animationLastIndexPath.row; i ++) {
        //这里就无法使用截图大法了，因为我们要计算可显示区域外的cell的位置，所以只有直接通过数据源取得图片，自己生成ImageView
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_data[i]]];
        //frame从第一个开始依次向下排列
        imageView.frame = CGRectApplyAffineTransform([[firstVisibleCell imageView] convertRect:[firstVisibleCell imageView].bounds toView:containerView], CGAffineTransformMakeTranslation(0, -60 * (tableViewFirstPath.row - i)));
        //添加imageView到contentView
        [animationViews addObject:imageView];
        [containerView addSubview:imageView];
        [animationIndexPaths addObject:[NSIndexPath indexPathForRow:i inSection:0]];
        //隐藏tableView的imageView
        UIImageView *imgView = (UIImageView *)[[tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]] imageView];
        if (imgView) {
            imgView.hidden = YES;
            [images addObject:imgView];
        }
    }
    //终于可以动画了
    [UIView animateWithDuration:1 animations:^{
        //让toView显示出来
        toVC.view.alpha = 1;
        //取出所有的可动画的imageView，并移动到对应collectionView的正确位置去
        for (int i = 0; i < animationViews.count; i ++) {
            UIView *animationView = animationViews[i];
            NSIndexPath *animationPath = animationIndexPaths[i];
            animationView.frame = CGRectApplyAffineTransform([collectionView layoutAttributesForItemAtIndexPath:animationPath].frame, CGAffineTransformMakeTranslation(0, -newOffset.y));
        }
    } completion:^(BOOL finished) {
        //标记转场完成
        [transitionContext completeTransition:YES];
        //设置collectionView的contentOffset
        [collectionView setContentOffset:newOffset];
        //移除所有的可动画视图
        [animationViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
        //显示出collectionView
        collectionView.hidden = NO;
        //恢复隐藏的tableViewcell的imageView
        for (int i = 0; i < _data.count; i ++) {
            UITableViewCell *cell = [tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];
            cell.imageView.hidden = NO;
        }
    }];
}

2、然后是pop动画:(大概逻辑就是根据点击的indexPath计算tableView展示时候应该的contentOffset，并将tableView移动到该位置 -> 根据offset得到可tableView可显示的cell -> 根据当前collectionView的可显示item和tableview可显示的cell得出需要动画的所有cell并计算他们的起始和终止的frame，然后动画)

- (void)doPopAnimation:(id<UIViewControllerContextTransitioning>)transitionContext{
    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    UITableView *tableView = toVC.view.subviews.lastObject;
    UICollectionView *collectionView = fromVC.view.subviews.lastObject;
    [containerView addSubview:toVC.view];
    toVC.view.alpha = 0;
    //collectionView可显示的所有cell
    NSArray *visibleCells = [collectionView visibleCells];
    //collectionView可显示的所有indexPath
    NSMutableArray *collectionViewVisbleIndexPaths = @[].mutableCopy;
    for (UICollectionViewCell *cell in visibleCells) {
        [collectionViewVisbleIndexPaths addObject:[collectionView indexPathForCell:cell]];
        cell.hidden = YES;
        
    }
    //由于取出的顺序不是从小到大，所以排序一次
    [collectionViewVisbleIndexPaths sortUsingComparator:^NSComparisonResult(NSIndexPath * obj1, NSIndexPath * obj2) {
        return obj1.item < obj2.item ? NSOrderedAscending : NSOrderedDescending;
    }];
    //当前选中的cell
    NSIndexPath *selectIndexPath = [collectionView indexPathsForSelectedItems].firstObject;
    //如果不存在，比如直接back，取可显示的第一个cell
    if (!selectIndexPath) {
        selectIndexPath = collectionViewVisbleIndexPaths.firstObject;
    }
    //计算tableView最大的contentOffsetY
    CGFloat maxY = tableView.contentSize.height - tableView.frame.size.height;
    //根据点击的selectIndexPath和maxY得到当前tableView应该移动到的offset
    CGPoint newOffset = CGPointMake(0, MIN(maxY, 60 * selectIndexPath.item - 64));
    
    //设置tableView的newOffset,必须先设置，下面的操作都建于此设置之后
    [tableView setContentOffset:newOffset];
    //取出newOffset下的可显示cell,隐藏cell的imageView
    NSMutableArray *tableViewVisibleIndexPaths = @[].mutableCopy;
    for (UITableViewCell *cell in [tableView visibleCells]) {
        cell.imageView.hidden = YES;
        [tableViewVisibleIndexPaths addObject:[tableView indexPathForCell:cell]];
    }
    //计算可动画的第一个indexPath
    NSIndexPath *animationFirstIndexPath = [tableViewVisibleIndexPaths.firstObject row] > [collectionViewVisbleIndexPaths.firstObject row] ? collectionViewVisbleIndexPaths.firstObject : tableViewVisibleIndexPaths.firstObject;
    //计算可动画的最后一个indexPath
    NSIndexPath *animationLastIndexPath = [tableViewVisibleIndexPaths.lastObject row] > [collectionViewVisbleIndexPaths.lastObject row] ? tableViewVisibleIndexPaths.lastObject : collectionViewVisbleIndexPaths.lastObject;
    //生成所有需要动画的临时UIImageView存在一个临时数组
    NSMutableArray *animationViews = @[].mutableCopy;
    NSMutableArray *animationIndexPaths = @[].mutableCopy;
    for (NSInteger i = animationFirstIndexPath.row; i <= animationLastIndexPath.row; i ++) {
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_data[i]]];
        //frame为当前对应的item减去offset的值
        imageView.frame = CGRectApplyAffineTransform([collectionView layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]].frame, CGAffineTransformMakeTranslation(0,  -collectionView.contentOffset.y));
        [containerView addSubview:imageView];
        [animationViews addObject:imageView];
        [animationIndexPaths addObject:[NSIndexPath indexPathForItem:i inSection:0]];
    }
    //开始动画
    [UIView animateWithDuration:1 animations:^{
        //显示出toView
        toVC.view.alpha = 1;
        //取出所有的动画视图设置其动画结束的frame，frame有indexPath和newOffset决定
        for (int i = 0; i < animationViews.count; i ++) {
            UIView *animationView = animationViews[i];
            NSIndexPath *animationPath = animationIndexPaths[i];
            animationView.frame = CGRectMake(15, 60 * [animationPath row]  - newOffset.y, 60, 60);
        }
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
        if (![transitionContext transitionWasCancelled]) {
            //如果成功了
            //显示visiblecell中的imageView
            for (UITableViewCell *cell in [tableView visibleCells]) {
                cell.imageView.hidden = NO;
            }
        }else{
            //否者显示出隐藏的collectionView的item
            for (UICollectionViewCell *cell in visibleCells) {
                [collectionViewVisbleIndexPaths addObject:[collectionView indexPathForCell:cell]];
                cell.hidden = NO;
            }
        }
        //移除所有的临时视图
        [animationViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }];
}

最后加上手势过渡管理这就可以达成手势驱动的效果了，整体的效果还是达到了预期了

最后

是不是想吐槽实现起来相当麻烦，的确是这样的，因为我们还需要考虑屏幕之外的布局，或者说是重用池中的那些cell做考虑，才能保证每个cell能够移动到正确位置，所以不像以前仅仅需要对屏幕中的视图动画了！不过相比于这个例子最后希望大家多多提出改进意见或者新的便捷的思路，或者能在github上给一颗星星鼓励一下！github地址请戳->XWTableViewToCollectionViewTransition

tableview到collectionView自定义转场动画+手势驱动

写在前面

图1

图2：小到大 + 手势驱动

图3： 大到小 + 手势驱动

关于效果的逻辑

原理

最后

推荐阅读更多精彩内容

图3：大到小 + 手势驱动