[swift] SwiftUI에서의 애니메이션과 제스처 인식의 결합

14 Dec 2023

swift

SwiftUI는 사용자 인터페이스를 빌드하는 데 사용되는 현대적이고 직관적인 방법을 제공합니다. SwiftUI로 애니메이션과 제스처를 결합하여 사용자 경험을 향상시키는 방법을 살펴보겠습니다.

애니메이션

애니메이션이란 뷰의 변화를 부드럽게 보여주는 기술입니다. SwiftUI에서는 간단한 코드 몇 줄만으로 애니메이션을 추가할 수 있습니다.

struct AnimatedView: View {
    @State private var isAnimated = false

    var body: some View {
        Circle()
            .scaleEffect(isAnimated ? 2 : 1)
            .animation(.easeInOut(duration: 1))
            .onTapGesture {
                self.isAnimated.toggle()
            }
    }
}

위의 예제에서 scaleEffect를 사용하여 원의 크기를 애니메이션화하고, onTapGesture를 이용하여 터치 제스처를 감지하여 애니메이션을 트리거합니다. animation 함수를 사용하여 애니메이션의 타이밍 및 이징을 설정할 수 있습니다.

제스처 인식

사용자의 터치 또는 제스처를 감지하여 해당 동작에 반응하게 하는 것이 제스처 인식입니다. SwiftUI에서는 제스처 인식을 위한 간단하고 효과적인 수단을 제공합니다.

struct GestureView: View {
    @State private var offset = CGSize.zero

    var body: some View {
        Circle()
            .frame(width: 100, height: 100)
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        self.offset = value.translation
                    }
                    .onEnded { value in
                        withAnimation {
                            self.offset = .zero
                        }
                    }
            )
    }
}

위의 예제에서 DragGesture를 사용하여 사용자의 드래그 제스처를 감지하고, 이에 대한 동작을 정의합니다. onChanged에서는 드래그하는 동안의 움직임을 감지하고, onEnded에서는 드래그가 끝난 후의 동작을 정의합니다.

결합

이제, 위의 두 가지 예제를 결합하여 애니메이션과 제스처를 함께 사용하는 방법을 알아보겠습니다.

struct CombinedView: View {
    @State private var isAnimated = false
    @State private var offset = CGSize.zero

    var body: some View {
        Circle()
            .scaleEffect(isAnimated ? 2 : 1)
            .animation(.easeInOut(duration: 1))
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        self.offset = value.translation
                    }
                    .onEnded { value in
                        withAnimation {
                            self.offset = .zero
                        }
                    }
            )
            .onTapGesture {
                self.isAnimated.toggle()
            }
    }
}

위의 예제에서는 Circle에 애니메이션과 드래그 제스처를 모두 적용했습니다. 원을 탭하면 애니메이션이 트리거되고, 드래그하면 해당 위치로 이동하면서 애니메이션이 적용됩니다.

이와 같이 SwiftUI에서는 간단한 코드 몇 줄만으로 애니메이션과 제스처를 쉽게 결합하여 풍부한 사용자 경험을 구현할 수 있습니다.

더 많은 정보를 원하시면, Apple 공식 문서를 참고하시기 바랍니다.