寫在前面

這兩天還是在搗鼓collectionView，每當(dāng)我切換自己自定義的各種奇奇怪怪的collectionViewLayout的時候焙贷，我都對蘋果對布局切換的動畫處理佩服得五體投地尝偎，如此絲滑般流暢凿滤，同時蘋果也將這種絲滑的動畫效果用到了自定義轉(zhuǎn)場中拔创，從iOS7開始呢诬，在collectionViewController中就伴隨著自定義轉(zhuǎn)場的功能產(chǎn)生了一個新的屬性：useLayoutToLayoutNavigationTransitions,這是一個BOOL值涌哲，如果設(shè)置該值為YES胖缤，如果navigationController push或者pop 一個collectionViewController 到另一個collectionViewController的時候，其所在的navigationController就可以用collectionView的布局轉(zhuǎn)場動畫來替換標(biāo)準(zhǔn)的轉(zhuǎn)場阀圾，這點大家可以自行嘗試一下哪廓，但是顯然，這個屬性的致命的局限性就是你得必須滿足都是collectionViewController初烘，對于collectionView就沒辦法了涡真，所以我就思考了一下如何在兩個collectionView之間轉(zhuǎn)場，進而有了一個更奇怪的想法账月，能不能在一個tableView和collectionView之間實現(xiàn)自定義轉(zhuǎn)場效果综膀，所以就有了如下的效果：

圖1

t1.gif

圖2：小到大 + 手勢驅(qū)動

t3.gif

圖3： 大到小 + 手勢驅(qū)動

t2.gif

關(guān)于效果的邏輯

1、push的時候點擊tableView中的任意一個cell局齿，當(dāng)轉(zhuǎn)場到collectionView中的時候，將collectionView移動到這個cell在第一行的位置顯示橄登，如果這個位置超過了collectionView的最大contentOffset抓歼，則移動到最大contentOffset就行了，這樣了保證點擊的cell的顯示盡量靠前拢锹，比較符合邏輯谣妻；
2、同理卒稳，pop的的時候點擊collectionView中任意cell蹋半，當(dāng)轉(zhuǎn)場到tableView的時候，將tableView移動到把這個cell顯示到最前方的位置充坑，如果超過了最大contentOffset則移動到最大的offset减江；如果點擊了back，就把當(dāng)前可顯示cell的第一個展示到最前方捻爷；

原理

關(guān)于自定義轉(zhuǎn)場的基礎(chǔ)知識辈灼，大家可以參照我在簡書的第一篇文章：iOS自定義轉(zhuǎn)場動畫，所以下面我不在介紹自定義轉(zhuǎn)場的基本知識的也榄，我這里用到的轉(zhuǎn)場管理者和手勢過渡管理者都是來自于這篇文章中的代碼巡莹，畢竟它們被蘋果設(shè)計的相當(dāng)容易復(fù)用，下面主要解釋一下動畫實現(xiàn)的原理甜紫，不過需要吐槽一下降宅，動畫的代碼量比較大，如果真的需要在項目中用到這個效果囚霸，你可能還需要微調(diào)很多腰根，畢竟項目中大部分cell都是自定義的，而且cell的高度可能都不同邮辽，所以計算會更麻煩唠雕，我只是寫出了我的思路贸营，供大家參考而已，github地址請戳->XWTableViewToCollectionViewTransition,如果大家有更好的想法歡迎留言和拍磚岩睁！

1钞脂、首先是push的動畫:(大概邏輯就是根據(jù)點擊的indexPath計算collectionView展示時候應(yīng)該的contentOffset -> 根據(jù)offset得到可collectionView可顯示的item -> 根據(jù)當(dāng)前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;
    //得到當(dāng)前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];
    //得到當(dāng)前點擊的indexPath
    NSIndexPath *selectIndexPath = [tableView indexPathForSelectedRow];
    //通過點擊的indexPath和collectionView的ContentSize計算collectionView顯示時候的contentOffset
    //獲取點擊indexPath對應(yīng)在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));
    //得到當(dāng)前顯示區(qū)域的frame
    CGRect newFrame = CGRectMake(0, MIN(maxY, selectAttr.frame.origin.y), collectionView.bounds.size.width, collectionView.bounds.size.height);
    //根據(jù)frame得到可顯示區(qū)域內(nèi)所有的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;
    //現(xiàn)在可以拿到需要動畫的第一個indexpath
    NSIndexPath *animationFirstIndexPath = collectionViewFirstPath.item > tableViewFirstPath.row ? tableViewFirstPath : collectionViewFirstPath;
    //現(xiàn)在可以拿到需要動畫的最后一個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 ++) {
        //這里就無法使用截圖大法了冰啃，因為我們要計算可顯示區(qū)域外的cell的位置，所以只有直接通過數(shù)據(jù)源取得圖片刘莹，自己生成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阎毅，并移動到對應(yīng)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) {
        //標(biāo)記轉(zhuǎn)場完成
        [transitionContext completeTransition:YES];
        //設(shè)置collectionView的contentOffset
        [collectionView setContentOffset:newOffset];
        //移除所有的可動畫視圖
        [animationViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
        //顯示出collectionView
        collectionView.hidden = NO;
        //恢復(fù)隱藏的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動畫:(大概邏輯就是根據(jù)點擊的indexPath計算tableView展示時候應(yīng)該的contentOffset点弯，并將tableView移動到該位置 -> 根據(jù)offset得到可tableView可顯示的cell -> 根據(jù)當(dāng)前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;
    }];
    //當(dāng)前選中的cell
    NSIndexPath *selectIndexPath = [collectionView indexPathsForSelectedItems].firstObject;
    //如果不存在抢肛，比如直接back狼钮，取可顯示的第一個cell
    if (!selectIndexPath) {
        selectIndexPath = collectionViewVisbleIndexPaths.firstObject;
    }
    //計算tableView最大的contentOffsetY
    CGFloat maxY = tableView.contentSize.height - tableView.frame.size.height;
    //根據(jù)點擊的selectIndexPath和maxY得到當(dāng)前tableView應(yīng)該移動到的offset
    CGPoint newOffset = CGPointMake(0, MIN(maxY, 60 * selectIndexPath.item - 64));
    
    //設(shè)置tableView的newOffset,必須先設(shè)置，下面的操作都建于此設(shè)置之后
    [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存在一個臨時數(shù)組
    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為當(dāng)前對應(yīng)的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;
        //取出所有的動畫視圖設(shè)置其動畫結(jié)束的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)];
    }];
}

最后加上手勢過渡管理這就可以達成手勢驅(qū)動的效果了熬芜，整體的效果還是達到了預(yù)期了

最后

是不是想吐槽實現(xiàn)起來相當(dāng)麻煩，的確是這樣的福稳，因為我們還需要考慮屏幕之外的布局涎拉，或者說是重用池中的那些cell做考慮，才能保證每個cell能夠移動到正確位置的圆，所以不像以前僅僅需要對屏幕中的視圖動畫了鼓拧！不過相比于這個例子最后希望大家多多提出改進意見或者新的便捷的思路，或者能在github上給一顆星星鼓勵一下略板！github地址請戳->XWTableViewToCollectionViewTransition