SwiftUI Transition 애니메이션: .transition() Modifier를 사용하여 뷰의 삽입 및 제거 시 애니메이션을 적용하는 방법

작성일 : 2024-05-27

Transition 애니메이션: .transition() Modifier를 사용하여 뷰의 삽입 및 제거 시 애니메이션을 적용하는 방법

SwiftUI는 애플의 최신 UI 프레임워크로, 선언형 문법을 통해 간결하고 직관적인 방식으로 사용자 인터페이스를 구축할 수 있습니다. SwiftUI의 강력한 기능 중 하나는 뷰의 상태 변화에 따라 애니메이션을 쉽게 적용할 수 있다는 점입니다. 특히 .transition() modifier를 사용하면 뷰의 삽입 및 제거 시 애니메이션을 적용하여 더욱 매끄럽고 시각적으로 매력적인 사용자 경험을 제공할 수 있습니다. 이번 글에서는 .transition() modifier를 사용하여 뷰의 삽입 및 제거 시 애니메이션을 적용하는 방법에 대해 자세히 알아보겠습니다.

.transition() Modifier의 기본 개념

.transition() modifier는 뷰가 삽입되거나 제거될 때 적용되는 애니메이션을 정의합니다. 이는 뷰가 등장하거나 사라질 때 시각적으로 매끄럽게 전환되도록 도와줍니다. SwiftUI는 기본적으로 제공하는 여러 전환 효과를 통해 손쉽게 애니메이션을 적용할 수 있습니다.

기본 전환 효과

SwiftUI는 여러 기본 전환 효과를 제공합니다. 가장 많이 사용되는 전환 효과 몇 가지를 소개합니다.

.slide: 뷰가 슬라이드하면서 등장하거나 사라집니다.
.opacity: 뷰의 투명도가 변경되면서 등장하거나 사라집니다.
.scale: 뷰가 확대되거나 축소되면서 등장하거나 사라집니다.

이제 각 전환 효과를 예제와 함께 살펴보겠습니다.

.slide 전환 애니메이션

.slide 전환 애니메이션은 뷰가 슬라이드하면서 등장하거나 사라지는 효과를 줍니다. 다음은 버튼을 클릭하여 텍스트 뷰가 슬라이드하면서 나타나고 사라지는 예제입니다.


swift
import SwiftUI

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(.slide)
            }

            Spacer()

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 isVisible 상태 변수는 텍스트 뷰의 가시성을 제어합니다. 버튼을 클릭하면 isVisible의 값이 토글되며, withAnimation 블록 내에서 전환 애니메이션이 적용됩니다. .transition(.slide) modifier를 사용하여 뷰가 슬라이드하면서 나타나고 사라지도록 설정했습니다.

.opacity 전환 애니메이션

.opacity 전환 애니메이션은 뷰의 투명도가 변경되면서 등장하거나 사라지는 효과를 줍니다. 다음은 버튼을 클릭하여 텍스트 뷰가 투명도 변화를 통해 나타나고 사라지는 예제입니다.


swift
import SwiftUI

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(.opacity)
            }

            Spacer()

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 .transition(.opacity) modifier를 사용하여 뷰가 투명도 변화를 통해 나타나고 사라지도록 설정했습니다. withAnimation 블록 내에서 애니메이션이 적용되므로, 버튼을 클릭할 때 텍스트 뷰가 부드럽게 전환됩니다.

.scale 전환 애니메이션

.scale 전환 애니메이션은 뷰가 확대되거나 축소되면서 등장하거나 사라지는 효과를 줍니다. 다음은 버튼을 클릭하여 텍스트 뷰가 확대 또는 축소를 통해 나타나고 사라지는 예제입니다.


swift
import SwiftUI

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(.scale)
            }

            Spacer()

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 .transition(.scale) modifier를 사용하여 뷰가 확대 또는 축소를 통해 나타나고 사라지도록 설정했습니다. withAnimation 블록 내에서 애니메이션이 적용되므로, 버튼을 클릭할 때 텍스트 뷰가 부드럽게 전환됩니다.

커스텀 전환 애니메이션

SwiftUI는 기본 제공 전환 효과 외에도 커스텀 전환 애니메이션을 만들 수 있는 기능을 제공합니다. 이를 통해 더욱 복잡하고 독창적인 애니메이션을 구현할 수 있습니다.

예제: 회전 전환 애니메이션

다음은 커스텀 전환 애니메이션을 사용하여 뷰가 회전하면서 등장하고 사라지는 예제입니다.


swift
import SwiftUI

struct RotateTransition: ViewModifier {
    let angle: Double

    func body(content: Content) -> some View {
        content
            .rotationEffect(.degrees(angle))
            .opacity(angle == 0 ? 1 : 0)
    }
}

extension AnyTransition {
    static var rotate: AnyTransition {
        .modifier(
            active: RotateTransition(angle: -90),
            identity: RotateTransition(angle: 0)
        )
    }
}

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(.rotate)
            }

            Spacer()

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 RotateTransition이라는 커스텀 ViewModifier를 정의하고, 이를 사용하여 뷰가 회전하면서 등장하고 사라지도록 설정했습니다. AnyTransition.rotate를 확장하여 커스텀 전환 애니메이션을 생성하였으며, .transition(.rotate) modifier를 사용하여 적용했습니다.

복합 전환 애니메이션

SwiftUI에서는 여러 전환 애니메이션을 결합하여 더욱 복잡한 효과를 구현할 수 있습니다. 예를 들어, 슬라이드와 투명도 변화를 결합하여 뷰가 슬라이드하면서 점점 투명해지도록 할 수 있습니다.

예제: 슬라이드와 투명도 결합 전환 애니메이션

다음은 슬라이드와 투명도 변화를 결합하여 뷰가 슬라이드하면서 점점 투명해지는 예제입니다.


swift
import SwiftUI

struct ContentView: View {
    @State private var isVisible = false

    var body: some View {
        VStack {
            if isVisible {
                Text("Hello, SwiftUI!")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .transition(AnyTransition.slide.combined(with: .opacity))
            }

            Spacer()

            Button(action: {
                withAnimation {
                    isVisible.toggle()
                }
            }) {
                Text("Toggle Text")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 .transition(AnyTransition.slide.combined(with: .opacity))를 사용하여 슬라이드와 투명도 변화를 결합한 전환 애니메이션을 적용했습니다. withAnimation 블록 내에서 애니메이션이 적용되므로, 버튼을 클릭할 때 텍스트 뷰가 부드럽게 전환됩니다.

결론

SwiftUI의 .transition() modifier를 사용하면 뷰의 삽입 및 제거 시 애니메이션을 쉽게 적용할 수 있습니다. 기본 제공되는 슬라이드, 투명도, 확대/축소 전

환 애니메이션뿐만 아니라, 커스텀 전환 애니메이션을 만들어 더욱 복잡하고 독창적인 효과를 구현할 수 있습니다. 전환 애니메이션을 적절히 활용하면 사용자에게 더욱 매끄럽고 시각적으로 매력적인 인터페이스를 제공할 수 있습니다. SwiftUI의 전환 애니메이션 기능을 잘 이해하고 활용하여 동적인 UI를 구현해 보세요.