Structure¶

AngularGradient¶

An angular gradient.¶

Declaration¶

@frozen struct AngularGradient : ShapeStyle, View

Overview¶

An angular gradient is also known as a "conic" gradient. This gradient applies the color function as the angle changes, relative to a center point and defined start and end angles. If endAngle - startAngle > 2π, the gradient only draws the last complete turn. If endAngle - startAngle < 2π, the gradient fills the missing area with the colors defined by gradient locations one and zero, transitioning between the two halfway across the missing area. The gradient maps the unit-space center point into the bounding rectangle of each shape filled with the gradient.

There are 3 main cases where AngularGradient can change:

endAngle - startAngle = 2π
endAngle - startAngle > 2π
endAngle - startAngle < 2π

Note: Angles default to a clockwise rotation, but angles can be a negative value which will rotate the color counter-clockwise.

End Angle - Start Angle = 2π¶

This is the normal case where the start and end angles make a complete circle. Every color will evenly distribute.

struct AngularGradientView: View {
    let colors: [Color] = [.yellow, .red,.blue, .purple]

    var body: some View {
        Rectangle()
            .fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
            .frame(width:200, height:200)
    }
}

A view containing a rectangle with a frame of width and height 200 and an angular gradient fill in which the end and start angles make a complete circle; this results in a square that fades from yellow to red to blue to purple starting and the center and going clockwise.

End Angle - Start Angle > 2π¶

This is the case where the total angle is greater than a circle. The gradient will only draw the last complete turn which effectively writes over the first circle portion.

struct AngularGradientView: View {
    let colors: [Color] = [.yellow, .red,.blue, .purple]

    var body: some View {
        VStack {
            Rectangle()
                .fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
                .frame(width:200, height:200)
            Rectangle()
                .fill(AngularGradient(gradient: Gradient(colors: colors), center: .center,startAngle: .degrees(0), endAngle: .degrees(360 + 45)))
                .frame(width:200, height:200)
        }
    }
}

A view containing a VStack with two rectangles, one with an angular gradient fill in which the end and start angles make a complete circle and the other in which the total angle is greater than a circle; this results in both squares fading from yellow to red to blue to purple, one starting at the center and the other at the bottom right corner.

End Angle - Start Angle < 2π¶

This is the case where the total angle is less than a circle. The gradient will not make a complete circle, but the missing area between the start and end will be evenly colored with the first and last color of the gradient.

struct AngularGradientView: View {
    let colors: [Color] = [.yellow, .red,.blue, .purple]

    var body: some View {
        VStack {
            Rectangle()
                .fill(AngularGradient(gradient: Gradient(colors: colors), center: .center))
                .frame(width:200, height:200)
            Rectangle()
                .fill(AngularGradient(gradient: Gradient(colors: colors), center: .center,startAngle: .degrees(0), endAngle: .degrees(180)))
                .frame(width:200, height:200)
        }
    }
}

Availability¶

iOS 13.0+

macOS 10.15+

tvOS 13.0+

watchOS 6.0+

Topics¶

Initializer¶

init(gradient:center:angle:) Creates an angular gradient starting at and angle and going all the way around in a circle.

init(gradient:center:startAngle:endAngle:) Creates an angular gradient from a starting and ending angle.

Type Alias¶

Body The type of view representing the body of this view.