swift - 逐渐将 UIImage 的颜色从 RGB 更改为灰度

Question

我在 UIScrollView 中有一个 UIImage，它可以从一端滚动到另一端。假设左边是 0.0%，右边是 100.0%。

UIImage 是 RGB 范围内的彩色图像，我想根据滚动位置逐渐变为灰度。

我对此进行了研究，但找不到逐步更改它的任何答案。显然，一次以光线比例渲染它是可能的。

有没有可能在 Swift 中做到这一点？

编辑

感谢 Duncan 提供技术上正确的答案。这确实有效，但不幸的是它在滚动时滞后。这就是为什么我使用 Joerns 解决方案将两张图像放在彼此上方(一张彩色图像和一张灰度图像)并相应地更改 alpha 值。如果有人想要 Duncan 的建议代码，你可以去:

if let image = image
{
    let icon = CIImage(CGImage: image)

    if let filter = CIFilter(name: "CIColorControls")
    {
        filter.setValue(icon, forKey: kCIInputImageKey)
        filter.setValue(0.0, forKey: kCIInputSaturationKey)

        if let ciImage = filter.outputImage
        {
            let context = CIContext(options:nil)
            let cgImage = context.createCGImage(ciImage, fromRect: ciImage.extent)

            imageView.image = UIImage(CIImage: cgImage)
        }
    }
}

Answer 1

我试图即时实现 CoreImage 过滤器，但性能很糟糕。所以我最终得到了一张彩色图像和一张灰度图像。两个 ImageView 都是堆叠在一起的，并且它们的 alpha 根据滚动位置而改变。当您滚动时，结果是从彩色到灰度的平滑过渡:

class ViewController: UIViewController, UIScrollViewDelegate {

    @IBOutlet weak var scrollView: UIScrollView!
    let cgImage = UIImage(named: "image.jpg")!.CGImage!
    let colorImage = UIImageView()
    let grayscaleImage = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        let image = UIImage(named: "image.jpg")!
        colorImage.image = image
        scrollView.addSubview(colorImage)

        let beginImage = CIImage(CGImage: cgImage)
        let filter = CIFilter(name: "CIColorControls")!
        filter.setValue(beginImage, forKey: kCIInputImageKey)
        filter.setValue(0, forKey: kCIInputSaturationKey)
        grayscaleImage.image = UIImage(CIImage: filter.outputImage!)
        scrollView.addSubview(grayscaleImage)

        scrollView.contentSize = image.size
        colorImage.frame = CGRectMake(0, 0, image.size.width, image.size.height)
        grayscaleImage.frame = CGRectMake(0, 0, image.size.width, image.size.height)
    }

    func scrollViewDidScroll(scrollView: UIScrollView) {
        let percentage = scrollView.contentOffset.x / (scrollView.contentSize.width - scrollView.bounds.size.width)
        colorImage.alpha = percentage
        grayscaleImage.alpha = 1 - percentage
    }
}