Mask
是一种用于控制图形元素可见性的图形技术,使用给定视图的alpha
通道掩码该视图。在SwiftUI中,它类似于创建一个只显示视图的特定部分的模板。
Mask
修饰符的定义:
func mask<Mask>(
alignment: Alignment = .center,
@ViewBuilder _ mask: () -> Mask
) -> some View where Mask : View
alignment
:相对于被修饰视图的对齐方式。
mask
:呈现系统将其alpha值应用于指定视图的视图。
当想要将另一个视图的alpha(不透明度)值应用到当前视图时,使用mask(_:)
修饰符。
mask(_:)
修饰符的不透明度决定了它下面视图的可见性。
使用任何形状或视图作为蒙版。
上面的第二个图采用了一个圆形的蒙版,并将其opacity
设置为0.8.
mask()
修饰符与clipShape()
不同,本案例中mask()
修饰符即可以修改形状也可以修改不透明度。而clipShape()
只调整视图的外部形状。
使用渐变色做蒙版
在mask()
修饰符中,我们也可以添加渐变色,下面就是一个动态的Mask
。
@State private var fillPercentage: CGFloat = 0.0
var body: some View {
VStack {
ZStack {
RoundedRectangle(cornerRadius: 25)
.fill(LinearGradient(gradient: Gradient(colors: [Color.gray.opacity(0.2), Color.gray.opacity(0.5)]), startPoint: .topLeading, endPoint: .bottomTrailing))
Text("SwiftUI")
.font(Font.system(size: 100).bold())
.frame(width: 350, height: 200)
.overlay(
Image("Image_3")
.resizable()
.frame(width: 350, height: 200)
.mask(
LinearGradient(gradient: Gradient(colors: [.clear, .black]), startPoint: UnitPoint(x: 0, y: 1 - fillPercentage), endPoint: UnitPoint(x: 0, y: 1))
)
)
.animation(.easeInOut(duration: 1.0), value: fillPercentage)
}
.frame(width: 350, height: 200)
.cornerRadius(25)
.shadow(radius: 10)
Slider(value: $fillPercentage, in: 0...1)
.padding()
}
.padding()
}
写在最后
SwiftUI
中的Mask
功能可以创建复杂的静态或者动态用户界面,这个功能使用好了对于我们的App也是十分增色的,视觉效果也非常好。
本文只是对Mask
做了一些简单的理解与使用,有感兴趣的朋友可以继续深入探讨一下。
最后,希望能够帮助到有需要的朋友,如果觉得有帮助,还望点个赞,添加个关注,笔者也会不断地努力,写出更多更好用的文章。