1. 为什么要在 Swift 里折腾毛玻璃效果做 iOS 界面开发的朋友大概率都遇到过这样的需求一张背景图上面浮着一层半透明卡片卡片背后的画面被柔和地虚化文字信息清晰可读整体看起来既通透又有层次。这种效果在系统里随处可见比如控制中心的下拉面板、通知中心的背景、Apple Music 播放页的底栏甚至锁屏界面的时间区域。它有个大家更熟悉的俗称——毛玻璃学名叫做高斯模糊。在 Swift 里实现这个效果路子其实不止一条。早年间很多人用UIVisualEffectView配合UIBlurEffect这是 UIKit 时代最正统的做法代码量极少系统帮你把一切算好。但问题也随之而来系统提供的模糊样式就那么几种.light、.dark、.extraLight、.regular、.prominent你能调的东西非常有限想改模糊半径、想叠加自定义色调、想动态调整模糊强度基本没戏。于是另一条路就浮出水面了——用 Core Image 的CIGaussianBlur滤镜自己算或者干脆用UIVisualEffectView加自定义蒙层做组合。这篇内容我想聊的不是那种“复制三行代码就完事”的入门教程而是把 BlurView 这个组件从选型、实现、参数调优到踩坑排查完整地捋一遍。适合已经写过一些 Swift 界面、但对模糊效果只停留在“会用系统 API”层面的开发者也适合那些被设计师一句“这个模糊再强一点、再暖一点”折磨过的朋友。核心关键词就三个Swift、BlurView、高斯模糊。我会把系统方案和自定义方案都拆开讲告诉你什么场景该用哪个参数怎么算性能怎么保。先说结论省得你看到一半才发现方向不对如果你只是要一个标准的系统模糊背景用UIVisualEffectView就够了别过度设计如果你需要精确控制模糊半径、需要动态动画、需要在 SwiftUI 里做深度定制那就得自己上 Core Image 或者写一个基于CIGaussianBlur的封装。下面我按这个思路一层层展开。2. 高斯模糊的底层原理与方案选型2.1 高斯模糊到底在算什么很多人用了好几年模糊效果但从来没想过它背后在干嘛。其实高斯模糊的本质是一次卷积运算。你可以把它想象成对图片上的每一个像素取它周围一圈邻居像素按照一个“钟形曲线”的权重把它们的颜色加权平均算出来的结果就是这个像素的新颜色。这个钟形曲线就是高斯函数离中心越近的像素权重越大越远的权重越小所以模糊出来的边缘是柔和的、渐变的而不是生硬的方块。这里有个关键参数叫模糊半径也就是你取多大范围的邻居。半径越大参与平均的像素越多画面就越糊。但代价是计算量呈平方级增长——半径翻倍每个像素要处理的邻居数量变成四倍。这就是为什么大半径模糊在移动设备上特别吃性能尤其是实时渲染的时候。理解这一点非常重要因为它直接决定了后面所有的优化思路要么减小半径要么降低分辨率要么把结果缓存起来别每帧重算。我见过太多项目在滚动列表里对每个 cell 实时做高斯模糊结果帧率直接掉到个位数根源就在这里。2.2 系统方案和自定义方案的取舍UIVisualEffectView之所以快是因为系统在底层做了大量优化它甚至不需要真的对每个像素做完整卷积而是用了一些近似算法和硬件加速。但它的代价就是不可控。你没法告诉它“我要半径 25 的模糊”只能从预设样式里挑。自定义方案用CIGaussianBlur好处是半径随便调inputRadius参数你想给多少给多少还能叠加CIColorControls调饱和度、CITint调色调。坏处是性能得自己扛而且 Core Image 的渲染管线如果没配置好很容易出现卡顿或者内存暴涨。我个人的选型经验是这样的场景推荐方案理由静态背景模糊样式要求标准UIVisualEffectView零性能负担代码最少需要精确控制模糊半径CIGaussianBlur 自定义系统 API 给不了这个自由度需要动态改变模糊强度自定义 缓存系统方案无法平滑过渡SwiftUI 中做背景模糊.blur() 或 UIViewRepresentable 包装看是否需要跨平台一致性列表/滚动场景中的模糊预渲染成图片实时计算必卡提示不要一上来就想着自定义。先问自己一句“系统样式真的满足不了吗”如果答案是“能凑合”那就用系统的把省下来的时间花在别的地方。2.3 BlurView 组件的设计目标既然要封装一个 BlurView那它得满足几个基本诉求。第一接口要简单调用方不应该关心底层是 Core Image 还是别的什么给一个半径、一个样式就能用。第二性能要可控得提供降级策略比如低端设备自动降低采样率。第三要能适应布局变化View 尺寸变了模糊结果得跟着更新不能拉伸变形。第四要支持动画半径从 0 平滑过渡到 30 这种需求很常见。基于这四个目标我倾向于把 BlurView 设计成一个UIView的子类内部持有一个UIImageView用来显示模糊后的结果模糊计算放在后台队列算完再回主线程更新。这样既不会阻塞 UI又能保证结果正确。下面几节我会把这个组件的每个部分拆开讲。3. 用 UIVisualEffectView 快速搭一个基础毛玻璃3.1 最简实现与样式选择先给不熟悉的朋友补一下最基础的写法。创建一个UIVisualEffectView给它一个UIBlurEffect然后把它加到你的视图层级里就这么简单let blurEffect UIBlurEffect(style: .light) let blurView UIVisualEffectView(effect: blurEffect) blurView.frame view.bounds blurView.autoresizingMask [.flexibleWidth, .flexibleHeight] view.addSubview(blurView)这几行代码就能出一个标准的毛玻璃层。.light是浅色模糊适合浅色背景上的浮层.dark是深色模糊适合深色主题.extraLight更亮更透.regular和.prominent是 iOS 13 之后新增的适配深色模式更自然。选哪个主要看你的设计稿没有绝对的对错。但这里有个细节很多人不知道UIVisualEffectView上面还可以再叠一层contentView你的子视图应该加到blurView.contentView上而不是直接加到blurView上。因为UIVisualEffectView内部结构比较特殊直接加子视图可能会被模糊效果影响或者层级错乱。blurView.contentView.addSubview(yourLabel)3.2 系统样式的局限在哪里用久了你会发现系统样式的几个硬伤。第一模糊强度不可调。设计师说“再糊一点”你只能换样式但换完可能又太糊了中间没有过渡。第二色调不可控。系统模糊会自带一层色调有时候和你的品牌色冲突你想去掉或者改成自己的颜色做不到。第三动画不平滑。你想让模糊从无到有渐显直接改effect属性是瞬间切换的没有过渡动画。这些局限正是自定义方案存在的理由。但话说回来如果你的需求不涉及这三点那就老老实实用系统方案别给自己找麻烦。我见过一些项目为了“显得专业”硬上 Core Image结果性能还不如系统方案纯属折腾。3.3 叠加蒙层做色调微调如果你只是想要一点点色调控制又不想上 Core Image有个折中办法在UIVisualEffectView上面再叠一个半透明的UIView用背景色来调色调。let tintView UIView() tintView.backgroundColor UIColor.white.withAlphaComponent(0.15) tintView.frame blurView.bounds blurView.contentView.addSubview(tintView)这样能在系统模糊的基础上叠加一层暖色或者冷色成本几乎为零。缺点是这层蒙层也会影响上面文字的对比度得小心调 alpha 值。我一般控制在 0.1 到 0.2 之间再高就明显发灰了。注意蒙层要加在contentView里而且要放在你的内容视图下面否则会把文字也盖住。4. 基于 Core Image 的自定义 BlurView 实现4.1 核心思路与数据流自定义 BlurView 的核心思路其实很直白把要模糊的内容通常是一张背景图或者当前屏幕的截图转成CIImage丢给CIGaussianBlur滤镜设置好半径渲染成CGImage再转成UIImage显示出来。听起来简单但每一步都有坑。数据流是这样的源图 → CIImage → 应用 CIGaussianBlur → 应用裁剪防止边缘透明→ 渲染到 CGImage → UIImage → 显示。中间那个裁剪步骤特别关键很多人第一次做会发现模糊后的图片边缘有一圈透明或者变暗就是因为高斯模糊会把像素往外扩散超出原图边界的部分默认是透明的。4.2 模糊半径的计算与边界处理CIGaussianBlur的inputRadius参数单位是像素不是点。在 Retina 屏幕上1 点等于 2 像素或 3 像素所以如果你想要“视觉上半径 10 点”的模糊实际得传 20 或 30。这个换算关系一定要搞清楚否则在不同设备上效果会不一致。let scale UIScreen.main.scale let radiusInPixels radiusInPoints * scale边界处理的标准做法是用CIImage的clampedToExtent()方法把图像边缘的像素向外复制这样模糊的时候边缘就不会变成透明。处理完再裁剪回原始尺寸let blurredImage ciImage .clampedToExtent() .applyingFilter(CIGaussianBlur, parameters: [kCIInputRadiusKey: radiusInPixels]) .cropped(to: ciImage.extent)这两行是整个自定义方案里最核心的代码记住它。4.3 渲染管线与上下文配置Core Image 的渲染需要一个CIContext。这个对象创建成本很高绝对不能在每次模糊的时候新建必须全局持有一个复用。我一般用一个静态的 lazy 属性private static let sharedContext: CIContext { CIContext(options: [.useSoftwareRenderer: false]) }().useSoftwareRenderer: false表示优先用 GPU 渲染速度快很多。但要注意在某些老设备或者模拟器上 GPU 渲染可能有问题所以生产环境最好加个降级判断。渲染成CGImage的代码guard let cgImage Self.sharedContext.createCGImage(blurredImage, from: blurredImage.extent) else { return nil } let result UIImage(cgImage: cgImage, scale: scale, orientation: .up)这里scale要传对否则图片尺寸会错乱。如果你是从UIImage转过来的CIImage直接用原图的 scale 就行。5. 性能优化与降采样策略5.1 为什么降采样是必须的前面说过高斯模糊的计算量随半径平方增长。一张 1170×2532 的 iPhone 屏幕截图如果按原分辨率做半径 30 像素的模糊每个像素要处理大约 2800 个邻居总共几十亿次运算。就算 GPU 再快也扛不住实时跑。解决办法就是降采样先把图片缩小到原来的四分之一甚至八分之一在小图上做模糊再把结果放大回去。因为模糊本身就是让画面变糊放大回去的那点画质损失根本看不出来但计算量直接降到原来的十六分之一甚至六十四分之一。let downsampleFactor: CGFloat 4 let smallImage ciImage.transformed(by: CGAffineTransform(scaleX: 1/downsampleFactor, y: 1/downsampleFactor)) // 在小图上模糊半径也要相应缩小 let smallRadius radiusInPixels / downsampleFactor5.2 降采样倍数的选择依据降采样倍数不是越大越好。太大了模糊结果会出现明显的块状感尤其是模糊半径小的时候。我的经验是模糊半径点推荐降采样倍数0 - 10210 - 30430 - 60660 以上8这个表不是死的得根据实际效果微调。原则是降采样后的图片尺寸不要小于模糊半径的 4 倍否则边缘会出现明显的失真。5.3 缓存与复用机制如果你的模糊内容是静态的比如一张固定的背景图那算一次就够了把结果缓存起来别每次布局变化都重算。我一般用NSCache来存key 用“图片标识 半径 尺寸”组合private let cache NSCacheNSString, UIImage() func cacheKey(for image: UIImage, radius: CGFloat, size: CGSize) - NSString { return \(image.hashValue)-\(radius)-\(size.width)x\(size.height) as NSString }如果是动态内容比如实时屏幕模糊那缓存意义不大重点要放在降采样和异步计算上。异步计算用DispatchQueue.global(qos: .userInitiated)算完回主线程更新同时要处理“计算还没完成用户又改了参数”的竞态问题通常用一个递增的 token 来标记最新请求。提示异步模糊一定要做防抖。用户拖动滑块调半径的时候每一帧都触发计算会直接把 CPU 打满加个 100 毫秒的延迟再算体验反而更顺滑。6. 常见问题与排查实录6.1 模糊后边缘发白或发黑这是最高频的问题根源就是前面说的边界扩散。CIGaussianBlur默认把超出边界的区域当作透明模糊的时候透明像素混进来边缘就变淡了。解决办法就是clampedToExtent()把边缘像素复制出去。如果已经用了还出问题检查一下是不是裁剪的 extent 传错了必须用原始ciImage.extent不能用模糊后的 extent。6.2 模糊结果颜色偏暗有时候模糊完发现整体变暗了尤其是深色背景。这通常是因为颜色空间的问题。Core Image 默认在 sRGB 线性空间里运算而你的图片可能是 P3 色域转换过程中亮度会变。解决办法是在CIContext创建时指定工作颜色空间CIContext(options: [.workingColorSpace: CGColorSpace(name: CGColorSpace.sRGB)!])或者干脆在模糊后加一个CIColorControls把亮度拉回来一点。6.3 滚动列表里模糊卡顿这个前面提过根源是实时计算。正确做法是预渲染在 cell 复用之前就把模糊结果算好存起来滚动的时候直接显示图片。如果背景是动态的那就用降采样 低分辨率模糊牺牲一点画质换流畅度。我实测下来降采样 8 倍之后即使是老设备也能跑到 60 帧。6.4 内存暴涨甚至崩溃Core Image 的中间结果如果不及时释放内存会堆得很快。几个注意点CIContext全局复用别重复创建模糊完的CIImage及时置空NSCache要设置totalCostLimit别无限缓存。我见过一个项目缓存了几百张模糊图直接 OOM 闪退加个 50MB 的上限就好了。问题现象可能原因解决方向边缘发白/发黑边界扩散未处理用 clampedToExtent整体偏暗颜色空间不匹配指定 sRGB 工作空间滚动卡顿实时计算预渲染或降采样内存暴涨缓存无上限设置 totalCostLimit半径不生效点/像素单位混淆乘以 screen.scale动画不平滑直接改 effect用自定义方案做插值6.5 模拟器和真机效果不一致这个坑我也踩过。模拟器上 GPU 渲染路径和真机不一样有时候模拟器看着正常真机上边缘就出问题。所以模糊效果一定要在真机上验证尤其是涉及降采样和颜色空间的时候。另外不同机型的 GPU 能力差异很大低端机可能需要更激进的降采样策略最好做个设备分级。7. 我个人的一些实操心得做模糊效果这些年最大的体会是能用系统 API 就别自己造轮子非要造轮子就把性能放在第一位。设计师的需求是无止境的今天要半径 20明天要动态过渡后天要叠加色调你不可能每次都改底层实现。所以封装一个 BlurView 的时候接口设计要留足扩展空间半径、色调、降采样倍数都做成可配置参数底层实现可以换但调用方式不变。另一个心得是关于测试的。模糊效果特别依赖视觉判断代码写得再对看起来不对就是不对。我习惯准备一组标准测试图——纯色、渐变、高对比文字、人脸——每种都跑一遍看看边缘、颜色、细节保留情况。尤其是人脸模糊过度会显得很诡异这个用纯色图是测不出来的。最后说个容易被忽略的点模糊效果对无障碍功能的影响。VoiceOver 用户看不到模糊但你的界面层级和可访问性标签得保证他们能正常操作。别因为加了层模糊就把下面的按钮变成不可点击UIVisualEffectView默认会拦截触摸事件记得设置isUserInteractionEnabled false或者把交互元素放到正确的层级上。这个 BlurView 组件后续还能往几个方向扩展比如支持实时视频流的模糊、支持 Metal 自定义着色器做更高效的卷积、支持在 SwiftUI 里用UIViewRepresentable无缝接入。如果你正在做的是跨平台项目那还得考虑 Android 端的对应实现保证两端视觉效果尽量一致。这些就留到以后有机会再聊了。
