[ios] SwiftUI로 구현하는 서로 다른 유형의 애니메이션

21 Dec 2023

iOS 앱을 개발하다보면 사용자 인터랙션을 더 흥미롭게 만들기 위해 다양한 애니메이션을 구현해야 할 때가 있습니다. SwiftUI를 사용하면 여러 가지 유형의 애니메이션을 쉽게 구현할 수 있습니다. 이번 포스트에서는 SwiftUI를 사용하여 다양한 유형의 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

제목

애니메이션 기본
회전 애니메이션 구현
스케일 및 페이드 애니메이션 구현
애니메이션에 대한 추가적인 리소스

애니메이션 기본

가장 기본적인 SwiftUI 애니메이션은 간단한 fade in/out 또는 이동 애니메이션 등을 말합니다. 예시 코드를 통해 애니메이션의 기초적인 내용을 확인할 수 있습니다.

import SwiftUI

struct BasicAnimationView: View {
    @State private var isShowingRedBox = false
    
    var body: some View {
        Button("애니메이션 토글") {
            withAnimation {
                isShowingRedBox.toggle()
            }
        }
        if isShowingRedBox {
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(.red)
        }
    }
}

위 코드에서 withAnimation을 사용하여 간단한 페이드인/아웃 애니메이션을 활용할 수 있습니다.

회전 애니메이션 구현

또 다른 애니메이션 유형으로 회전 애니메이션을 구현할 수 있습니다. 예시 코드를 통해 회전 애니메이션을 살펴보실 수 있습니다.

import SwiftUI

struct RotationAnimationView: View {
    @State private var isRotated = false
    
    var body: some View {
        Button("애니메이션 토글") {
            withAnimation {
                isRotated.toggle()
            }
        }
        .rotationEffect(Angle.degrees(isRotated ? 90 : 0))
    }
}

위 코드에서는 rotationEffect를 사용하여 버튼을 클릭할 때마다 사각형이 90도씩 회전하는 애니메이션을 구현할 수 있습니다.

스케일 및 페이드 애니메이션 구현

마지막으로, 스케일 및 페이드 애니메이션을 구현할 수 있습니다. 예시 코드를 통해 구현 방법을 확인할 수 있습니다.

import SwiftUI

struct ScaleFadeAnimationView: View {
    @State private var isScaledAndFaded = false
    
    var body: some View {
        Button("애니메이션 토글") {
              withAnimation {
                  isScaledAndFaded.toggle()
              }
          }
          .scaleEffect(isScaledAndFaded ? 2 : 1)
          .opacity(isScaledAndFaded ? 0.5 : 1)
    }
}

위 코드에서는 scaleEffect 및 opacity를 이용하여 버튼을 클릭할 때마다 사각형의 크기와 투명도가 변경되는 애니메이션을 구현했습니다.

애니메이션에 대한 추가적인 리소스

SwiftUI에서의 애니메이션 구현은 더 많은 리소스와 다른 유형의 애니메이션에 대한 지식이 필요할 수 있습니다. 더 많은 정보 및 예제는 SwiftUI 공식 문서 및 애플 개발자 웹사이트에서 확인할 수 있습니다.

위의 예시 코드는 SwiftUI 2.0에서 작동하며, iOS 14 이상에서 지원됩니다. 자세한 내용은 공식 SwiftUI 문서를 참고하시기 바랍니다.

이렇듯, SwiftUI를 통해 다양한 애니메이션을 손쉽게 구현할 수 있습니다. iOS 앱의 사용자 경험을 향상시키는 데 도움이 되는 애니메이션을 구현해보세요.