SwiftUI 애니메이션 기술: 동적 UI 경험을 위한 복잡한 애니메이션 및 전환 구현

SwiftUI는 iOS, macOS 및 watchOS를 위한 선언적 UI 프레임워크로, 애니메이션과 전환을 손쉽게 구현할 수 있는 다양한 도구와 메서드를 제공합니다. 이 글에서는 SwiftUI에서 복잡한 애니메이션과 전환을 구현하는 방법과 이를 통해 어떻게 동적인 사용자 경험을 제공할 수 있는지에 대해 알아보겠습니다.

기본 애니메이션 구성 요소

SwiftUI에서 애니메이션을 구현하려면 withAnimation 블록을 사용하거나 animation 수식어를 뷰에 적용할 수 있습니다. 예를 들어, 버튼을 클릭할 때 크기를 변경하는 단순한 애니메이션은 다음과 같이 구현할 수 있습니다.

swift
struct SimpleAnimationView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.scale = self.scale == 1.0 ? 1.5 : 1.0
                }
            }) {
                Text("Tap Me")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .scaleEffect(scale)
            }
        }
    }
}

위 코드에서 withAnimation 블록 안에 애니메이션화하려는 상태 변화를 감싸면, 해당 변화를 애니메이션으로 표시할 수 있습니다. 결과적으로 버튼을 클릭할 때 크기가 부드럽게 전환됩니다.

고급 애니메이션 기법

애니메이션 곡선 적용

애니메이션의 속도와 패턴을 조절하려면 easeIn, easeOut, easeInOut, linear 등의 곡선을 사용할 수 있습니다. 예를 들어, easeInOut 곡선을 사용하면 애니메이션이 더 자연스럽게 보일 수 있습니다.

swift
Button(action: {
    withAnimation(.easeInOut(duration: 1.0)) {
        self.scale = self.scale == 1.0 ? 1.5 : 1.0
    }
}) {
    Text("Tap Me")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
        .scaleEffect(scale)
}

복합 애니메이션

여러 애니메이션을 연달아 실행하거나 동시에 실행하려면 Animation의 sequence와 group 메서드를 사용할 수 있습니다. 이를 통해 더 복잡한 애니메이션 패턴을 구현할 수 있습니다.

swift
struct ComplexAnimationView: View {
    @State private var offset: CGFloat = 0.0
    @State private var opacity: Double = 1.0
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .offset(y: offset)
                .opacity(opacity)
                .onAppear {
                    let animation = Animation
                        .easeInOut(duration: 1.0)
                        .repeatForever(autoreverses: true)
                    withAnimation(animation) {
                        self.offset = 200
                        self.opacity = 0.0
                    }
                }
        }
    }
}

위 코드에서 repeatForever는 애니메이션을 무한 반복하도록 설정하며, autoreverses는 애니메이션을 다시 원래 상태로 되돌립니다.

전환 애니메이션

화면 전환이나 뷰 전환 애니메이션은 transition 수식을 사용하여 구현할 수 있습니다. 기본 제공 전환 효과 중 slide, move, opacity 등을 사용할 수 있습니다.

swift
struct TransitionView: View {
    @State private var isVisible: Bool = false
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.isVisible.toggle()
                }
            }) {
                Text("Toggle View")
            }
            
            if isVisible {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 100)
                    .transition(.slide)
            }
        }
    }
}

위 예제에서 transition(.slide)는 뷰가 나타날 때 좌우로 슬라이드 인/아웃되는 전환 효과를 적용합니다.

사용자 정의 전환 애니메이션

기본 제공 전환 외에도 사용자 정의 전환을 구현할 수 있습니다. 특정 방식으로 뷰가 나타나거나 사라지도록 정의하려면 AnyTransition의 커스텀 초기화를 사용합니다.

swift
struct CustomTransitionViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .scaleEffect(isActive ? 1 : 0.5)
            .opacity(isActive ? 1 : 0)
    }
    
    var isActive: Bool
}

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

struct CustomTransitionView: View {
    @State private var isVisible: Bool = false
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.isVisible.toggle()
                }
            }) {
                Text("Toggle View")
            }
            
            if isVisible {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 100, height: 100)
                    .transition(.customTransition)
            }
        }
    }
}

위 예제에서 customTransition은 뷰가 나타날 때 확대되고, 사라질 때 축소되는 효과를 제공하는 전환입니다.

결론

이 글에서는 SwiftUI에서 복잡한 애니메이션과 전환을 구현하는 다양한 기술들을 살펴보았습니다. 기본 애니메이션부터 고급 애니메이션, 전환 애니메이션, 그리고 사용자 정의 전환까지 두루 다루면서 동적이고 매력적인 사용자 경험을 제공할 수 있는 방법을 배웠습니다. 이러한 기술들을 활용해 더욱 풍부하고 인터렉티브한 앱을 개발해 보세요.