iOS中如何用CALayer/CGContext自定义渐变并实现可动画自定义Gamma曲线？

好问题！CAGradientLayer确实在色彩空间和伽马校正上比较“封闭”——它默认基于设备色彩空间（通常是sRGB）做插值和Alpha合成，没法直接设置自定义伽马曲线。不过咱们可以通过两种方案来实现你想要的效果，还能支持gamma属性的动画：

方案一：自定义CALayer手动处理伽马校正 #

这个方案适合需要精确控制渐变插值过程中伽马应用逻辑的场景，核心是重写CALayer的绘制方法，手动完成颜色转换、渐变插值和伽马校正。

步骤详解： #

1. 创建自定义CALayer，声明可动画的gamma属性：

   import UIKit
   
   class GammaControlledGradientLayer: CALayer {
       // 声明可动画的gamma属性，默认值1.0（无校正）
       @dynamic var gamma: CGFloat = 1.0
       // 渐变的起始/结束颜色
       var startColor: UIColor = .red
       var endColor: UIColor = .blue
   
       // 告诉CoreAnimation：gamma属性变化时需要重绘
       override class func needsDisplay(forKey key: String) -> Bool {
           if key == "gamma" {
               return true
           }
           return super.needsDisplay(forKey: key)
       }
   
       // 核心绘制逻辑
       override func draw(in ctx: CGContext) {
           let rect = self.bounds
           
           // 1. 将颜色转换为线性RGB空间（避免sRGB自带的伽马干扰）
           let linearColorSpace = CGColorSpace(name: CGColorSpaceLinearSRGB)!
           guard let startLinearColor = startColor.cgColor.converted(to: linearColorSpace, intent: .defaultIntent, options: nil),
                 let endLinearColor = endColor.cgColor.converted(to: linearColorSpace, intent: .defaultIntent, options: nil) else {
               return
           }
   
           // 2. 创建线性渐变（在线性空间插值）
           let gradient = CGGradient(colorsSpace: linearColorSpace,
                                     colors: [startLinearColor, endLinearColor] as CFArray,
                                     locations: [0.0, 1.0])!
           
           // 3. 绘制渐变到上下文
           ctx.drawLinearGradient(gradient,
                                  start: CGPoint(x: rect.minX, y: rect.midY),
                                  end: CGPoint(x: rect.maxX, y: rect.midY),
                                  options: [])
   
           // 4. 应用自定义伽马校正
           applyGammaCorrection(to: ctx, gamma: gamma)
       }
   
       // 封装伽马校正逻辑：对上下文的像素应用gamma曲线
       private func applyGammaCorrection(to ctx: CGContext, gamma: CGFloat) {
           guard gamma != 1.0 else { return } // 无需校正
           
           ctx.saveGState()
           // 创建伽马调整滤镜
           let gammaFilter = CIFilter(name: "CIGammaAdjust")!
           // 将当前上下文的内容转为CIImage
           guard let inputImage = ctx.makeImage().flatMap({ CIImage(cgImage: $0) }) else {
               ctx.restoreGState()
               return
           }
           
           gammaFilter.setValue(inputImage, forKey: kCIInputImageKey)
           gammaFilter.setValue(gamma, forKey: kCIInputGammaKey)
           
           // 将校正后的图像绘制回上下文
           if let outputImage = gammaFilter.outputImage {
               let ciContext = CIContext(options: [.useSoftwareRenderer: false]) // 用硬件加速
               ciContext.draw(outputImage, in: bounds, from: outputImage.extent)
           }
           ctx.restoreGState()
       }
   }
   

2. 添加并动画gamma属性：

   // 在ViewController中使用
   let gradientLayer = GammaControlledGradientLayer()
   gradientLayer.frame = view.bounds
   gradientLayer.startColor = .systemPink
   gradientLayer.endColor = .systemTeal
   view.layer.addSublayer(gradientLayer)
   
   // 动画gamma从1.0到2.5，持续3秒
   let gammaAnimation = CABasicAnimation(keyPath: "gamma")
   gammaAnimation.fromValue = 1.0
   gammaAnimation.toValue = 2.5
   gammaAnimation.duration = 3.0
   gammaAnimation.autoreverses = true // 自动反向
   gammaAnimation.repeatCount = .infinity // 无限重复
   gradientLayer.add(gammaAnimation, forKey: "gammaAnimation")
   gradientLayer.gamma = 2.5 // 保持最终状态
   

方案二：CAGradientLayer + CIFilter快速实现 #

如果不需要控制插值过程，只是想给现有CAGradientLayer的结果应用自定义伽马，这个方案更简单：用CIGammaAdjust滤镜处理渐变层的输出，再把结果作为CALayer的内容，同时动画滤镜的gamma参数。

示例代码： #

import UIKit

class GammaFilteredGradientViewController: UIViewController {
    private let gradientLayer = CAGradientLayer()
    private let contentLayer = CALayer()
    private let gammaFilter = CIFilter(name: "CIGammaAdjust")!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1. 设置基础渐变层
        gradientLayer.colors = [UIColor.orange.cgColor, UIColor.purple.cgColor]
        gradientLayer.frame = view.bounds
        view.layer.addSublayer(contentLayer)
        
        // 2. 初始化滤镜
        gammaFilter.setValue(1.0, forKey: kCIInputGammaKey)
        
        // 3. 用CADisplayLink实时更新内容（或者用CAAnimation驱动）
        let displayLink = CADisplayLink(target: self, selector: #selector(updateGradient))
        displayLink.add(to: .current, forMode: .common)
        
        // 4. 动画gamma值
        let gammaAnimation = CABasicAnimation(keyPath: "value")
        gammaAnimation.fromValue = 1.0
        gammaAnimation.toValue = 0.5
        gammaAnimation.duration = 2.0
        gammaAnimation.autoreverses = true
        gammaAnimation.repeatCount = .infinity
        gammaFilter.setValue(gammaAnimation, forKey: kCIInputGammaKey)
    }
    
    @objc private func updateGradient() {
        // 将渐变层的内容转为CIImage
        guard let gradientImage = gradientLayer.makeImage().flatMap({ CIImage(cgImage: $0) }) else { return }
        gammaFilter.setValue(gradientImage, forKey: kCIInputImageKey)
        
        // 将滤镜输出转为CGImage，设置到内容层
        if let outputImage = gammaFilter.outputImage,
           let cgImage = CIContext().createCGImage(outputImage, from: outputImage.extent) {
            contentLayer.contents = cgImage
        }
    }
}

关键注意点 #

• 性能优化：自定义CALayer的方案如果是全屏绘制，建议开启硬件加速（默认是开启的）；如果动画卡顿，可以考虑缓存渐变的中间结果，或者用Metal替代CoreGraphics处理像素。
• 色彩空间转换：一定要注意线性空间和设备空间的转换，否则自定义伽马会和sRGB自带的伽马叠加，导致效果不符合预期。
• 动画兼容性：自定义Layer的gamma属性通过@dynamic和needsDisplay(forKey:)实现了动画支持，完全兼容CoreAnimation的动画系统。

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