[swift] SwiftUI에서의 페이드인 및 페이드아웃 애니메이션 구현 방법

14 Dec 2023

swift

SwiftUI를 사용하여 사용자 인터페이스를 만들 때, 페이드인 및 페이드아웃 효과를 쉽게 구현할 수 있습니다. 이러한 애니메이션은 사용자 경험을 향상시키고 앱에 동적인 요소를 추가하는 데 도움이 됩니다. SwiftUI에서 페이드인 및 페이드아웃 애니메이션을 구현하는 방법을 살펴보겠습니다.

페이드인 애니메이션 구현하기

import SwiftUI

struct FadeInView: View {
    @State private var opacity: Double = 0

    var body: some View {
        Text("Fade In Animation")
            .font(.largeTitle)
            .opacity(opacity)
            .onAppear {
                withAnimation(.easeIn(duration: 1)) {
                    opacity = 1
                }
            }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            FadeInView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위의 예제는 SwiftUI에서 페이드인 애니메이션을 구현하는 방법을 보여줍니다. FadeInView이라는 사용자 지정 뷰를 생성하고, opacity 값을 사용하여 텍스트의 투명도를 제어합니다. onAppear modifier를 사용하여 뷰가 나타날 때 애니메이션을 적용하고, withAnimation 함수를 사용하여 부드러운 효과를 줍니다.

페이드아웃 애니메이션 구현하기

import SwiftUI

struct FadeOutView: View {
    @State private var shouldFadeOut: Bool = false

    var body: some View {
        Text("Fade Out Animation")
            .font(.largeTitle)
            .opacity(shouldFadeOut ? 0 : 1)
            .onTapGesture {
                withAnimation(.easeOut(duration: 1)) {
                    shouldFadeOut = true
                }
            }
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            FadeOutView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

위의 예제는 SwiftUI에서 페이드아웃 애니메이션을 구현하는 방법을 보여줍니다. FadeOutView이라는 사용자 지정 뷰를 생성하고, shouldFadeOut 값에 따라 텍스트의 투명도를 제어합니다. onTapGesture modifier를 사용하여 뷰를 탭할 때 애니메이션을 적용하고, 텍스트가 서서히 투명해지는 효과를 줍니다.

이러한 방식으로 SwiftUI에서 페이드인 및 페이드아웉 애니메이션을 구현할 수 있습니다. 이러한 애니메이션을 사용하여 앱의 사용자 인터페이스에 동적인 요소를 추가하여 사용자들의 시각적인 경험을 향상시킬 수 있습니다.

참고 자료: