CollectionView 移动动画

作者: seedante | 来源:发表于2015-11-13 16:45 被阅读3027次

    欢迎来到支线任务,返回主线任务点这里,移动 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

    相关文章

      网友评论

      本文标题:CollectionView 移动动画

      本文链接:https://www.haomeiwen.com/subject/tdohhttx.html