iOS UICollectionView单元格取消选中动画时长异常，如何实现平滑取消动画？

我来帮你搞定这个UICollectionView的选中取消动画问题！你的核心问题出在手动维护选中状态的逻辑混乱，以及动画与UICollectionView布局更新的同步方式错误。下面是一步步的修复方案：

问题分析 #

1. 你在cellForItemAt和sizeForItemAt里重复编写选中索引判断，不仅冗余，还容易因为状态不同步导致动画断层
2. didSelectItemAt里的动画嵌套逻辑有误：performBatchUpdates本身会触发布局动画，外层再包裹UIView.animate会造成动画冲突
3. 没有处理再次点击已选中单元格取消选中的场景
4. 单元格复用时未重置状态，滚动时可能出现状态错乱

修复方案 #

1. 简化选中状态判断 #

先抽一个工具方法统一判断选中状态，避免重复代码：

private func isCellSelected(at indexPath: IndexPath) -> Bool {
    return collectionView.indexPathsForSelectedItems?.contains(indexPath) ?? false
}

2. 修正cellForItemAt方法 #

让单元格状态完全依赖UICollectionView的原生选中状态，同时处理复用重置：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
    
    // 根据选中状态配置单元格
    if isCellSelected(at: indexPath) {
        cell.configureForSelected()
    } else {
        cell.configureForUnselected()
    }
    
    return cell
}

同时在你的CollectionViewCell类里添加复用重置逻辑：

class CollectionViewCell: UICollectionViewCell {
    // ... 你的其他单元格代码 ...
    
    override func prepareForReuse() {
        super.prepareForReuse()
        // 重置为未选中状态，避免复用错误
        configureForUnselected()
    }
}

3. 简化sizeForItemAt方法 #

直接用选中状态判断单元格大小，逻辑更清晰：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = isCellSelected(at: indexPath) ? 200 : 100
    return CGSize(width: collectionView.frame.width, height: height)
}

4. 重构didSelectItemAt方法 #

这是动画流畅的核心：我们需要先处理选中/取消状态，再让布局更新和单元格动画同步执行：

// 移除原来手动维护的lastSelectedIndexPath，改用UICollectionView原生选中状态

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // 处理再次点击已选中单元格的取消场景
    if isCellSelected(at: indexPath) {
        collectionView.deselectItem(at: indexPath, animated: false)
    } else {
        // 取消之前的选中项
        if let previousSelectedIndex = collectionView.indexPathsForSelectedItems?.first {
            collectionView.deselectItem(at: previousSelectedIndex, animated: false)
        }
        collectionView.selectItem(at: indexPath, animated: false)
    }
    
    // 用UIView.animate包裹布局更新，让单元格大小变化和内部动画同步
    UIView.animate(withDuration: 0.3) { // 建议把时长改短，0.3秒更符合iOS交互习惯
        collectionView.performBatchUpdates(nil, completion: nil)
        
        // 更新当前单元格状态
        if let cell = collectionView.cellForItem(at: indexPath) as? CollectionViewCell {
            isCellSelected(at: indexPath) ? cell.configureForSelected() : cell.configureForUnselected()
        }
        
        // 更新之前选中单元格的状态（如果有）
        if let previousSelectedIndex = collectionView.indexPathsForSelectedItems?.first, previousSelectedIndex != indexPath {
            if let previousCell = collectionView.cellForItem(at: previousSelectedIndex) as? CollectionViewCell {
                previousCell.configureForUnselected()
            }
        }
    }
}

5. 确保单元格configure方法支持动画 #

你的configureForSelected和configureForUnselected方法里的属性变化，直接修改即可，外层的UIView.animate会自动把这些变化加入动画队列：

func configureForSelected() {
    backgroundColor = .systemBlue
    titleLabel.font = .systemFont(ofSize: 18, weight: .bold)
    // 其他需要变化的属性...
}

func configureForUnselected() {
    backgroundColor = .systemGray5
    titleLabel.font = .systemFont(ofSize: 16, weight: .regular)
    // 其他需要变化的属性...
}

为什么这样改？ #

• 完全依赖UICollectionView原生选中状态，避免手动维护状态导致的不同步
• performBatchUpdates触发布局重新计算，配合外层动画让单元格大小变化和内部视图动画同步
• 修复了取消选中的场景，用户再次点击已选中单元格时会平滑恢复
• 添加复用重置逻辑，避免滚动时单元格状态错乱

这样修改后，选中和取消选中的动画都会变得流畅自然啦！

内容的提问来源于stack exchange，提问作者Artem