SwiftUI:特殊效果 - 模糊,混合模式等

2020-05-08 00:51:34 浏览数 (1)

keyboardkeyboard

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

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

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

代码语言:swift复制
ZStack {
     Image("zhy")
     Rectangle()
         .fill(Color.red)
         .blendMode(.multiply)
 }
 .frame(width: 1000, height: 500)
 .clipped()
Multiply BlendMultiply Blend

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

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

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

代码语言:swift复制
var body: some View {
    Image("PaulHudson")
        .colorMultiply(.red)
}

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

Screen BlendScreen Blend

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

代码语言:swift复制
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 BlendScreen Blend

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

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

代码语言:swift复制
.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(全色)之间的值。

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

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

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

Blend 列举Blend 列举

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

0 人点赞