iOS APP 焕新颜：Liquid Glass 打造惊艳“琉璃罩”视觉效果（上）

最近在重构浪浪山App的UI，设计师希望能够实现一种类似毛玻璃但更加通透、更具质感的视觉效果，类似于给APP裹上 Liquid Glass “琉璃罩”。传统的UIVisualEffectView虽然可以实现毛玻璃效果，但可定制性较差，无法满足设计师对颜色、模糊半径、透明度等细节的精细控制。因此，我们需要寻找一种更加灵活、可控的方案。

Liquid Glass效果的底层原理：深入了解 Core Image Filters

Liquid Glass 效果本质上是一种复杂的图像处理过程，它主要依赖于 Core Image Filters 实现。Core Image 是苹果提供的一套强大的图像处理框架，内置了大量的图像滤镜，可以对图像进行各种变换和处理。实现 Liquid Glass 效果，我们需要组合使用多个滤镜，主要包括以下几个步骤：

1. 高斯模糊 (Gaussian Blur)： 使用 CIGaussianBlur 滤镜对背景图像进行模糊处理，这是实现毛玻璃效果的基础。

2. 色彩叠层 (Color Overlay)： 使用 CIColorOverlay 滤镜在模糊后的图像上叠加一层颜色，以改变整体的色调和饱和度。这个操作可以模拟光线穿过“琉璃”的效果。

   

3. 噪点添加 (Noise Reduction)： 为了增加视觉上的真实感，可以适当地添加一些噪点。可以使用 CIRandomGenerator 滤镜生成随机噪点，然后使用 CIOverlayBlendMode 滤镜将其叠加到图像上。

4. 透明度调整 (Alpha Adjustment)： 通过调整图层的透明度，可以控制 Liquid Glass 效果的强度。

CIContext 的重要性：CPU vs GPU渲染

值得注意的是，Core Image 的滤镜操作最终需要在 CIContext 中进行渲染。CIContext 可以选择使用 CPU 或 GPU 进行渲染。通常情况下，GPU 渲染的效率更高，但对于一些复杂的滤镜组合，CPU 渲染可能会更加稳定。在实际应用中，我们需要根据设备的性能和滤镜的复杂度来选择合适的渲染方式。我们可以通过以下代码来创建 CIContext：

// 使用 GPU 渲染
let context = CIContext()

// 使用 CPU 渲染
let context = CIContext(options: [.useSoftwareRenderer : true])

iOS代码实现：打造Liquid Glass“琉璃罩”组件

下面是一个简单的示例代码，演示如何使用 Core Image Filters 实现 Liquid Glass 效果：

import UIKit
import CoreImage.CIFilterBuiltins

class LiquidGlassView: UIView {

    private let imageView = UIImageView()
    private let blurRadius: CGFloat = 20 // 模糊半径
    private let overlayColor: UIColor = UIColor(red: 0.2, green: 0.4, blue: 0.6, alpha: 0.3) // 叠加颜色

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }

    private func setupView() {
        // 添加背景图片
        imageView.frame = bounds
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        addSubview(imageView)

        // 创建 CIContext
        let context = CIContext()

        // 创建 CIImage
        guard let inputImage = CIImage(image: UIImage(named: "background_image")!) else { return }

        // 1. 高斯模糊
        let blurFilter = CIFilter.gaussianBlur()
        blurFilter.setValue(inputImage, forKey: kCIInputImageKey)
        blurFilter.setValue(blurRadius, forKey: kCIInputRadiusKey)

        // 2. 色彩叠层
        let overlayFilter = CIFilter.colorOverlay()
        overlayFilter.setValue(blurFilter.outputImage!, forKey: kCIInputImageKey)
        overlayFilter.setValue(CIColor(color: overlayColor), forKey: kCIInputColorKey)

        // 3. 噪点添加 (可选)
        // let randomGenerator = CIFilter.randomGenerator()
        // let noiseFilter = CIFilter.overlayBlendMode()
        // noiseFilter.setValue(randomGenerator.outputImage!, forKey: kCIInputBackgroundImageKey)
        // noiseFilter.setValue(overlayFilter.outputImage!, forKey: kCIInputImageKey)

        // 获取处理后的图像
        guard let outputImage = overlayFilter.outputImage else { return }
        guard let cgImage = context.createCGImage(outputImage, from: outputImage.extent) else { return }

        // 将 CGImage 转换为 UIImage
        let processedImage = UIImage(cgImage: cgImage)
        
        // 使用DispatchQueue.main.async 避免UI阻塞
        DispatchQueue.main.async {
           self.imageView.image = processedImage
        }
    }

    // 设置背景图片
    func setBackgroundImage(image: UIImage) {
        imageView.image = image
    }
}

// 扩展 CIFilter 实现 ColorOverlay 滤镜
extension CIFilter {
    class func colorOverlay() -> CIFilter {
        guard let filter = CIFilter(name: "CIColorMonochrome") else { fatalError("Unable to create CIColorMonochrome filter.") }
        filter.setValue(CIColor(color: UIColor.white), forKey: "inputColor")
        filter.setValue(1.0, forKey: "inputIntensity")
        return filter
    }
}

性能优化：避免卡顿的常见坑点

在使用 Core Image Filters 实现 Liquid Glass 效果时，需要注意性能优化，避免出现卡顿现象。以下是一些常见的坑点和优化建议：

1. 避免频繁创建 CIContext： CIContext 的创建是一个比较耗时的操作，应该尽量避免频繁创建。可以将 CIContext 创建为单例，或者在视图初始化时创建一次，然后在后续的操作中重复使用。

   

2. 合理控制模糊半径： 模糊半径越大，计算量越大，性能消耗越高。应该根据实际需求，合理控制模糊半径的大小。

3. 使用异步渲染： 图像处理是一个比较耗时的操作，应该尽量放在后台线程进行处理，避免阻塞主线程。可以使用 DispatchQueue.global().async 将图像处理任务放到后台线程执行，然后在主线程更新 UI。

4. 缓存处理结果： 如果背景图像不经常变化，可以将处理后的图像缓存起来，避免重复计算。可以使用 NSCache 或其他缓存机制来缓存图像。

   

5. 避免在主线程进行大量的图像计算操作： 图像计算非常消耗 CPU 资源，务必放在子线程中，使用GCD或者OperationQueue都可以。

总结

本文介绍了如何使用 Core Image Filters 实现 Liquid Glass 效果，并提供了一个简单的示例代码。通过合理地组合使用 Core Image Filters，我们可以打造出各种各样炫酷的视觉效果，为 APP 增添更多魅力。下一篇，我们将深入探讨更高级的Liquid Glass效果实现，以及如何在复杂的UI场景中应用这种技术。例如，如何结合 Metal 框架，实现更加高效、流畅的 Liquid Glass 效果。同时，我们也会分享一些在实际项目中的踩坑经验，帮助开发者避免一些常见的错误。