SwiftUI提供了两个非常强大的视觉合成工具：mask（遮罩）与blendMode（混合模式）。前者决定视图的可见形状与区域，后者决定两层像素重叠时如何计算最终颜色。把这两个修饰符组合使用，可以实现擦除动画、纹理叠加、文字流光、溶色转场等一系列以往需要专业图像处理库才能做到的视觉效果。本文将从底层原理讲到实战案例，帮助你真正掌握这套视觉特效合成的思路。
一、理解Mask的底层原理：透明度即可见性
SwiftUI中的mask修饰符接收另一个视图作为遮罩模板，系统会把模板视图的alpha通道（透明度）应用到被修饰的视图上：模板完全不透明的区域，原图完全显示；模板完全透明的区域，原图被隐藏；半透明区域则按比例透出原图。这一点和很多图形软件中的黑色遮罩不同，SwiftUI的mask只关心透明度，不关心颜色。也就是说，一个纯红色但完全不透明的矩形，和一个纯白色的不透明矩形，作为遮罩的效果是完全一样的。
正因为遮罩由透明度决定，我们可以用任意形状、渐变、文字甚至图片作为遮罩模板。例如用一个从左到右的线性渐变做遮罩，就能让原图呈现渐显渐隐的效果；用一个不断变化的圆形做遮罩，就能做出聚光灯或扩散揭示的动画。下面是一个最基础的示例，用圆形遮罩让图片只显示圆形区域：
Image("landscape")
.resizable()
.frame(width: 300, height: 200)
.mask {
// 只关心透明度，颜色随意
Circle()
.frame(width: 160, height: 160)
}
遮罩动画的关键在于：让遮罩模板的形状参数驱动动画，而不是对整个视图做动画。例如实现一个扩散擦除效果，只需让圆形的半径从小到大变化，配合withAnimation就能得到平滑的揭示动画：
struct RevealView: View {
@State private var revealed = false
var body: some View {
Image("hero")
.resizable()
.frame(width: 320, height: 240)
.mask {
Circle()
.frame(width: revealed ? 700 : 0,
height: revealed ? 700 : 0)
.animation(.easeInOut(duration: 1.2), value: revealed)
}
.onTapGesture { revealed.toggle() }
}
}
这种做法的性能很好，因为SwiftUI只需重新计算遮罩层，原图本身不会被逐像素修改。同样的思路也可以换成RoundedRectangle、Text、Canvas绘制的任意路径，甚至用TimelineView配合RectangleGradient做出更复杂的动态遮罩。
二、BlendMode的像素合成逻辑与常用模式对比
blendMode修饰符控制的是当前视图与其下方视图重叠时的颜色合成方式。默认模式下，上层视图直接覆盖下层；而切换成其他模式后，系统会按照特定的数学公式，把上层像素颜色（源色）与下层像素颜色（目标色）逐像素计算，得到最终显示的颜色。理解几种核心公式的含义，比死记硬背模式名更有效。
常用的几种模式可以这样理解：multiply是相乘混合，结果总是比原来更暗，适合做阴影、旧化、纸张纹理等加深效果；screen是正片叠底的反面，结果总是更亮，适合做光晕、星光、火焰等提亮效果；overlay是对比度混合，亮的地方更亮、暗的地方更暗，适合增强质感；plusLighter是加法混合，把两层颜色直接相加，能做出强烈的发光叠加；sourceIn则是只在下层不透明的区域显示上层内容，本质上是一种由下层决定形状的遮罩。下面的表格总结了它们的典型用途：
| 混合模式 | 合成结果 | 典型用途 |
|---|---|---|
| multiply | 变暗 | 纹理做旧、阴影叠加、纸质效果 |
| screen | 变亮 | 光斑、星云、玻璃高光 |
| overlay | 增强对比 | 金属质感、增强纹理 |
| plusLighter | 颜色相加 | 霓虹发光、粒子光效 |
| sourceIn | 按下层形状裁剪上层 | 文字填图、局部显示 |
需要注意，blendMode的作用范围是它所在的视图与ZStack中同层级下方的视图，如果下层视图不存在（背景是空的），混合结果可能不符合预期。因此在实践中，通常会用compositingGroup把多个修饰符的渲染结果合并成一个组，再统一与外部背景混合，避免混合提前应用到内部细节上。
三、实战案例一：纹理叠加做旧效果
纹理叠加是BlendMode最经典的应用。假设我们有一张普通照片，想给它加上划痕和纸张的做旧质感，只需把纹理图放在照片上方，并使用multiply混合。纹理中的亮色区域接近白色，与照片相乘后几乎不变；而纹理中的暗色划痕会让对应区域的照片变暗，从而自然地叠上划痕：
ZStack {
Image("portrait")
.resizable()
.frame(width: 300, height: 400)
// 纹理图：白色为透明感，黑色为划痕
Image("paperTexture")
.resizable()
.frame(width: 300, height: 400)
.blendMode(.multiply)
}
如果想进一步增强质感，可以在纹理层再叠加一层.overlay混合的噪点图，让明暗对比更强烈。做旧效果的调优核心在于纹理素材本身：multiply对暗部极其敏感，纹理图整体应该偏亮，只保留少量暗色细节，否则照片会被压得过暗。此外，给纹理层加上轻微的opacity（例如0.85）可以微调叠加强度，比直接修改素材更灵活。
四、实战案例二：用sourceIn与渐变实现文字流光动画
文字流光是App启动页和品牌展示中常见的效果。实现思路是：把一张彩色渐变或光斑素材通过sourceIn混合限制在文字形状内，再让素材位置持续移动，就形成了流过文字的光带。具体做法是把文字放在下层，渐变素材放在上层并使用blendMode(.sourceIn)，然后对素材做无限循环的位移动画：
struct ShimmerText: View {
@State private var phase: CGFloat = -1
var body: some View {
Text("SwiftUI 特效")
.font(.system(size: 48, weight: .bold))
.background {
// 渐变光带在上层，只显示在文字范围内
LinearGradient(
colors: [.white, .yellow, .white],
startPoint: .leading,
endPoint: .trailing
)
.frame(width: 260, height: 60)
.offset(x: phase * 260)
.blendMode(.sourceIn)
.animation(
.linear(duration: 1.6).repeatForever(autoreverses: false),
value: phase
)
}
.onAppear { phase = 1 }
}
}
这个案例的关键在于理解sourceIn的方向性：上层视图只会在下层不透明的像素处显示。所以文字本身充当了形状模板，渐变素材被裁剪进文字内部。同样的技巧反过来用也成立——把图片放在上层、文字放在下层，就能实现图片填充文字的效果，也就是常见的Art Text效果。如果希望流光更柔和，可以把渐变的颜色 stops 做成中间亮、两端与背景色一致，避免光带边缘出现生硬的断层。
五、组合技巧与性能建议
mask与blendMode并不是互斥的，二者常常配合使用：先用mask确定整体可见区域，再用blendMode处理区域内部的颜色合成。例如做一个老电影画面效果，可以先用圆角矩形mask限制画面范围，再依次叠加multiply的噪点纹理和plusLighter的漏光光斑，层层叠加就能得到非常真实的胶片质感。需要注意的是，每一次混合都是一次离屏渲染，层级过多会带来性能开销，尤其在长列表或滚动视图中要控制叠加层数。
几个实践经验值得记住：混合和遮罩都应该尽量应用到小的、确定的frame上，而不是整个全屏容器；使用drawingGroup可以把多层合成交给Metal统一渲染，显著提升复杂叠加的帧率；blendMode的视图应避免嵌套在带opacity的父级中，否则混合会在错误的层级边界发生，结果常常出乎意料。掌握这些细节后，mask负责形状、blendMode负责颜色这套分工模型，几乎可以覆盖日常开发中绝大多数视觉特效合成的需求。
SwiftUIMask遮罩BlendMode混合模式修改时间：2026-09-02 10:28:53