CollectionView 添加/删除动画

在前篇重组/分解动画完成后，我想到了一个最佳使用场景：CollectionView 添加和删除项目时的动画。效果如图：

Insert And Delete Animation.gif

这个效果非常容易集成到你的项目中，Github 地址：CollectionViewAnimation。

顺便推荐这个 mac 小软件 : Drop to Gif，可以将视频转换为 gif 文件，非常节省时间。这次几篇文章里面的 gif 都是用这个小软件转换的，虽然很不稳定经常卡死，但是非常地节省时间，以往我都是用 PS 搞定的，慢而且效果也不怎么好，调整参数特别的麻烦。这个小软件的设置非常方便

本文是在 Collection View 动画的基础上进行的改造，这篇文章探索了布局动画，UICollectionView 的内容由其数据源提供，但所有内容的布局都是由其collectionViewLayout属性来决定，这也是 UICollectionView 灵活和强大的地方，按这篇文章的说法，『实现自定义布局和动画的唯一约束就是你的想象力』。但上面的效果和布局关系不大，而是针对 cell 视图内容本身进行处理，不过，从这篇文章可以了解到 UICollectionView 是怎样处理插入/删除项目时的布局流程，这对本文的动画也至关重要。

这里吐槽一下，Xcode 提供的UICollectionViewController子类模板文件里添加了下面的代码：

self.collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)

如果你是通过 storyboard 来设置，这行代码会造成 cell 都不可见，记得在 Xcode 6 的时候这行代码还会报错，切记删掉这行代码，不然死活看不到 cell 也找不到问题所在。话说 Xcode 提供的模板代码都很难用。

不必担心重组/分解动画是怎么实现的，一行代码帮你搞定。另外，UIView 重组/分解动画扩展是针对在屏幕上可见的视图的，为了在这里使用，做了一些改动，但你不需要关心这个，只要使用就好了。

布局更新流程

先来理清更新布局时的处理流程，当你添加了新的 cell 后，需要更新布局，交给collectionViewLayout来处理，用来处理布局更新的方法就是下面这些：

Responding to CollectionView Updates

首先调用prepareForCollectionViewUpdates:，这里包含了所有的布局(位置)变化信息：添加的，删除的，更新的，一般在这里收集布局变化信息。
最后调用finalizeCollectionViewUpdates收尾，这里一般用来重置收集的数据。
中间都是
initialLayoutAttributesForAppearingItemAtIndexPath:
finalLayoutAttributesForDisappearingItemAtIndexPath:
方法名字很好地表明了作用。如果你细心观察调用这两个方法时处理的索引位置会发现，不止是新添加的 cell 会调用initialLayoutAttributesForAppearingItemAtIndexPath:方法，由于新添加的 cell 会造成其他 cells 的相对位置发生变化，这两个方法会被重复调用。比如原来的 Section 0 的布局是这样：ABCDE，在 D 的前面添加X，会这样调用：

initialLayoutAttributesForAppearingItemAtIndexPath: //Section: 0 Item: 3, Insert X
finalLayoutAttributesForDisappearingItemAtIndexPath: //Section: 0 Item: 3, Move D to E
initialLayoutAttributesForAppearingItemAtIndexPath: //Section: 0 Item: 4
finalLayoutAttributesForDisappearingItemAtIndexPath: //Section: 0 Item: 4, Move E to next
initialLayoutAttributesForAppearingItemAtIndexPath: //Section: 0 Item: 5
//然而这里依然还会有其他位置未受到影响的 cell 的布局更新调用，且顺序并不是按照自身的位置。

除了那个真正添加的X的布局更新调用是在最前面，其他的顺序都不能保证。删除 cell 时和这个过程类似，只不过最初调用的是finalLayoutAttributesForDisappearingItemAtIndexPath:方法。

通过这initialLayoutXXX和finalLayoutXXX这两个方法，提供了 cell 刚出现在屏幕上和从屏幕上消失时的布局信息，比如大小，旋转角度，透明度等等，对于新插入的 cell，系统根据initialLayoutXXX提供的初始布局与提供的最终布局信息进行差值计算从而生成动画；对于消失的 cell，根据finalLayoutXXX提供的最终布局和原来的布局信息进行差值计算生成动画。

插入动画

对新添加的 cell 进行动画，首先要获取到该 cell。但需要注意的是，在finalizeCollectionViewUpdates完成前，由于 cell 的位置还在变化中，在initialLayoutAttributesForAppearingItemAtIndexPath:里直接通过位置来获取的 cell 得到的并不是你想要的 cell，特别是反映真正被添加的 cell 的该方法里，但此时 cell 还未被显示在屏幕上，根本无从获取。

collectionView:willDisplayCell:forItemAtIndexPath:是UICollectionView的可选代理方法，用于跟踪屏幕上所有即将出现的 cell 的情况，可以从这里得到即将显示在屏幕上的 cell。研究该方法的调用时机你会发现，就在那个真正添加的X的布局更新调用后，该方法被立即调用，随后才是其他相对位置发生的 cells 的布局更新。所以，在这里可以获得我们需要的 cell，并在这里对这个即将出现的 cell 进行动画。问题来了，视图还没有出现在屏幕上，怎么获取它的内容呢？

let cellSnapshot = cell.snapshotViewAfterScreenUpdates(true)//必须指定参数为 true，才能获取到真正的内容，不然会提示无法截取空的内容。

不过，截取内容不需要你来做，我把所有的准备工作都打包好了放入上面的 UIView 重组/分解动画扩展里，你只需要调用就可以了，一行代码搞定。

cell.refactor()

