SwiftUI用户头像发光效果

SwiftUI短短几行代码可以实现复杂的布局，还可以做出比较炫的效果。先看一下用户头像发光的效果吧！

用户头像发光效果.png

用户头像的发光是给用户头像分层加阴影，让阴影看起来比周围亮，看起来就是发光效果。

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)))
           }
       }
   }
}