寫在前面

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

圖1

t1.gif

圖2：小到大 + 手勢(shì)驅(qū)動(dòng)

t3.gif

圖3： 大到小 + 手勢(shì)驅(qū)動(dòng)

t2.gif

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

1、push的時(shí)候點(diǎn)擊tableView中的任意一個(gè)cell，當(dāng)轉(zhuǎn)場(chǎng)到collectionView中的時(shí)候，將collectionView移動(dòng)到這個(gè)cell在第一行的位置顯示，如果這個(gè)位置超過了collectionView的最大contentOffset，則移動(dòng)到最大contentOffset就行了，這樣了保證點(diǎn)擊的cell的顯示盡量靠前，比較符合邏輯；
2、同理，pop的的時(shí)候點(diǎn)擊collectionView中任意cell，當(dāng)轉(zhuǎn)場(chǎng)到tableView的時(shí)候，將tableView移動(dòng)到把這個(gè)cell顯示到最前方的位置，如果超過了最大contentOffset則移動(dòng)到最大的offset；如果點(diǎn)擊了back，就把當(dāng)前可顯示cell的第一個(gè)展示到最前方；

原理

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

1、首先是push的動(dòng)畫:(大概邏輯就是根據(jù)點(diǎn)擊的indexPath計(jì)算collectionView展示時(shí)候應(yīng)該的contentOffset -> 根據(jù)offset得到可collectionView可顯示的item -> 根據(jù)當(dāng)前tableView的cell和可顯示的item 得出需要?jiǎng)赢嫷乃衏ell并計(jì)算他們的起始和終止的frame，然后動(dòng)畫)

