[swift] SwiftUI에서의 애니메이션과 레이아웃 전환 방법

14 Dec 2023

swift

SwiftUI는 사용하기 쉬운 구문을 통해 애니메이션과 레이아웃을 전환하는 것을 지원하는 강력한 기능을 갖추고 있습니다. 이 기능들은 UIKit보다 훨씬 직관적으로 사용할 수 있고, 코드의 재사용성을 높일 뿐만 아니라 애니메이션 및 레이아웃 전환을 매우 쉽게 구현할 수 있습니다.

애니메이션 구현

SwiftUI에서 애니메이션을 쉽게 구현하기 위해서 withAnimation 함수를 사용할 수 있습니다. 이 함수를 사용하면 명시적으로 애니메이션이 시작됨을 나타내며, 해당 코드 블록 안의 뷰 변화가 애니메이션과 함께 일어납니다.

다음은 SwiftUI에서의 간단한 애니메이션 예제입니다.

import SwiftUI

struct ContentView: View {
    @State private var isAnimated: Bool = false

    var body: some View {
        Button("Animate") {
            withAnimation {
                self.isAnimated.toggle()
            }
        }
        .scaleEffect(isAnimated ? 1.5 : 1.0)
    }
}

위의 예제에서는 Button을 누르면 scaleEffect 애니메이션과 함께 버튼의 크기가 변화하게 됩니다.

레이아웃 전환

또 다른 강력한 기능은 SwiftUI의 Group과 ConditionalContent를 사용하여 레이아웃 전환을 쉽게 구현할 수 있다는 점입니다. 이를 통해 조건에 따라 보여지는 레이아웃을 손쉽게 변경할 수 있습니다.

다음은 SwiftUI에서의 레이아웃 전환 예제입니다.

import SwiftUI

struct ContentView: View {
    @State private var isShowingDetail: Bool = false

    var body: some View {
        Group {
            if isShowingDetail {
                Text("Detail View")
            } else {
                Text("Main View")
            }
        }
        .onTapGesture {
            self.isShowingDetail.toggle()
        }
    }
}

위의 예제에서는 Group과 onTapGesture를 사용하여 사용자의 터치에 반응하여 메인 뷰와 디테일 뷰를 전환합니다.

SwiftUI를 사용하면 애니메이션과 레이아웃 전환을 더 간편하게 구현할 수 있으며, 이는 앱의 유저 인터페이스를 보다 직관적으로 만들 수 있습니다.

위의 예제를 통해, SwiftUI에서의 애니메이션과 레이아웃 전환에 대한 방법을 살펴보았습니다. SwiftUI를 사용하면 복잡한 애니메이션 및 레이아웃 전환을 더 간편하게 처리할 수 있으며, 코드의 가독성을 높여줍니다.

애니메이션 구현

레이아웃 전환

참고 자료