SwiftUI：特殊效果 - 模糊，混合模式等---韦弦zhy

keyboard

SwiftUI使我们能够出色地控制视图的呈现方式，包括应用实时模糊，混合模式，饱和度调整等功能。

混合模式使我们可以控制一个视图在另一个视图上的渲染方式。默认模式是.normal，它只是将新视图中的像素绘制到后面的任何东西上，但是有很多选项可以控制颜色和不透明度。

例如，我们可以在ZStack中绘制一个图像，然后在顶部添加一个红色矩形，该矩形使用 multiply 混合模式绘制：

ZStack { Image("zhy") Rectangle() .fill(Color.red) .blendMode(.multiply) } .frame(width: 1000, height: 500) .clipped()Multiply Blend

之所以命名为“Multiply”，是因为它将每个源像素颜色与目标像素颜色相乘——在我们的示例中，是图像的每个像素和顶部的矩形的每个像素。每个像素具有RGBA的颜色值，范围从0（没有该颜色）到1（所有颜色），因此所得的最高颜色为1x1，最低的颜色为0x0。

对纯色使用乘法会产生一种非常常见的色调效果：黑色保持黑色（因为它们的颜色值为0，所以无论您将顶部乘以0都将产生0），而较浅的颜色会变成各种阴影着色。

实际上，Multiply 是如此普遍，以至于有一个快捷键修饰符，这意味着我们可以避免使用ZStack：

var body: some View { Image("PaulHudson") .colorMultiply(.red) }

还有很多其他混合模式可供选择，值得花一些时间尝试一下它们的工作方式。另一个流行的效果称为 screen，它的作用与乘法相反：将颜色反转，执行乘法，然后再次反转颜色，从而产生较亮的图像而不是较暗的图像。

Screen Blend

例如，我们可以在堆栈内部的各个位置绘制三个圆，然后使用滑块控制其大小和重叠：

struct ContentView: View { @State private var amount: CGFloat = 0.0 var body: some View { VStack { ZStack { Circle() .fill(Color.red) .frame(width: 200 * amount) .offset(x: -50, y: -80) .blendMode(.screen) Circle() .fill(Color.green) .frame(width: 200 * amount) .offset(x: 50, y: -80) .blendMode(.screen) Circle() .fill(Color.blue) .frame(width: 200 * amount) .blendMode(.screen) } .frame(width: 300, height: 300) Slider(value: $amount) .padding() } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.black) .edgesIgnoringSafeArea(.all) } }Screen Blend

如果您特别注意观察，可能会注意到中间完全混合的颜色不是很白——这是一种非常淡的淡紫色。原因是Color.red，Color.green和Color.blue并不完全是这些颜色。使用Color.red时看不到纯红色。取而代之的是，您会看到SwiftUI的自适应颜色旨在在黑暗和明亮模式下看起来都不错，因此它们是红色，绿色和蓝色的自定义混合色，而不是纯色。

如果您想看到混合红色，绿色和蓝色的全部效果，则应使用以下三种自定义颜色：

.fill(Color(red: 1, green: 0, blue: 0)) .fill(Color(red: 0, green: 1, blue: 0)) .fill(Color(red: 0, green: 0, blue: 1))

我们可以应用许多其他实时效果，并且我们已经在项目3中介绍了模糊blur（）。因此，在继续进行之前，让我们看一下另外一个：饱和度saturation（），用于调整颜色的数量。在视图内部使用。给它一个介于0（无颜色，只有灰度）和1（全色）之间的值。

Image("zhy") .resizable() .scaledToFit() .frame(width: 200, height: 200) .saturation(Double(amount)) .blur(radius: (1 - amount) * 20)混合色为白色，饱和度和模糊调整

使用该代码，将滑块设为0意味着图像模糊无色，但是当您将滑块向右移动时，它将获得色彩并变得清晰——所有这些均以闪电般的速度渲染。

一些其他的渲染模式，除此之外还有很多可以自己尝试：

Blend 列举

译自 Special effects in SwiftUI: blurs, blending, and more

---来自腾讯云社区的---韦弦zhy