如何为CollectionView实现iOS音乐应用风格的移动选择气泡动画

核心思路调整 #

你之前依赖cell内部背景视图的方案，会因为UITableView/UICollectionView的cell复用销毁机制，出现屏幕外cell返回nil的问题。推荐改用独立维护选中背景视图的方案，彻底避开这个问题：

• 单独创建一个选中背景视图，添加到collectionView/tableView的上层（而非cell内部）
• 每次选中新cell时，计算目标cell的全局frame，通过动画将背景视图移动到对应位置
• 全程不依赖旧cell的引用，完全避免屏幕外cell被销毁导致的nil异常

具体实现步骤 #

1. 初始化全局背景视图
   在视图控制器的viewDidLoad中创建并配置背景视图：

let selectionBackgroundView = UIView()
selectionBackgroundView.backgroundColor = UIColor.systemBlue.withAlphaComponent(0.2)
selectionBackgroundView.layer.cornerRadius = 8
collectionView.addSubview(selectionBackgroundView)
selectionBackgroundView.isHidden = true // 初始隐藏，选中首个cell后再显示

2. 处理cell选中事件
   在collectionView(_:didSelectItemAt:)回调中执行动画逻辑：

var selectedIndexPath: IndexPath?

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    guard let targetCell = collectionView.cellForItem(at: indexPath) else { return }
    // 将cell的局部坐标转换为collectionView的全局坐标
    let targetFrame = collectionView.convert(targetCell.bounds, from: targetCell)
    
    if selectionBackgroundView.isHidden {
        // 首次选中：直接设置位置并显示
        selectionBackgroundView.frame = targetFrame
        selectionBackgroundView.isHidden = false
    } else {
        // 切换选中项：执行平滑移动动画
        UIView.animate(withDuration: 0.3) {
            self.selectionBackgroundView.frame = targetFrame
        }
    }
    
    selectedIndexPath = indexPath
}

3. 滚动时修正背景视图位置
   滚动过程中cell位置会变化，在scrollViewDidScroll中同步更新背景视图位置，避免错位：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let selectedIndexPath = selectedIndexPath,
          let selectedCell = collectionView.cellForItem(at: selectedIndexPath) else { return }
    let targetFrame = collectionView.convert(selectedCell.bounds, from: selectedCell)
    selectionBackgroundView.frame = targetFrame
}

方案优势 #

• 背景视图独立于cell生命周期，不受复用销毁影响
• 所有位置计算基于当前可见cell或全局坐标转换，无nil风险
• 动画逻辑简洁直接，完全匹配iOS音乐App的选中移动效果

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