SwiftUI 애니메이션과 트랜지션 심화 학습

SwiftUI에서는 간단하면서도 강력한 애니메이션과 트랜지션을 구현할 수 있습니다. 이 글에서는 SwiftUI에서 제공하는 애니메이션과 트랜지션 기능을 심도 있게 살펴보겠습니다. 기본적인 개념에서부터 고급 기법까지 다루며, 실제 예제를 통해 흥미롭고 생동감 있는 인터페이스를 만드는 방법을 배워봅니다.

기본 애니메이션

SwiftUI에서 애니메이션을 추가하는 것은 매우 간단합니다. 다음은 버튼을 클릭할 때 사각형의 크기가 변경되도록 하는 기본 애니메이션 예제입니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Rectangle()
                .frame(width: isExpanded ? 200 : 100, height: isExpanded ? 200 : 100)
                .animation(.default)

            Button("Toggle") {
                isExpanded.toggle()
            }
        }
    }
}

위 코드에서 Rectangle()의 크기가 버튼 클릭에 따라 변경됩니다. .animation(.default)을 추가하여 애니메이션을 적용할 수 있습니다.

커스텀 애니메이션

기본 애니메이션을 넘어서, 커스텀 애니메이션도 손쉽게 적용할 수 있습니다. 예를 들어, 선형(linear) 애니메이션이나 탄성(elastic) 애니메이션을 사용할 수 있습니다. 다음은 다양한 애니메이션을 적용한 예제입니다.

swift
import SwiftUI

struct CustomAnimationView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        VStack {
            Circle()
                .fill(Color.blue)
                .frame(width: 100 * scale, height: 100 * scale)
                .animation(Animation.easeInOut(duration: 2.0))

            Button("Animate") {
                scale = scale == 1.0 ? 2.0 : 1.0
            }
        }
    }
}

이 예제에서는 Animation.easeInOut(duration: 2.0)을 사용하여 더 부드럽고 자연스러운 애니메이션 효과를 주었습니다.

트랜지션

트랜지션은 어떤 뷰가 화면에 추가되거나 제거될 때 적용되는 애니메이션입니다. SwiftUI에서는 다양한 기본 트랜지션과 함께 커스텀 트랜지션도 제공합니다. 다음은 기본 트랜지션을 적용한 예제입니다.

swift
import SwiftUI

struct TransitionView: View {
    @State private var showRectangle = false

    var body: some View {
        VStack {
            if showRectangle {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 100)
                    .transition(.slide)
            }
            Button("Toggle") {
                withAnimation {
                    showRectangle.toggle()
                }
            }
        }
    }
}

위 예제에서 .transition(.slide)을 사용하여 뷰가 화면에 슬라이드로 나타나고 사라지도록 했습니다. withAnimation 클로저를 사용하여 애니메이션을 적용할 수도 있습니다.

커스텀 트랜지션

기본 트랜지션 외에도 SwiftUI에서는 고유한 커스텀 트랜지션을 정의할 수 있습니다. 다음은 scale과 opacity를 조합하여 커스텀 트랜지션을 구성하는 예제입니다.

swift
import SwiftUI

struct CustomTransition: ViewModifier {
    let isActive: Bool

    func body(content: Content) -> some View {
        content
            .scaleEffect(isActive ? 1 : 0)
            .opacity(isActive ? 1 : 0)
    }
}

extension AnyTransition {
    static var custom: AnyTransition {
        AnyTransition.modifier(active: CustomTransition(isActive: true), identity: CustomTransition(isActive: false))
    }
}

swift
import SwiftUI

struct CustomTransitionView: View {
    @State private var showRectangle = false

    var body: some View {
        VStack {
            if showRectangle {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
                    .transition(.custom)
            }
            Button("Toggle") {
                withAnimation {
                    showRectangle.toggle()
                }
            }
        }
    }
}

이 예제는 scaleEffect와 opacity를 함께 사용하여 뷰가 스케일링되고 투명도가 변하는 트랜지션을 정의합니다. 커스텀 트랜지션을 통해 앱의 사용자 인터페이스를 더 매력적이고 독특하게 만들 수 있습니다.

트리거 애니메이션

상호 작용이나 상태 변화를 통해 애니메이션을 트리거할 수 있습니다. 다음은 드래그 제스처를 통해 뷰의 위치를 변경하는 예제입니다.

swift
import SwiftUI

struct DragGestureView: View {
    @State private var offset = CGSize.zero

    var body: some View {
        Rectangle()
            .fill(Color.orange)
            .frame(width: 100, height: 100)
            .offset(x: offset.width, y: offset.height)
            .gesture(
                DragGesture()
                    .onChanged { gesture in
                        offset = gesture.translation
                    }
                    .onEnded { _ in
                        withAnimation(.spring()) {
                            offset = .zero
                        }
                    }
            )
    }
}

이 예제에서는 드래그 제스처를 통해 뷰의 위치를 변경하고, 드래그가 끝나면 스프링 애니메이션을 사용하여 원위치로 돌아오도록 했습니다.

결론

SwiftUI의 애니메이션과 트랜지션 기능을 활용하면 보다 생동감 있고 직관적인 사용자 인터페이스를 쉽게 구성할 수 있습니다. 기본 애니메이션 및 트랜지션부터 고급 커스텀 애니메이션까지 다양한 방법을 시도하여 여러분의 앱을 한층 더 매력적으로 만들어보세요.