SwiftUI의 기본 애니메이션 적용하기: 간단한 애니메이션 만들기

SwiftUI는 애플에서 제공하는 현대적인 UI 프레임워크로, 선언적 방식으로 사용자 인터페이스를 구성할 수 있습니다. 이 글에서는 SwiftUI를 사용하여 간단한 애니메이션을 적용하는 방법에 대해 알아보겠습니다. 애니메이션은 앱의 사용자 경험을 한층 더 향상시키는 중요한 요소입니다.

SwiftUI 애니메이션의 기본 개념

SwiftUI에서 애니메이션을 적용하는 것은 매우 직관적입니다. withAnimation 함수를 사용하면 특정 상태값이 변경될 때 자동으로 애니메이션이 적용되도록 할 수 있습니다. SwiftUI 애니메이션은 애니메이션의 선언적인 특성을 가지며, 이를 통해 UI의 상태 변경을 자연스럽게 표현할 수 있습니다.

예를 들어, 버튼을 눌렀을 때 크기가 커졌다 작아지는 간단한 애니메이션을 만들어 보겠습니다.

swift
import SwiftUI

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

    var body: some View {
        Button(action: {
            withAnimation {
                self.isPressed.toggle()
            }
        }) {
            Text("Press Me")
                .padding()
                .background(isPressed ? Color.red : Color.blue)
                .scaleEffect(isPressed ? 1.5 : 1.0)
                .animation(.easeInOut(duration: 0.5))
        }
    }
}

이 코드는 @State 프로퍼티인 isPressed가 변경될 때 scaleEffect와 배경색이 애니메이션을 통해 변경되는 것을 보여줍니다.

커스텀 애니메이션 만들기

SwiftUI에서는 기본 제공되는 애니메이션 외에도 다양한 커스터마이징이 가능합니다. 예를 들어, animation 메서드를 사용하여 애니메이션의 종류와 지속 시간을 설정할 수 있습니다. easeInOut, easeIn, easeOut, linear 등의 애니메이션 커브를 사용할 수 있으며, duration을 통해 애니메이션의 시간을 설정할 수 있습니다.

swift
import SwiftUI

struct CustomAnimationView: View {
    @State private var isRotated = false

    var body: some View {
        VStack {
            Spacer()
            Image(systemName: "arrow.right.circle")
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(isRotated ? 360 : 0))
                .animation(Animation.easeInOut(duration: 2.0).repeatForever(autoreverses: false))
                .onAppear() {
                    self.isRotated.toggle()
                }
            Spacer()
        }
    }
}

위의 코드는 화살표 아이콘이 영원히 돌아가는 애니메이션을 보여줍니다. repeatForever를 사용하여 애니메이션이 무한히 반복되도록 설정했습니다.

애니메이션의 조합

여러 애니메이션을 조합하여 복잡한 애니메이션 효과를 만들 수도 있습니다. SwiftUI에서는 animation 메서드를 중첩하여 여러 상태 변경에 각각 다른 애니메이션을 적용할 수 있습니다.

swift
import SwiftUI

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

    var body: some View {
        VStack {
            Spacer()
            Rectangle()
                .fill(isExpanded ? Color.green : Color.orange)
                .frame(width: isExpanded ? 300 : 100, height: 100)
                .cornerRadius(isExpanded ? 50 : 0)
                .animation(.default)
                .onTapGesture {
                    withAnimation {
                        self.isExpanded.toggle()
                    }
                }
            Spacer()
        }
    }

이 코드는 터치 이벤트에 따라 사각형의 크기와 모서리 반경, 색상이 변경되는 애니메이션 효과를 보여줍니다. withAnimation 블록을 사용하여 여러 애니메이션을 동시에 적용할 수 있습니다.

정리

SwiftUI를 이용한 애니메이션은 코드의 간결함과 선언적 특성 덕분에 매우 직관적이고 쉽게 사용할 수 있습니다. 기본 애니메이션부터 커스텀 애니메이션, 애니메이션의 조합까지 다양한 방법을 통해 사용자 경험을 개선할 수 있습니다. 이를 통해 더욱 생동감 있고 매력적인 앱 인터페이스를 만들어 보세요.