能否为CALayer中的单个draw call添加动画效果？

完全可以通过单个draw call实现这个需求，核心思路是维护每个圆点的淡出状态，通过逐帧更新透明度并触发图层重绘，所有圆点（包括正在淡出的）都在同一次draw(in:)调用中完成绘制。

具体实现步骤 #

• 为每个圆点维护状态数据：包括位置、颜色、当前透明度，以及淡出的起始时间和状态标记。
• 用CADisplayLink逐帧更新正在淡出的圆点透明度：根据已流逝的时间计算当前透明度（2秒内从1线性降到0），时间到后标记为隐藏。
• 在自定义CALayer的draw(in:)方法中，一次性绘制所有透明度大于0的圆点，根据每个圆点的当前透明度设置绘制参数。

代码示例（Swift） #

首先定义圆点的数据模型：

struct Dot {
    let frame: CGRect       // 圆点位置和大小
    let color: UIColor      // 圆点颜色
    var alpha: CGFloat = 1.0// 当前透明度
    var isFading: Bool = false // 是否正在淡出
    var fadeStartTime: TimeInterval = 0 // 淡出开始时间
}

然后实现自定义图层：

class DotsLayer: CALayer {
    var dots: [Dot] = []
    private var displayLink: CADisplayLink?
    
    override init() {
        super.init()
        setupDisplayLink()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupDisplayLink()
    }
    
    // 初始化逐帧更新的DisplayLink
    private func setupDisplayLink() {
        displayLink = CADisplayLink(target: self, selector: #selector(updateFadeStates))
        displayLink?.add(to: .main, forMode: .common)
    }
    
    // 逐帧更新所有正在淡出的圆点透明度
    @objc private func updateFadeStates() {
        let currentTime = CACurrentMediaTime()
        var needsRedraw = false
        
        for i in 0..<dots.count {
            guard dots[i].isFading else { continue }
            
            let elapsedTime = currentTime - dots[i].fadeStartTime
            if elapsedTime >= 2.0 {
                // 淡出完成，设置透明度为0并结束状态
                dots[i].alpha = 0.0
                dots[i].isFading = false
                needsRedraw = true
            } else {
                // 计算当前透明度（线性衰减）
                dots[i].alpha = 1.0 - (elapsedTime / 2.0)
                needsRedraw = true
            }
        }
        
        if needsRedraw {
            setNeedsDisplay() // 触发重绘
        }
    }
    
    // 触发指定索引的圆点开始淡出
    func startFade(forDotAt index: Int) {
        guard index < dots.count, !dots[index].isFading else { return }
        dots[index].isFading = true
        dots[index].fadeStartTime = CACurrentMediaTime()
    }
    
    // 单次draw call绘制所有可见圆点
    override func draw(in ctx: CGContext) {
        super.draw(in: ctx)
        
        for dot in dots where dot.alpha > 0 {
            ctx.setAlpha(dot.alpha)
            ctx.setFillColor(dot.color.cgColor)
            ctx.addEllipse(in: dot.frame)
            ctx.fillPath()
        }
    }
    
    deinit {
        displayLink?.invalidate() // 清理资源
    }
}

性能优化提示 #

• 提前缓存所有圆点的位置、大小等静态数据，避免绘制时重复计算。
• 如果圆点大小统一，可以复用同一个椭圆路径，减少CGPath创建开销。
• 过滤掉透明度为0的圆点，避免无效绘制操作。

这种方案完全基于单个图层和单次draw call完成动画，既避免了多图层的性能问题，又能实现平滑的淡出效果，1000个圆点的场景下也能保持流畅。

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