SwiftUI에서 애니메이션과 트랜지션 다루기

SwiftUI에서 애니메이션과 트랜지션 다루기

SwiftUI에서 애니메이션과 트랜지션 다루기

애니메이션과 트랜지션은 사용자 경험을 향상시키는 중요한 요소입니다. SwiftUI는 개발자가 복잡한 애니메이션을 간결하게 구현할 수 있는 강력한 기능을 제공합니다. 이번 글에서는 SwiftUI에서 애니메이션과 트랜지션을 활용하는 방법에 대해 알아보겠습니다.

---

1. 애니메이션 기본 사용법

SwiftUI에서는 withAnimation을 사용하여 상태 변화를 애니메이션으로 처리할 수 있습니다.

예제: 버튼 클릭 시 뷰 크기 변경

import SwiftUI

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

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .animation(.easeInOut(duration: 0.5), value: isExpanded)

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

주요 포인트

• animation(_:value:)를 사용하여 특정 값 변화에 애니메이션을 적용합니다.
• easeInOut, linear, spring 등 다양한 애니메이션 옵션을 제공합니다.

---

2. 커스텀 애니메이션

기본 애니메이션 외에 Animation 객체를 커스터마이징할 수 있습니다.

예제: 스프링 애니메이션 적용

struct SpringAnimationView: View {
    @State private var moveRight = false

    var body: some View {
        Circle()
            .fill(Color.pink)
            .frame(width: 50, height: 50)
            .offset(x: moveRight ? 150 : -150)
            .animation(
                .interpolatingSpring(stiffness: 50, damping: 5),
                value: moveRight
            )
            .onTapGesture {
                moveRight.toggle()
            }
    }
}

주요 포인트

• interpolatingSpring(stiffness:damping:)를 통해 스프링 효과를 적용합니다.
• stiffness와 damping 값을 조정하여 애니메이션의 움직임을 세부적으로 제어합니다.

---

3. 트랜지션 적용하기

트랜지션은 뷰의 삽입 및 제거 시 애니메이션을 적용하는 데 사용됩니다.

예제: 조건부 뷰에 트랜지션 적용

struct TransitionExampleView: View {
    @State private var showBox = false

    var body: some View {
        VStack {
            if showBox {
                Rectangle()
                    .fill(Color.green)
                    .frame(width: 100, height: 100)
                    .transition(.slide)
            }

            Button("Toggle View") {
                withAnimation {
                    showBox.toggle()
                }
            }
        }
    }
}

주요 포인트

• transition(_:) 메서드를 사용해 트랜지션 효과를 적용합니다.
• slide, opacity, scale 등 기본 제공 트랜지션을 사용할 수 있습니다.

---

4. 커스텀 트랜지션

커스텀 트랜지션을 직접 정의할 수도 있습니다.

예제: 회전 트랜지션

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

struct RotationEffect: ViewModifier {
    var angle: Angle

    func body(content: Content) -> some View {
        content
            .rotationEffect(angle)
            .clipped()
    }
}

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

    var body: some View {
        VStack {
            if showCircle {
                Circle()
                    .fill(Color.orange)
                    .frame(width: 100, height: 100)
                    .transition(.rotate)
            }

            Button("Toggle Circle") {
                withAnimation {
                    showCircle.toggle()
                }
            }
        }
    }
}

주요 포인트

• AnyTransition.modifier(active:identity:)를 사용해 커스텀 트랜지션을 정의합니다.
• ViewModifier를 활용하여 뷰의 애니메이션 상태를 지정합니다.

---

5. 결론

SwiftUI의 애니메이션과 트랜지션은 사용자 인터페이스에 생동감을 부여하는 강력한 도구입니다.

기본 제공 기능과 커스텀 옵션을 적절히 활용하여 직관적이고 아름다운 UI를 구현해 보시기 바랍니다.