CollectionView 移动动画
欢迎来到支线任务,返回主线任务点这里,移动 cell 的动画效果:
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