728x90
안녕하세요.
이번에는 trim 수식어에 대해 알아볼게요.
trim 수식어는 아래처럼 생겼어요.
trim 수식어를 사용하면 Shape 뷰의 path를 일정 부분 잘라서 반환해줍니다.
정확하게는 Shape의 전체 경로를 1이라고 봤을 때, 1 x startFraction 지점부터 1 x endFraction 지점까지의 Shape을 반환해주는 것이에요.
(당연히 startFraction과 endFraction은 0 ~ 1 사이의 값을 가집니다)
만약 시작 지점이 끝나는 지점보다 뒤에 있을 경우(즉, startFraction >= endFraction인 경우)에는 아무것도 출력되지 않습니다.
예를 들어서, 아래 같은 Shape이 있다고 했을 때
Path { path in
path.addLines([
.init(x: 2, y: 1),
.init(x: 1, y: 0),
.init(x: 0, y: 1),
.init(x: 1, y: 2),
.init(x: 3, y: 0),
.init(x: 4, y: 1),
.init(x: 3, y: 2),
.init(x: 2, y: 1)
])
}
.scale(50, anchor: .topLeading)
.stroke(Color.black, lineWidth: 3)
trim 수식어를 넣으면,
Path { path in
path.addLines([
.init(x: 2, y: 1),
.init(x: 1, y: 0),
.init(x: 0, y: 1),
.init(x: 1, y: 2),
.init(x: 3, y: 0),
.init(x: 4, y: 1),
.init(x: 3, y: 2),
.init(x: 2, y: 1)
])
}
.trim(from: 0.25, to: 1.0) ✅
.scale(50, anchor: .topLeading)
.stroke(Color.black, lineWidth: 3)
.frame(width: 200, height: 200)
1/4 지점 이후부터 끝까지 출력되는 이런 모양이 될 것이에요.
이해가 좀 되시나요??
startFraction = 0.0, endFraction = 1.0을 넣으면 Shape 전체가 출력되겠죠??ㅎㅎ
trim을 이용하면 아래처럼 Timer도 쉽게 구현이 가능하니 알아두면 좋을 것 같아요ㅎㅎ
struct ContentView: View {
@State private var seconds: Int = 0
var body: some View {
Circle()
.trim(from: 0, to: Double(seconds) / 60.0)
.stroke(.red, lineWidth: 5)
.frame(width: 200, height: 200)
.onAppear {
Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
withAnimation {
if seconds >= 60 {
seconds = 0
} else {
seconds = seconds + 10
}
}
}
}
.rotationEffect(Angle(degrees: -90))
}
}
이번 글은 여기서 마무리.
반응형
'SwiftUI' 카테고리의 다른 글
View Identity와 transition 관계 (0) | 2022.06.17 |
---|---|
TimelineView (0) | 2022.06.17 |
PreferenceKey (0) | 2022.05.30 |
Environment (0) | 2022.05.29 |
SwiftUI에서 ViewController를? (0) | 2022.05.11 |