- (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可顯示的第一個(gè)indexPath
    NSIndexPath *tableViewFirstPath = visibleIndexpaths.firstObject;
    //拿到tableView可顯示的最后一個(gè)indexPath
    NSIndexPath *tableViewLastPath = visibleIndexpaths.lastObject;
    //得到tableView可顯示的第一個(gè)cell
    UITableViewCell *firstVisibleCell = [tableView cellForRowAtIndexPath:tableViewFirstPath];
    //得到當(dāng)前點(diǎn)擊的indexPath
    NSIndexPath *selectIndexPath = [tableView indexPathForSelectedRow];
    //通過點(diǎn)擊的indexPath和collectionView的ContentSize計(jì)算collectionView顯示時(shí)候的contentOffset
    //獲取點(diǎn)擊indexPath對(duì)應(yīng)在collectionView中的attr
    UICollectionViewLayoutAttributes *selectAttr = [collectionView layoutAttributesForItemAtIndexPath:selectIndexPath];
    //獲取collectionView的ContentSize
    CGSize contentSize = [collectionView.collectionViewLayout collectionViewContentSize];
    //計(jì)算contentOffset的最大值
    CGFloat maxY = contentSize.height - collectionView.bounds.size.height;
    //計(jì)算collectionView顯示時(shí)候的offset：如果該offset超過了最大值就去最大值，否則就取將所選擇的indexPath的item排在可顯示的第一行的時(shí)候的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];
    //進(jìn)而得到所有可顯示的item的indexPath
    NSMutableArray *showIndexPaths = @[].mutableCopy;
    for (UICollectionViewLayoutAttributes *attr in showAttrs) {
        [showIndexPaths addObject:attr.indexPath];
    }
    //拿到collectionView可顯示的第一個(gè)indexPath
    NSIndexPath *collectionViewFirstPath = showIndexPaths.firstObject;
    //拿到collectionView可顯示的最后一個(gè)indexPath
    NSIndexPath *collectionViewLastPath = showIndexPaths.lastObject;
    //現(xiàn)在可以拿到需要?jiǎng)赢嫷牡谝粋€(gè)indexpath
    NSIndexPath *animationFirstIndexPath = collectionViewFirstPath.item > tableViewFirstPath.row ? tableViewFirstPath : collectionViewFirstPath;
    //現(xiàn)在可以拿到需要?jiǎng)赢嫷淖詈笠粋€(gè)indexpath
    NSIndexPath *animationLastIndexPath = collectionViewLastPath.item > tableViewLastPath.row ? collectionViewLastPath : tableViewLastPath;
    //下面就可以計(jì)算需要?jiǎng)赢嫷囊晥D的起始frame了
    NSMutableArray *animationViews = @[].mutableCopy;
    NSMutableArray *animationIndexPaths = @[].mutableCopy;
    NSMutableArray *images = @[].mutableCopy;
    for (NSInteger i = animationFirstIndexPath.row; i <= animationLastIndexPath.row; i ++) {
        //這里就無法使用截圖大法了，因?yàn)槲覀円?jì)算可顯示區(qū)域外的cell的位置，所以只有直接通過數(shù)據(jù)源取得圖片，自己生成ImageView
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:_data[i]]];
        //frame從第一個(gè)開始依次向下排列
        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];
        }
    }
    //終于可以動(dòng)畫了
    [UIView animateWithDuration:1 animations:^{
        //讓toView顯示出來
        toVC.view.alpha = 1;
        //取出所有的可動(dòng)畫的imageView，并移動(dòng)到對(duì)應(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)場(chǎng)完成
        [transitionContext completeTransition:YES];
        //設(shè)置collectionView的contentOffset
        [collectionView setContentOffset:newOffset];
        //移除所有的可動(dòng)畫視圖
        [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動(dòng)畫:(大概邏輯就是根據(jù)點(diǎn)擊的indexPath計(jì)算tableView展示時(shí)候應(yīng)該的contentOffset，并將tableView移動(dòng)到該位置 -> 根據(jù)offset得到可tableView可顯示的cell -> 根據(jù)當(dāng)前collectionView的可顯示item和tableview可顯示的cell得出需要?jiǎng)赢嫷乃衏ell并計(jì)算他們的起始和終止的frame，然后動(dòng)畫)

- (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，取可顯示的第一個(gè)cell
    if (!selectIndexPath) {
        selectIndexPath = collectionViewVisbleIndexPaths.firstObject;
    }
    //計(jì)算tableView最大的contentOffsetY
    CGFloat maxY = tableView.contentSize.height - tableView.frame.size.height;
    //根據(jù)點(diǎn)擊的selectIndexPath和maxY得到當(dāng)前tableView應(yīng)該移動(dò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]];
    }
    //計(jì)算可動(dòng)畫的第一個(gè)indexPath
    NSIndexPath *animationFirstIndexPath = [tableViewVisibleIndexPaths.firstObject row] > [collectionViewVisbleIndexPaths.firstObject row] ? collectionViewVisbleIndexPaths.firstObject : tableViewVisibleIndexPaths.firstObject;
    //計(jì)算可動(dòng)畫的最后一個(gè)indexPath
    NSIndexPath *animationLastIndexPath = [tableViewVisibleIndexPaths.lastObject row] > [collectionViewVisbleIndexPaths.lastObject row] ? tableViewVisibleIndexPaths.lastObject : collectionViewVisbleIndexPaths.lastObject;
    //生成所有需要?jiǎng)赢嫷呐R時(shí)UIImageView存在一個(gè)臨時(shí)數(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)前對(duì)應(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]];
    }
    //開始動(dòng)畫
    [UIView animateWithDuration:1 animations:^{
        //顯示出toView
        toVC.view.alpha = 1;
        //取出所有的動(dòng)畫視圖設(shè)置其動(dòng)畫結(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;
            }
        }
        //移除所有的臨時(shí)視圖
        [animationViews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }];
}

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

最后

是不是想吐槽實(shí)現(xiàn)起來相當(dāng)麻煩，的確是這樣的，因?yàn)槲覀冞€需要考慮屏幕之外的布局，或者說是重用池中的那些cell做考慮，才能保證每個(gè)cell能夠移動(dòng)到正確位置，所以不像以前僅僅需要對(duì)屏幕中的視圖動(dòng)畫了！不過相比于這個(gè)例子最后希望大家多多提出改進(jìn)意見或者新的便捷的思路，或者能在github上給一顆星星鼓勵(lì)一下！github地址請(qǐng)戳->XWTableViewToCollectionViewTransition