但实际上没有这么简单，还有一些工作需要做。collectionView:willDisplayCell:forItemAtIndexPath:跟踪屏幕上所有即将出现的 cell，但我们仅仅只需要对新添加的 cell 进行动画，这还是需要回到布局流程去获取新添加的 cell 的索引信息。前面说过，prepareForCollectionViewUpdates:里包含了布局更新过程中所有的变化信息。

新建UICollectionViewLayout子类SDEFlowLayoutWithAnimation，添加以下属性来收集添加的 cell 的索引位置信息：

var insertedItemsToAnimate: Set<NSIndexPath> = []
override func prepareForCollectionViewUpdates(updateItems: [UICollectionViewUpdateItem]) {
    super.prepareForCollectionViewUpdates(updateItems)
    for updateItem in updateItems{
        switch updateItem.updateAction{
        case .Insert:
            insertedItemsToAnimate.insert(updateItem.indexPathAfterUpdate)
        default: break
        }
    }
}

在UICollectionView 的 delegate 对象里，重写以下方法：

override func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
    if animationLayout != nil{
        //如果 indexPath 是新添加的 cell 的索引，那么对该 cell 使用重组动画。
        let filteredItems = animationLayout!.insertedItemsToAnimate.filter({
            element in
            return element.section == indexPath.section && element.item == indexPath.item
        })
        if filteredItems.count > 0{
            cell.refactor()//一行代码搞定重组动画
        }
    }
}

这样就完成了插入动画。

还有点事情要做，重写下面的方法提供默认的布局，不然没有动画发生。为啥，我的重组动画扩展需要截取 cell 的内容，这里的方法提供了 cell 出现时最初始的布局信息，如果没有提供，大概无法获取内容吧，我只能这样猜了。

override func initialLayoutAttributesForAppearingItemAtIndexPath(itemIndexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
    let attr = self.layoutAttributesForItemAtIndexPath(itemIndexPath)
    return attr
}

但是，这里有一点小问题，如果你够敏感，或者你也许会疑惑这个动画怎么和前面的重组动画不一样，那是因为这个动画在中途中断了。这才是我们想要的样子。

fix insert animation issue

为什么会这样？其实我也不知道，我猜测是由于布局动画过程还没有结束，中断了重组动画的执行。由于布局动画过程是个黑盒子，这里只能靠猜了。上面是怎么解决这个问题的呢，将cell.refactor()放到主线程里执行。仔细看上面的动画，在重组动画开始之前，后面的 cell 相继向右边移动的过程被中断了几次，像卡壳一样。之前的过程是牺牲重组动画完成布局动画，现在是牺牲布局动画来完成重组动画。现在还没有找到完美的解决方法，如果有谁找到了办法，请指教。

删除动画

对一个已经存在的视图进行动画比一个尚未出现的视图进行动画简单多了，之前那个转场动画是如此，今天这个动画如此。

delete animation

没有了实现插入动画时的各种黑盒行为，实现删除动画简单多了。而且由于不需要对布局做任何修改，分解动画不再会被布局过程中断，能够按照预期顺利执行，而且我们甚至不需要去布局过程收集删除项目的布局信息。思路是这样的，直接对要删除的 cell 进行分解动画，分解动画的实现里第一步就是获取视图的截图然后分割成碎片覆盖在源视图上，同时隐藏源视图，此时你看到的内容是伪造的，早已被我偷天换日；第二步等待分解动画完成，伪造的内容被移除，而我们让源视图依然保持隐藏，这与原来的分解动画在最后移除源视图稍微有些不同，这样做就不会引起布局的变化导致露馅；最后，执行真正的删除 cell 操作，由于源视图 cell 是隐藏的，是看不到原来的删除动画的，只能看到后面的 cells 填充空缺的位置的动画。这样一来，原来的删除动画就被我的分解动画替代了。但要注意分解动画完成后立即执行删除操作，不然两者之间间隔太久看起来有问题。

核心代码：

let deletedIndexPath = ......
//检查要删除的 cell 是否在当前屏幕中，如果在，就执行分解动画；不在，就没必要执行分解动画了。
let visibleIndexPaths = self.collectionView?.indexPathsForVisibleItems()
let filteredIndexPaths = visibleIndexPaths?.filter({
     indexPath in
     return indexPath.section == deletedIndexPath.section && indexPath.item == deletedIndexPath.item
})

......//更新数据源
if filteredIndexPaths?.count > 0{
    let deletedCell = self.collectionView?.cellForItemAtIndexPath(deletedIndexPath)
    let animationTime: NSTimeInterval = 0.5
    //一行代码执行分解动画
    deletedCell?.destructWithTime(animationTime)
    //使用 performSelector 方法能精确执行的时间，这很重要，使用 dispatch_after 无法保证，只能保守地多加0.1~0.2秒，这可能会造成肉眼可见的延迟。
    self.collectionView?.performSelector("deleteItemsAtIndexPaths:", withObject: [deletedIndexPath], afterDelay: animationTime)
}else{
    self.collectionView?.deleteItemsAtIndexPaths([deletedIndexPath])
}

移动动画

最后，关于移动 cell 时的动画，我原本准备实现的，但发现默认的动画效果太优雅了，不想替换，好吧，是懒。这些操作里，移动并不会改变 cells 的数量，而插入和删除则会，这就使得在插入和删除时都会空出一个 cell 的位置供你秀动画，而在移动操作里要移动的 cell 与其他相对位置发生变化的 cells 同时进行了移动，从视觉上这些 cells 的移动更吸引眼球，除非你用一个更吸引眼球的优雅的动画，不然效果不会好。如果你对这个效果有兴趣，可以自己尝试下。

好吧，这么有意思有挑战的事情，当然要试一下，点击这里查看效果，介绍文章看这里。

Github 地址：CollectionViewAnimation