Day16 漸層

LinearGradient是一個漸層元件，可以產生具有方向性的漸層，可以是水平方向或垂直方向，例如：

LinearGradient(gradient: .init(colors: [.yellow, .orange]),
               startPoint: .leading,
               endPoint: .trailing)

startPoint設定為左邊，endPoint設定為右邊，就可以產生一個從左到右的漸層。

顯示如圖

AngularGradient為圓形漸層，可以產生一個順時針或逆時針的圓形漸層，例如：

AngularGradient(gradient: .init(colors: [.red, .blue]),
                center: .center,
                startAngle: .zero,
                endAngle: .degrees(360))

startAngle定為從0度開始，endAngle設定結束點在360度。0度表示起始點在3點鐘的位置，然後逆時針繞一圈回到3點鐘位置。

顯示如圖

可以使用clipShape來裁切各種形狀，例如圓形漸層裁切成圓形：

AngularGradient(gradient: .init(colors: [.red, .blue]),
                center: .center,
                startAngle: .zero,
                endAngle: .degrees(360))
.clipShape(Circle())

顯示如圖

RadialGradient為放射漸層，可以產生一個由內到外的漸層，例如：

RadialGradient(gradient: .init(colors: [.red, .blue]),
               center: .center,
               startRadius: 10,
               endRadius: 200)

startRadius設定為10，表示從距離中心點10的位置開始產生漸層。

顯示如圖

可以使用clipShape來裁切各種形狀，例如放射漸層裁切成圓形：

RadialGradient(gradient: .init(colors: [.red, .blue]),
               center: .center,
               startRadius: 10,
               endRadius: 200)
.clipShape(Circle())

顯示如圖

在實務上，漸層可以用在形狀的背景，例如先畫出一個具有邊框的圓形：

Circle()
    .stroke(
        style: StrokeStyle(lineWidth: 20, lineCap: .round)
    )
    .frame(width: 200, height: 200)

接著使用LinearGradient來調整邊框顏色：

Circle()
    .stroke(
        LinearGradient(colors: [.red, .yellow], startPoint: .leading, endPoint: .trailing),
        style: StrokeStyle(lineWidth: 20, lineCap: .round)
    )
    .frame(width: 200, height: 200)

加入裁切與旋轉：

Circle()
    .trim(from: 0.1, to: 0.9)
    .stroke(
        LinearGradient(colors: [.red, .yellow], startPoint: .leading, endPoint: .trailing),
        style: StrokeStyle(lineWidth: 20, lineCap: .round)
    )
    .frame(width: 200, height: 200)
    .rotationEffect(.degrees(90))

顯示如圖

從 SwiftUI 到 Apple Vision Pro - SwiftUI 從零開始 Day16 [完]