SwiftUI 애니메이션 커스터마이징: 부드러운 인터랙션 만들기

SwiftUI는 iOS 및 macOS 앱 개발을 위한 Apple의 혁신적인 프레임워크입니다. 이 프레임워크는 다양한 종류의 애니메이션과 UI 변경을 쉽게 처리할 수 있도록 설계되었습니다. 이번 글에서는 SwiftUI를 이용해 애니메이션을 커스터마이징하고 부드러운 인터랙션을 만들어 보는 방법에 대해 구체적으로 알아봅시다.

기본적인 SwiftUI 애니메이션 살펴보기

SwiftUI에서는 애니메이션을 withAnimation 블록을 사용해 매우 간단하게 구현할 수 있습니다. 예를 들어, 버튼을 누를 때마다 뷰의 크기와 색상을 변경하는 애니메이션을 살펴보겠습니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Rectangle()
                .fill(isExpanded ? Color.blue : Color.red)
                .frame(width: isExpanded ? 300 : 100, height: isExpanded ? 300 : 100)
                .animation(.default)

            Button(action: {
                withAnimation {
                    self.isExpanded.toggle()
                }
            }) {
                Text("Toggle Size")
            }
        }
    }
}

위의 예제는 상태 변화를 감지하고 withAnimation을 사용해 애니메이션을 적용합니다. 사각형의 크기와 색상은 버튼을 누를 때마다 부드럽게 전환됩니다.

애니메이션 커스터마이징하기

기본 애니메이션 뿐만 아니라, SwiftUI에서는 다양한 커스터마이징이 가능합니다. 예를 들어 애니메이션의 시간, 지연, 그리고 이징 곡선을 조절할 수 있습니다.

지연 애니메이션

애니메이션 시작을 지연시키는 방법으로는 .delay 수정자를 사용할 수 있습니다.

swift
Rectangle()
    .fill(Color.blue)
    .frame(width: 100, height: 100)
    .animation(Animation.default.delay(0.5))

이징 커브 애니메이션

SwiftUI는 다양한 이징 커브를 지원합니다. 이를 통해 애니메이션의 속도 변화를 조절할 수 있습니다. 예를 들어, easeIn, easeOut, easeInOut, linear 등을 사용할 수 있습니다.

swift
Rectangle()
    .fill(Color.blue)
    .frame(width: 100, height: 100)
    .animation(Animation.easeIn(duration: 2.0))

애니메이션 체인

애니메이션을 연속적으로 연결하는 것도 가능합니다. 이 경우 여러 애니메이션을 순차적으로 적용하여 복잡한 애니메이션 효과를 만들 수 있습니다.

swift
Rectangle()
    .fill(Color.blue)
    .frame(width: 100, height: 100)
    .animation(Animation.easeInOut(duration: 1).delay(0.5).repeatCount(3, autoreverses: true))

뷰 변경에 따른 애니메이션

SwiftUI에서는 상태 변화를 통해 쉽게 애니메이션을 적용할 수 있습니다. 하지만 어떤 뷰가 추가되거나 제거되었을 때도 애니메이션을 적용할 수 있습니다.

swift
struct ContentView: View {
    @State private var showDetails = false

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.showDetails.toggle()
                }
            }) {
                Text("Toggle Details")
            }

            if showDetails {
                Text("Here are the details!")
                    .transition(.slide)
                    .animation(.easeIn)
            }
        }
    }
}

위 예제에서는 if 블록을 사용해 상태 변화에 따른 뷰의 추가와 제거를 슬라이드 애니메이션과 함께 처리합니다.

커스텀 애니메이션 조합

복잡한 애니메이션을 만들기 위해 여러 애니메이션을 결합할 수도 있습니다. SwiftUI는 다양한 수정자와 애니메이션을 지원하므로, 다양한 방법으로 커스텀 애니메이션을 구현할 수 있습니다.

swift
struct ContentView: View {
    @State private var change = false

    var body: some View {
        Rectangle()
            .fill(change ? Color.green : Color.blue)
            .frame(width: change ? 200 : 100, height: change ? 200 : 100)
            .rotationEffect(.degrees(change ? 90 : 0))
            .animation(.easeIn(duration: 1))
            .onTapGesture {
                self.change.toggle()
            }
    }
}

위 예제에서는 색상, 크기, 회전 변화를 모두 결합한 애니메이션을 구현하였습니다. 탭 제스처를 통해 상태를 변화시키며, 모든 변화는 하나의 애니메이션으로 동작합니다.

마무리

SwiftUI를 사용하면 애니메이션을 직관적이고 간단하게 구현할 수 있습니다. 기본 애니메이션부터 시작하여, 애니메이션의 시간, 지연, 이징 곡선 등을 커스터마이징하고 여러 애니메이션을 조합하여 복잡한 인터랙션을 구현할 수 있습니다. SwiftUI의 애니메이션 기능을 통해 앱의 사용자 경험을 한층 더 개선해보세요.