CollectionView含CABasicAnimation的单元格滚动卡顿问题求助

我来帮你排查这个滚动卡顿的问题——你已经尝试了栅格化但没解决，咱们从几个核心方向入手优化：

1. 避免动画叠加与重复触发 #

滚动时CollectionView会频繁复用单元格，如果每次cell显示都重复添加动画，会导致图层上堆积大量动画，直接占用GPU资源。你需要：

• 给单元格添加状态记录，只在数据更新时触发动画
• 添加动画前先移除旧的同名动画，避免叠加

示例代码：

// 自定义Cell中添加状态属性
private var currentPercent: CGFloat = 0

func configure(with percent: CGFloat) {
    // 数据未变化时直接返回，避免重复操作
    guard percent != currentPercent else { return }
    currentPercent = percent
    
    // 移除旧动画，防止叠加
    shapeLayer.removeAnimation(forKey: "animateStrokeEnd")
    
    _animateShapeLayer(shapeLayer, percent: percent)
}

2. 修正栅格化的正确用法 #

栅格化（shouldRasterize = true）只对静态内容有效，如果图层在执行动态动画，栅格化反而会因为反复生成位图增加开销。你可以调整策略：

• 仅在动画结束后开启栅格化
• 确保在单元格复用状态重置时关闭/重置栅格化

另外，一定要在prepareForReuse中彻底清理单元格状态：

override func prepareForReuse() {
    super.prepareForReuse()
    // 移除所有动画
    shapeLayer.removeAllAnimations()
    // 重置进度状态
    shapeLayer.strokeEnd = 0
    currentPercent = 0
    // 可选：重置栅格化状态
    layer.shouldRasterize = false
}

3. 优化ShapeLayer的路径创建 #

如果每次动画都重新生成圆形路径，会增加不必要的计算开销。建议只在单元格尺寸变化时创建一次路径：

override func layoutSubviews() {
    super.layoutSubviews()
    // 仅当路径不存在时才创建
    guard shapeLayer.path == nil else { return }
    
    let center = CGPoint(x: bounds.midX, y: bounds.midY)
    let radius = min(bounds.width, bounds.height)/2 - shapeLayer.lineWidth/2
    let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: -CGFloat.pi/2, endAngle: CGFloat.pi*3/2, clockwise: true)
    shapeLayer.path = path.cgPath
}

4. 滚动时暂停动画，滚动结束后补动画 #

滚动过程中播放动画会抢占GPU渲染资源，你可以监听CollectionView的滚动状态，动态控制动画触发时机：

// 在ViewController中实现UIScrollViewDelegate
var isScrolling = false

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
    isScrolling = true
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    isScrolling = false
    // 滚动停止后，给可见单元格补播放动画
    collectionView.visibleCells.forEach {
        guard let cell = $0 as? YourCustomCell else { return }
        cell.configure(with: cell.currentPercent)
    }
}

// 修改Cell的configure方法
func configure(with percent: CGFloat) {
    guard percent != currentPercent else { return }
    currentPercent = percent
    
    if isScrolling {
        // 滚动时直接设置最终状态，不播放动画
        shapeLayer.strokeEnd = percent
        return
    }
    
    shapeLayer.removeAnimation(forKey: "animateStrokeEnd")
    _animateShapeLayer(shapeLayer, percent: percent)
}

5. 调整动画参数降低GPU负载 #

1秒的动画时长如果在大量单元格同时播放，会给GPU带来压力：

• 可以适当缩短动画时长（比如0.6秒）
• 改用更轻量化的计时函数，比如kCAMediaTimingFunctionLinear（如果视觉效果允许）

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