CollectionView 移动动画

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,609评论 4 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,563评论 25 707
  • 天 微凉的刚好 稀疏乱窜的风 伞也没用 鼓捣着雨 拥挤着 雨 慵懒得够皮 试着躲开伞 藏在毛衣里 夜静了 下完了雨...
    一颗树老窝阅读 224评论 0 0
  • 不可否认在我们成长的旅途中,我们经历了太多美好时光,记忆中留下了一些不可磨灭的印象,酸酸甜甜的初恋,朋友们真挚的相...
    LJ婵阅读 182评论 0 0
  • 《六项精进》打卡第80天 姓名:攸攸 公司:悦美家居旗下北美之家 《六项精进》: 226 期 苏州 感谢一组学员 ...
    攸攸_b854阅读 184评论 0 0