How to render a gradient

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-render-a-gradient]

 

How to render a gradient

 

SwiftUI는 다양한 그라데이션 옵션을 제공하며, 모두 다양한 방법으로 사용될 수 있습니다. 예를 들어, 다음과 같이 텍스트 뷰를 흰색에서 검정색 선형 그라데이션을 그릴수 있습니다.

Text("Hello World")
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom))

 

해당 색상은 배열로 지정되고 원하는 만큼을 사용할 수 있습니다 - 기본적으로 SwiftUI는 동일한 간격으로 배치할 것입니다. 따라서, 다음과 같이 흰색에서 빨간색 에서 검정색으로 처리할 수 있습니다.

Text("Hello World")
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [.white, .red, .black]), startPoint: .top, endPoint: .bottom))

 

수직이 아닌 수평 그라데이션을 만들기 위해, 사작점과 끝점에 대해 .leading과 .trailing을 사용합니다.

Text("Hello World")
    .padding()
    .foregroundColor(.white)
    .background(LinearGradient(gradient: Gradient(colors: [.white, .red, .black]), startPoint: .leading, endPoint: .trailing))

 

대체할만한 그라데이션 스타일에 대해, RadialGradient 또는 AngularGradient를 사용해보세요. 한 예로, 다양한 색상으로 방사형(radial) 그라데이션을 만들고, 원의 중심으로 부터 시작하고 모서리로 나갑니다. 

let colors = Gradient(colors: [.red, .yellow, .green, .blue, .purple])
let conic = RadialGradient(gradient: colors, center: .center, startRadius: 50, endRadius: 200)
return Circle()
    .fill(conic)
    .frame(width: 400, height: 400)

 

그리고 각도(anglular) 그라데이션(원뿔 그라데이션)을 만들고, 다양한 색상을 회전해서 시작하는 곳으로 돌아갑니다.

let colors = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: colors, center: .center)
return Circle()
    .fill(conic)

 

3가지 그라데이션 타입 모두 ShapeStyle 프로토콜을 준수하기 때문에, 배경, 채우기, 테두리를 사용할 수 있습니다. 예를 들어, 원에 대해 두꺼운 내부 테두리(innder stroke)로 무지개 원뿔(conical) 그라데이션을 사용합니다.

let colors = Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red])
let conic = AngularGradient(gradient: colors, center: .center, startAngle: .zero, endAngle: .degrees(360))
return Circle()
    .strokeBorder(conic, lineWidth: 50)