기본 및 커스텀 애니메이션: SwiftUI에서 애니메이션 구현하기

SwiftUI는 애플의 최신 UI 프레임워크로, 선언형 문법을 통해 간결하고 직관적인 방식으로 사용자 인터페이스를 구축할 수 있게 합니다. 그 중에서도 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. SwiftUI에서는 다양한 애니메이션을 손쉽게 구현할 수 있으며, 기본 애니메이션부터 커스텀 애니메이션까지 폭넓게 지원합니다. 이번 글에서는 SwiftUI에서 기본 및 커스텀 애니메이션을 구현하는 방법에 대해 자세히 알아보겠습니다.

기본 애니메이션

기본 애니메이션은 SwiftUI에서 매우 간단하게 구현할 수 있습니다. SwiftUI의 기본 애니메이션은 상태 변화를 감지하여 자동으로 애니메이션을 적용합니다. 이를 위해 .animation() modifier를 사용합니다.

예제: 간단한 애니메이션

다음은 버튼을 클릭할 때마다 뷰의 크기가 변경되는 간단한 예제입니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(.default)

            Spacer()

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

위 코드에서 .animation(.default)를 사용하여 상태(isExpanded)가 변경될 때 크기 변화에 애니메이션을 적용했습니다. .animation(.default)는 기본 애니메이션으로, 부드럽게 변화합니다.

커스텀 애니메이션

기본 애니메이션 외에도 SwiftUI는 다양한 커스텀 애니메이션을 제공합니다. 커스텀 애니메이션은 애니메이션의 속성(예: 속도, 지연 시간, 스프링 효과 등)을 세밀하게 조정할 수 있습니다.

예제: 스프링 애니메이션

스프링 애니메이션은 자연스러운 탄성 효과를 주는 애니메이션입니다. .spring() modifier를 사용하여 구현할 수 있습니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(.spring(response: 0.5, dampingFraction: 0.6, blendDuration: 0))

            Spacer()

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

위 코드에서 .animation(.spring(response:dampingFraction:blendDuration:))을 사용하여 스프링 애니메이션을 적용했습니다. response는 애니메이션의 속도를, dampingFraction은 애니메이션의 탄성 정도를, blendDuration은 애니메이션 간의 블렌딩 시간을 설정합니다.

예제: EaseInOut 애니메이션

EaseInOut 애니메이션은 시작과 끝 부분에서 천천히 움직이고, 중간 부분에서 빠르게 움직이는 애니메이션입니다. .easeInOut() modifier를 사용하여 구현할 수 있습니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(.easeInOut(duration: 1.0))

            Spacer()

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

위 코드에서 .animation(.easeInOut(duration:))을 사용하여 EaseInOut 애니메이션을 적용했습니다. duration은 애니메이션의 지속 시간을 설정합니다.

애니메이션의 중첩 및 조합

SwiftUI에서는 여러 애니메이션을 중첩하거나 조합하여 복잡한 애니메이션을 구현할 수 있습니다. 이는 각 애니메이션의 시작 및 종료 시점을 조정하여 다양한 효과를 줄 수 있습니다.

예제: 중첩 애니메이션

다음은 크기와 색상이 동시에 변경되는 중첩 애니메이션의 예제입니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(isExpanded ? Color.red : Color.blue)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(.easeInOut(duration: 1.0))

            Spacer()

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

위 코드에서 색상과 크기 변화를 동시에 애니메이션으로 적용했습니다. isExpanded 상태가 변경될 때, .animation(.easeInOut(duration: 1.0))이 적용되어 색상과 크기가 동시에 부드럽게 변화합니다.

애니메이션 제어

SwiftUI에서는 애니메이션의 시작과 종료 시점을 제어할 수 있는 다양한 방법을 제공합니다. .delay() modifier를 사용하여 애니메이션을 지연시키거나, .repeatForever() modifier를 사용하여 애니메이션을 무한 반복할 수 있습니다.

예제: 지연된 애니메이션

다음은 버튼을 클릭한 후 1초 뒤에 애니메이션이 시작되는 예제입니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()

            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(Animation.easeInOut(duration: 1.0).delay(1.0))

            Spacer()

            Button(action: {
                isExpanded.toggle()
            }) {
                Text("Toggle Size with Delay")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

위 코드에서 .animation(Animation.easeInOut(duration: 1.0).delay(1.0))을 사용하여 버튼 클릭 후 1초 뒤에 애니메이션이 시작되도록 설정했습니다.

결론

SwiftUI는 애니메이션을 손쉽게 구현할 수 있는 강력한 도구들을 제공합니다. 기본 애니메이션부터 커스텀 애니메이션까지 다양한 옵션을 활용하여 더욱 풍부하고 동적인 사용자 경험을 제공할 수 있습니다. 애니메이션의 속성, 시작 및 종료 시점, 반복 등을 세밀하게 제어하여 원하는 애니메이션 효과를 구현해 보세요. SwiftUI의 애니메이션 기능을 잘 활용하면, 앱의 인터페이스를 더욱 매력적으로 만들 수 있습니다.