iOS开发iOS Developer - UICollectionView买不来的iOS实用技巧

CollectionView 移动动画

2015-11-13  本文已影响3027人  seedante

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

move animation

Github 地址:CollectionViewAnimation

如果你移动 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

上一篇下一篇

猜你喜欢

热点阅读