SwiftUI短短几行代码可以实现复杂的布局,还可以做出比较炫的效果。先看一下用户头像发光的效果吧!
用户头像的发光是给用户头像分层加阴影,让阴影看起来比周围亮,看起来就是发光效果。
ZStack(alignment:.center) {
Circle()
.fill(Color.white)
.frame(width: 60, height: 60 ,alignment: .center)
.glow()
Image("user_img")
.resizable()
.frame(width: 60, height: 60, alignment: Alignment.center)
.cornerRadius(30)
}.frame(width: 72, height: 72, alignment: .leading)
.padding(EdgeInsets(top: 12, leading: 30, bottom: 12, trailing: 12))
上面代码的glow是View的拓展,主要通过三层阴影实现的发光效果。另外添加了一层模糊效果,让发光看起来更加真实。
extension View {
func glow(radius: CGFloat = 20) -> some View {
return self
.overlay(self.blur(radius: radius / 6))
.shadow(color: .shadowColor, radius: radius / 3)
.shadow(color: .shadowColor, radius: radius / 3)
.shadow(color: .shadowColor, radius: radius / 3)
}
}
用户昵称的彩虹字体是背景渐变、一些模糊和一些遮罩来创建彩虹辉光。使用ForEach创建两个矩形,每个矩形都以精确的大小填充彩虹梯度。然后使用调用此方法的任何视图遮盖渐变时,然后用5点模糊或无模糊覆盖原始视图。
extension View {
func multicolorGlow() -> some View {
ZStack {
ForEach(0..<2) { i in
Rectangle()
.fill(AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center))
.frame(width: 100, height: 60)
.mask(self.blur(radius: 10))
.overlay(self.blur(radius: 5 - CGFloat(i * 5)))
}
}
}
}