滑动切换UICollectionView单元格时动态改变标签文本颜色

嘿，这个效果我刚好有实操经验，其实和你之前做线条渐变的思路是通的——核心就是靠监听UICollectionView的滚动，计算遮罩和每个cell标签的重叠比例，再用这个比例来平滑过渡文本颜色。下面给你一步步拆解怎么实现：

本质是利用滚动回调获取实时偏移量，算出遮罩与每个可见cell内标签的重叠占比，再根据这个占比在「未选中颜色」和「选中颜色」之间做插值，动态更新文本颜色。

1. 先搞定基础布局 #

确保你的布局符合需求：

• 遮罩视图要固定在UICollectionView上方（或你需要的位置），宽度和单个cell一致，并且能跟随滚动偏移量移动（这部分你之前做线条效果应该已经搞定了）。
• 每个自定义cell里的UILabel设置好初始颜色，比如未选中时用灰色，被遮罩覆盖时用白色（或者你需要的目标色）。

2. 监听滚动事件，计算重叠比例 #

在UICollectionViewDelegate的scrollViewDidScroll(_:)方法里处理核心逻辑：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 获取遮罩当前的frame
    let maskFrame = maskView.frame
    // 拿到所有可见的自定义cell
    guard let visibleCells = collectionView.visibleCells as? [YourCustomCell] else { return }
    
    for cell in visibleCells {
        // 把标签的frame转换到collectionView的坐标系下
        let labelFrame = cell.titleLabel.convert(cell.titleLabel.bounds, to: collectionView)
        // 计算遮罩和标签的重叠区域
        let intersectionRect = maskFrame.intersection(labelFrame)
        
        // 计算重叠比例：如果是横向滚动就用宽度，纵向用高度
        let overlapRatio = intersectionRect.width / labelFrame.width
        
        // 根据比例插值颜色，这里假设未选中是UIColor.systemGray，选中是UIColor.black
        let targetColor = UIColor.black
        let originalColor = UIColor.systemGray
        cell.titleLabel.textColor = interpolateColor(from: originalColor, to: targetColor, progress: overlapRatio)
    }
}

3. 实现颜色插值函数 #

上面用到的interpolateColor是关键，用来在两种颜色之间平滑过渡：

func interpolateColor(from startColor: UIColor, to endColor: UIColor, progress: CGFloat) -> UIColor {
    // 确保进度值在0-1之间，避免出现异常颜色
    let clampedProgress = max(0.0, min(1.0, progress))
    
    // 获取两种颜色的RGBA组件
    guard let startRGBA = startColor.cgColor.components, let endRGBA = endColor.cgColor.components else {
        return startColor
    }
    
    // 分别计算RGB和Alpha的插值结果
    let red = startRGBA[0] + (endRGBA[0] - startRGBA[0]) * clampedProgress
    let green = startRGBA[1] + (endRGBA[1] - startRGBA[1]) * clampedProgress
    let blue = startRGBA[2] + (endRGBA[2] - startRGBA[2]) * clampedProgress
    let alpha = startRGBA[3] + (endRGBA[3] - startRGBA[3]) * clampedProgress
    
    return UIColor(red: red, green: green, blue: blue, alpha: alpha)
}

4. 优化体验的小细节 #

• 如果是纵向滚动的场景，把代码里的width换成height来计算重叠比例就行。
• 为了避免滚动时卡顿，可以把颜色计算的逻辑封装到自定义cell内部，让cell自己根据传入的比例更新颜色。
• 页面初始化完成后，记得手动调用一次scrollViewDidScroll(collectionView)，确保初始状态的颜色是正确的。

你之前做线条渐变的逻辑其实可以复用——只是把线条的颜色/宽度更新，换成了标签文本颜色的更新，核心的滚动偏移量、重叠比例计算都是一样的，改改对应的UI属性就行~

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