[swift] SwiftUI에서의 애니메이션과 모션 효과 구현 방법

14 Dec 2023

swift

SwiftUI는 사용자 인터페이스에 애니메이션과 모션 효과를 쉽게 구현할 수 있도록 강력한 기능을 제공합니다. 이번 글에서는 SwiftUI에서 애니메이션과 모션 효과를 구현하는 방법을 살펴보겠습니다.

애니메이션 구현하기

SwiftUI에서의 애니메이션은 withAnimation 블록 내에 애니메이션 효과를 적용할 수 있습니다. 예를 들어, 다음과 같이 버튼을 탭할 때 텍스트가 페이드인되는 애니메이션을 구현할 수 있습니다.

struct ContentView: View {
    @State private var isAnimating = false
    
    var body: some View {
        Button("애니메이션 시작") {
            withAnimation {
                isAnimating.toggle()
            }
        }
        .padding()
        .foregroundColor(.white)
        .background(isAnimating ? Color.blue : Color.green)
        .cornerRadius(10)
        .animation(.default)
    }
}

위 코드에서 withAnimation 블록 내에 isAnimating 상태를 토글함으로써 애니메이션을 시작합니다. 애니메이션 효과는 SwiftUI가 자동으로 처리하며, foregroundColor 및 background 값을 변경하여 색상 애니메이션 효과를 적용하였습니다.

모션 효과 구현하기

SwiftUI에서의 모션 효과는 기존 뷰의 위치나 크기를 변경하여 구현할 수 있습니다. 예를 들어, 드래그 제스처에 따라 뷰의 위치를 이동시키는 모션 효과를 구현할 수 있습니다.

struct ContentView: View {
    @State private var offset = CGSize.zero
    
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        offset = value.translation
                    }
                    .onEnded { _ in
                        withAnimation {
                            offset = .zero
                        }
                    }
            )
    }
}

위 코드에서 offset 상태를 변경하여 뷰의 위치를 조정하는 것으로 모션 효과를 구현했습니다. 또한, DragGesture를 사용하여 드래그 제스처에 대한 이벤트를 처리하고, withAnimation을 사용하여 모션 효과를 적용했습니다.

애니메이션과 모션 효과는 SwiftUI에서 사용자에게 더욱 동적이고 매력적인 사용자 경험을 제공하기 위한 강력한 도구입니다. SwiftUI의 간결하고 직관적인 API를 활용하여 다양한 애니메이션과 모션 효과를 적용해보세요.

애니메이션 구현하기

모션 효과 구현하기

참고 자료