Swift中如何仅为Label而非整个视图应用过渡动画

问题描述 #

我有一个UICollectionView，每个cell都有不同的背景色，滚动时需要让外部UILabel的textColor匹配当前可见cell的背景色。目前检测可见cell及更改颜色的功能正常，但为Label添加过渡动画后，会干扰CollectionView的滚动动画，效果怪异。想知道是否可以仅针对Label的文本颜色应用过渡，或者需要调整可见cell的检测方式及动画触发逻辑？

当前代码：

@IBOutlet weak var balanceLabel: UILabel!
@IBOutlet weak var overviewCollection: UICollectionView!

func configureVisibleIndexPath() {
    let visibleCells = overviewCollection.indexPathsForVisibleItems
    visibleCells.forEach {
        indexPath in
        if let cell = overviewCollection.cellForItem(at: indexPath), overviewCollection.bounds.contains(cell.frame) {
            print("visible row is \(indexPath.row)")
            
            let visibleIndexPath = indexPath.row
            
            switch visibleIndexPath {
            case 0:
                UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations:  {
                    self.balanceLabel.textColor = UIColor(named: "ywGreen")
                })
            case 1:
                UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
                    self.balanceLabel.textColor = UIColor(named: "ywYellow")
                })
            case 2:
                UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
                    self.balanceLabel.textColor = UIColor(named: "ywBlue")
                })
            case 3:
                UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
                    self.balanceLabel.textColor = UIColor(named: "ywWhite")
                })
            default:
                UIView.transition(with: view, duration: 0.5, options: .transitionCrossDissolve, animations: {
                    self.balanceLabel.textColor = UIColor(named: "ywGreen")
                })
            }
        }
    }
}

解决方案 #

1. 仅针对Label执行颜色过渡动画 #

你当前使用UIView.transition(with: view)会把整个父视图作为动画容器，必然干扰CollectionView的滚动。改成直接给balanceLabel执行属性动画（颜色变化用普通属性动画比过渡动画更适配）：

// 替换原switch分支内的动画代码，以case 0为例：
UIView.animate(withDuration: 0.2) {
    self.balanceLabel.textColor = UIColor(named: "ywGreen")
}

2. 优化可见cell检测逻辑 #

• 不要遍历所有可见cell，取最居中或在视图内占比最大的cell作为目标，避免滚动时多个cell触发重复动画导致闪烁；
• 新增状态记录，仅当目标cell变化时才触发动画，减少不必要的动画执行：

var currentTargetRow: Int?

func configureVisibleIndexPath() {
    // 取排序后的第一个可见indexPath，或根据需求取居中的cell
    guard let targetIndexPath = overviewCollection.indexPathsForVisibleItems.sorted().first else { return }
    let targetRow = targetIndexPath.row
    
    // 目标行未变化时直接返回，避免重复动画
    guard targetRow != currentTargetRow else { return }
    currentTargetRow = targetRow
    
    let targetColor: UIColor?
    switch targetRow {
    case 0: targetColor = UIColor(named: "ywGreen")
    case 1: targetColor = UIColor(named: "ywYellow")
    case 2: targetColor = UIColor(named: "ywBlue")
    case 3: targetColor = UIColor(named: "ywWhite")
    default: targetColor = UIColor(named: "ywGreen")
    }
    
    UIView.animate(withDuration: 0.2) {
        self.balanceLabel.textColor = targetColor
    }
}

3. 调整动画触发时机 #

避免在scrollViewDidScroll中过于频繁调用检测方法，通过节流控制触发频率，同时在滚动结束时补做一次检测：

var lastCheckTime: TimeInterval = 0

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let currentTime = Date().timeIntervalSince1970
    // 每隔0.1秒检测一次，降低动画触发频率
    if currentTime - lastCheckTime > 0.1 {
        configureVisibleIndexPath()
        lastCheckTime = currentTime
    }
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    configureVisibleIndexPath()
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        configureVisibleIndexPath()
    }
}

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