CollectionView 移动动画

欢迎来到支线任务，返回主线任务点这里，移动 cell 的动画效果：

move animation

如果你移动 cell 的时候录下屏幕慢放就会发现系统的实现是，所有相对位置发生变化的 cell 都直接移动到目标位置。我们需要取消要移动的 cell 的默认动画效果以免它产生干扰，很简单，隐藏就好了。

回到布局更新流程，finalLayoutAttributesForDisappearingItemAtIndexPath:方法返回的值决定了 cell 开始移动前的布局信息，我们在这里修改布局信息，但是布局系统会针对所有位置的 cell 都调用该方法，所以我们要过滤信息，只隐藏真正移动的 cell。

在布局子类中添加以下属性来收集移动操作的信息：

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

然后在finalLayoutAttributesForDisappearingItemAtIndexPath:将真正移动的 cell 的 alpha 值改为0：

override func finalLayoutAttributesForDisappearingItemAtIndexPath(itemIndexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
    let attr = self.layoutAttributesForItemAtIndexPath(itemIndexPath)
    if movedItemsToAnimate.count > 0 && inBeforeMoveSet(movedItemsToAnimate, withIndexPath: itemIndexPath){
        attr?.alpha = 0
    }
    return attr
}
//判断 indexPath 是否是真正移动的 cell 的 indexPath
func inBeforeMoveSet(moveSet: Set<UICollectionViewUpdateItem>, withIndexPath indexPath: NSIndexPath) -> Bool

这样在 cell 开始移动前就隐藏了，不会影响我们的小动作了。

接下来布局系统会调用initialLayoutAttributesForAppearingItemAtIndexPath:来返回移动的 cell 出现在目标位置时的初始布局信息，这里有个小问题，虽然这里的参数itemIndexPath是要移动的 cell 的目标位置，但是此时通过itemIndexPath获取的 cell 并不是移动到该位置的 cell，在此刻 cells 依然使用原来位置的 indexPath，可以利用在prepareForCollectionViewUpdates收集的布局信息来获取原来的索引位置从而获取我们需要的 cell。

func getOldIndexPathInMoveSet(moveSet: Set<UICollectionViewUpdateItem>, withIndexPath indexPath: NSIndexPath) -> NSIndexPath{
    let filteredResult = moveSet.filter({
        element in
        let newIndexPath = element.indexPathAfterUpdate
        return newIndexPath.section == indexPath.section && newIndexPath.item == indexPath.item
    })
    return filteredResult.first!.indexPathBeforeUpdate
}

override func initialLayoutAttributesForAppearingItemAtIndexPath(itemIndexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {
    let attr = self.layoutAttributesForItemAtIndexPath(itemIndexPath)
    if movedItemsToAnimate.count > 0 && inAfterMoveSet(movedItemsToAnimate, withIndexPath: itemIndexPath){
        let oldIndexPath = getOldIndexPathInMoveSet(movedItemsToAnimate, withIndexPath: itemIndexPath)
        let cell = collectionView?.cellForItemAtIndexPath(oldIndexPath)
        let assemebleRect = attr?.frame
        let oldAttr = self.layoutAttributesForItemAtIndexPath(oldIndexPath)
        //移动 cell 需要的信息多一些，插入和删除时都是在原地重组，移动时就要换位置了，而且要指定操作类型
        cell?.refactorWithPiecesRegion(oldAttr?.frame, assembleRect: assemebleRect, shiningColor: nil,  cellAction: .Move)
    }
    return attr
}
//判断 indexPath 是否真正移动的 cell 的新的 indexPath
func inAfterMoveSet(moveSet: Set<UICollectionViewUpdateItem>, withIndexPath indexPath: NSIndexPath) -> Bool

这样一切就结束了，不过实际上，在这里，重组动画的实现被修改了以适应这里的需求，不过你不用担心这部分。

我依然觉得默认的移动动画效果比较好，安安静静，看着舒服，好吧，主要是移动动画和插入动画一样被布局过程中断了，不然应该会好看点的。不过，现在我们知道了怎么定制这个过程，这个更有成就感不是吗。

Github 地址：CollectionViewAnimation

CollectionView 移动动画

推荐阅读更多精彩内容