基于可见度比例缩放CollectionView Cell的问题与优化需求

需求 #

实现UICollectionView水平滚动时，中心完全可见的单元格比侧边单元格更大，滚动过程中平滑过渡缩放效果。

当前实现的问题 #

使用visibleItemsInvalidationHandler尝试实现效果，但存在两个核心问题：

• 滑动时单元格出现闪烁
• 单元格移至中心时，可见度计算的比例值反而降低，无法达成"可见度越高，缩放值越大"的预期

当前使用的代码片段：

section.visibleItemsInvalidationHandler = { (items, offset, environment) in
    items.forEach { item in
        let frame = item.frame
        let rect = CGRect(x: offset.x, y: offset.y, width: environment.container.contentSize.width, height: frame.height)
        let inter = rect.intersection(frame)
        let ratio = (inter.width * inter.height) / (frame.width * frame.height)
        let scale = ratio > 0.8 ? ratio : 0.8
        UIView.animate(withDuration: 0.2) {
            item.transform = CGAffineTransform(scaleX: 0.98, y: scale)
        }
    }
}

问题分析 #

1. 闪烁原因：在visibleItemsInvalidationHandler中手动添加UIView.animate会与CollectionView自身的滚动动画冲突，导致画面闪烁。应该直接修改transform，依赖系统的隐式动画实现平滑过渡。
2. 比例计算错误：通过交集区域面积比计算可见度的逻辑不合理，无法准确反映单元格与中心的关联程度。正确的思路应该是基于单元格中心与CollectionView可视区域中心的距离来计算缩放比例。

修复方案 #

核心修改点 #

• 移除手动动画，直接更新transform，利用系统隐式动画实现平滑滚动过渡
• 基于单元格中心与CollectionView可视区域中心的水平距离计算缩放系数，确保中心单元格缩放最大，侧边单元格距离越远缩放越小

完整修复后的generateBannersLayout方法 #

func generateBannersLayout() -> NSCollectionLayoutSection {
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                          heightDimension: .fractionalHeight(1))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)
    
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                           heightDimension: .fractionalHeight(0.28))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                   subitems: [item])
    group.contentInsets = NSDirectionalEdgeInsets(top: 0,
                                                  leading: 0,
                                                  bottom: 0,
                                                  trailing: 0)
    group.interItemSpacing = NSCollectionLayoutSpacing.fixed(0)
    
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 10,
                                                    leading: 0,
                                                    bottom: 10,
                                                    trailing: 0)
    section.orthogonalScrollingBehavior = .groupPagingCentered
    
    section.visibleItemsInvalidationHandler = { (items, offset, environment) in
        // 获取CollectionView可视区域的中心X坐标
        let collectionViewCenterX = environment.container.contentSize.width / 2 + offset.x
        
        items.forEach { item in
            // 计算单元格中心与CollectionView中心的水平距离
            let itemCenterX = item.frame.midX
            let distance = abs(collectionViewCenterX - itemCenterX)
            
            // 自定义缩放范围：中心单元格最大缩放，侧边单元格最小缩放
            let maxScale: CGFloat = 1.1
            let minScale: CGFloat = 0.9
            
            // 计算缩放系数：距离中心越近，缩放值越接近maxScale；超出单元格半宽时使用minScale
            let maxDistance = item.frame.width / 2
            let scale = max(minScale, maxScale - (distance / maxDistance) * (maxScale - minScale))
            
            // 直接设置transform，依赖系统隐式动画实现平滑过渡
            item.transform = CGAffineTransform(scaleX: scale, y: scale)
        }
    }
    return section
}

额外优化建议 #

• 可根据需求调整maxScale和minScale的数值，或修改距离与缩放的映射公式，实现不同的动画强度
• 确保BannerCell的clipsToBounds属性设置为false，避免单元格放大时内容被裁剪

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