【Swift UI】Viewを任意の形にトリミングする方法！clipShape/mask/trim(from:,to:)

nonisolated
func clipShape<S>(
    _ shape: S,
    style: FillStyle = FillStyle()
) -> some View where S : Shape

Image("night_scenery")
    .frame(width: 400, height: 500)
    .clipShape(RoundedRectangle(cornerRadius: 20))

Image("night_scenery")
    .frame(width: 400, height: 500)
    .clipShape(Circle())

nonisolated
func mask<Mask>(
    alignment: Alignment = .center,
    @ViewBuilder _ mask: () -> Mask
) -> some View where Mask : View

Image("night_scenery")
  .frame(width: 400, height: 500)
  .mask {
      Text("GOOG NIGHT")
          .fontWeight(.bold)
          .font(.system(size: 70))
  }

nonisolated
func trim(
    from startFraction: CGFloat = 0,
    to endFraction: CGFloat = 1
) -> some Shape

Circle()
      .trim(from: 0, to: 0.5)

Rectangle()
      .trim(from: 0, to: 0.5)

struct Rectangle : Shape {
    
    public func path(in rect: CGRect) -> Path {
        var path = Path()
        path.addLines(
            [   // 矩形を描画する 
                CGPoint(x: 50, y: 50),    // 左上角
                CGPoint(x: 100, y: 50),   // 右上角
                CGPoint(x: 100, y: 100),  // 右下角 // 半分なのでここまで描画されている
                CGPoint(x: 50, y: 100),   // 左下角
                CGPoint(x: 50, y: 50),    // 左上角へ戻る 
            ]
        )
        return path
    }
}

public protocol Shape : Animatable, View {
    func path(in rect: CGRect) -> Path
}

/// チェックマークをアニメーションで描くビュー
struct AnimatedCheckMarkView: View {
    @Binding var drawProgress: CGFloat
    public var size: CGFloat = 30
    public var lineWidth: CGFloat = 4

    var body: some View {
        CheckMarkShape()
            .trim(from: 0, to: drawProgress)
            .stroke(Color.green, lineWidth: lineWidth)
            .frame(width: size, height: size)
            .animation(.easeIn(duration: 0.4), value: drawProgress)
    }
}
/// チェックマーク型
struct CheckMarkShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let startPoint = CGPoint(x: rect.width * 0.2, y: rect.height * 0.5)
        let midPoint = CGPoint(x: rect.width * 0.4, y: rect.height * 0.7)
        let endPoint = CGPoint(x: rect.width * 0.8, y: rect.height * 0.3)

        path.move(to: startPoint)
        path.addLine(to: midPoint)
        path.addLine(to: endPoint)

        return path
    }
}

struct ContentView: View {
    @State private var drawProgress: CGFloat = 0.0
    var body: some View {
        VStack {
            
            AnimatedCheckMarkView(drawProgress: $drawProgress)
            
            Button {
                drawProgress = drawProgress == 1.0 ? 0.0 : 1.0
            } label: {
                Text("Draw Chack Mark")
            }
        }.padding()
    }
}