[swift] Swift UI에서 사용 가능한 다양한 애니메이션 효과에 대해 설명해주세요.

01 Dec 2023

swift

Swift UI는 Apple의 UI 개발 프레임워크로, 많은 다양한 애니메이션 효과를 적용할 수 있습니다. 이러한 애니메이션 효과들을 활용하면 앱의 사용자 경험을 향상시키고, 시각적인 요소를 더욱 흥미롭게 만들 수 있습니다.

1. Transition Animation(전환 애니메이션)

전환 애니메이션은 한 화면에서 다른 화면으로의 전환 효과를 주는데 사용됩니다. Swift UI에서는 .transition() 메서드를 사용하여 전환 애니메이션을 구현할 수 있습니다.

예를 들어, 다음 코드는 버튼을 누를 때마다 뷰가 나타나고 사라지는 전환 애니메이션을 보여줍니다.

struct ContentView: View {
    @State private var showView = false
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.showView.toggle()
                }
            }, label: {
                Text("Toggle View")
            })
            
            if showView {
                Text("Hello, World!")
                    .transition(.opacity)
            }
        }
    }
}

위의 코드에서 .transition(.opacity)는 뷰의 나타남과 사라짐을 표현하는 애니메이션 효과입니다.

2. Rotation Animation(회전 애니메이션)

회전 애니메이션은 뷰를 시계 방향 또는 반시계 방향으로 회전시키는 효과를 줄 때 사용됩니다. Swift UI에서는 .rotationEffect() 메서드를 사용하여 회전 애니메이션을 구현할 수 있습니다.

다음 예제는 뷰를 회전시키는 애니메이션을 보여줍니다.

struct ContentView: View {
    @State private var rotateView = false
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.rotateView.toggle()
                }
            }, label: {
                Text("Rotate View")
            })
            
            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 200)
                .rotationEffect(Angle(degrees: rotateView ? 90 : 0))
                .animation(.easeInOut)
        }
    }
}

위의 코드에서는 .rotationEffect(Angle(degrees: rotateView ? 90 : 0))를 사용하여 회전 애니메이션을 적용합니다.

3. Scale Animation(확대/축소 애니메이션)

확대/축소 애니메이션은 뷰의 크기를 조정하여 화면에 나타나는 효과를 줄 때 사용됩니다. Swift UI에서는 .scaleEffect() 메서드를 사용하여 확대/축소 애니메이션을 구현할 수 있습니다.

다음 예제는 뷰의 크기를 확대/축소하는 애니메이션을 보여줍니다.

struct ContentView: View {
    @State private var scaleView = false
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.scaleView.toggle()
                }
            }, label: {
                Text("Scale View")
            })
            
            Rectangle()
                .fill(Color.blue)
                .frame(width: scaleView ? 300 : 200, height: scaleView ? 300 : 200)
                .animation(.spring())
        }
    }
}

위의 코드에서는 .scaleEffect() 메서드를 사용하여 뷰의 크기를 조정하고, .animation(.spring())을 사용하여 애니메이션을 적용합니다.

참고자료

Apple Developer Documentation - SwiftUI