[ios] SwiftUI 애니메이션

18 Dec 2023

iOS 앱을 개발하다보면 사용자에게 보다 매끄럽고 시각적으로 매력적인 경험을 제공하기 위해 애니메이션을 사용해야 할 때가 있습니다. SwiftUI에서는 애니메이션을 간단하게 구현할 수 있어 사용자 경험을 향상시킬 수 있습니다. 이번 포스트에서는 SwiftUI에서 애니메이션을 만드는 방법을 알아보겠습니다.

기본 애니메이션

SwiftUI에서 기본적인 애니메이션은 간단하게 구현할 수 있습니다. 예를 들어, 뷰의 투명도를 변경하는 애니메이션을 만들어보겠습니다.

먼저, View 구조체를 사용하여 opacity 속성을 애니메이션화 합니다.

import SwiftUI

struct ContentView: View {
    @State private var isShowing: Bool = false

    var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200)
                .opacity(isShowing ? 1.0 : 0.0)
                .animation(.easeInOut(duration: 1.0))

            Button("애니메이션 시작") {
                withAnimation {
                    self.isShowing.toggle()
                }
            }
        }
    }
}

위의 코드에서 opacity 속성을 변경할 때 withAnimation을 사용하여 애니메이션을 적용했습니다. 애니메이션의 옵션은 easeInOut으로 설정했고, 지속 시간은 1초로 지정하였습니다.

사용자 정의 애니메이션

때로는 기본 애니메이션을 사용하는 것 이상의 작업이 필요할 때가 있습니다. SwiftUI를 사용하면 사용자 정의 애니메이션도 간단하게 구현할 수 있습니다.

다음은 View 프로토콜을 채택하여 사용자 정의 애니메이션을 구현하는 예시입니다.

import SwiftUI

struct RotatingSquare: View {
    @State private var degrees = 0.0

    var body: some View {
        Rectangle()
            .frame(width: 100, height: 100)
            .foregroundColor(.red)
            .rotationEffect(.degrees(degrees))
            .animation(
                Animation.linear(duration: 2)
                    .repeatForever(autoreverses: false)
            )
            .onAppear {
                self.degrees = 360
            }
    }
}

struct ContentView: View {
    var body: some View {
        RotatingSquare()
    }
}

RotatingSquare 뷰는 상태 속성 degrees를 사용하여 회전 애니메이션을 구현하고 있습니다. onAppear 수식어를 사용하여 뷰가 나타날 때 초기 회전 각도를 설정합니다.

SwiftUI 애니메이션은 간단하면서도 강력하며, 앱의 UI/UX를 향상시키는데 중요한 역할을 합니다. SwiftUI를 사용하면 다양한 스타일의 애니메이션을 쉽게 구현할 수 있으므로, 앱의 사용자 경험을 개선하기 위해 적극 활용해보시기 바랍니다.

참고문헌: SwiftUI 애니메이션 가이드