[swift] 애니메이션을 적용할 수 있는 SwiftUI 뷰 요소

14 Dec 2023

swift

SwiftUI는 강력한 애니메이션 기능을 제공하여 앱에 동적이고 매끄러운 사용자 경험을 제공할 수 있습니다. SwiftUI에서는 다양한 뷰 요소에 애니메이션을 적용할 수 있으며, 주요 사용하는 방법에 대해 알아보겠습니다.

1. Transition

import SwiftUI

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

    var body: some View {
        VStack {
            Button("Show Details") {
                withAnimation {
                    showDetails.toggle()
                }
            }

            if showDetails {
                Text("Details go here.")
                    .transition(.opacity)
            }
        }
    }
}

Transition을 사용하면 뷰 요소의 등장 및 퇴장에 애니메이션 효과를 적용할 수 있습니다.

2. Animation

import SwiftUI

struct ContentView: View {
    @State private var size: CGFloat = 100

    var body: some View {
        Circle()
            .frame(width: size, height: size)
            .foregroundColor(.blue)
            .animation(.easeInOut(duration: 2))
            .onTapGesture {
                withAnimation {
                    size = 200
                }
            }
    }
}

Animation을 사용하여 뷰 요소의 속성 변경에 애니메이션을 적용할 수 있습니다.

3. Gesture

import SwiftUI

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

    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .frame(width: 200, height: 200)
            .foregroundColor(.blue)
            .offset(offset)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        offset = value.translation
                    }
                    .onEnded { _ in
                        withAnimation {
                            offset = .zero
                        }
                    }
            )
    }
}

Gesture를 사용하여 사용자의 터치 및 드래그 동작에 애니메이션을 적용할 수 있습니다.

SwiftUI를 사용하여 애니메이션을 적용하는 방법에 대해 간단히 알아보았습니다. 애니메이션을 활용하여 동적이고 매끄러운 사용자 경험을 구현할 수 있습니다.

참조: SwiftUI - Animations