이번 포스팅에서는 SwiftUI로 간단하게 Splash Screen (= Launch Screen)를 구현하는 방법을 알아보도록 하겠습니다.

onAppear 활용하기

SwiftUI로 Splash Screen를 구현할 때는 onAppear를 사용하면 됩니다. 앱이 켜지면 Splash Screen이 보이도록 하고 Splash Screen의 onAppear에 일정 시간 이후에 Splash Screen이 사라지도록 하는 코드를 넣으면 되는 것이죠.

아래 예시코드를 보시면 Splash Screen이 화면이 보여지고 onAppear에서 1초 후에 isLauching을 false로 만들어서 Splash Screen를 사라지게 합니다.

struct ContentView: View {
    
    @State var isLaunching: Bool = true
    
    var body: some View {
        if isLaunching {
            SplashView()
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        isLaunching = false
                    }
                }
        } else {
            Text("Launched!")
        }
    }
}

struct SplashView: View {
    
    var body: some View {
        ZStack {
            Color.blue
                .opacity(0.3)
                .ignoresSafeArea()
            Text("App is now Launching...")
        }
    }
}

Animation: Fade out 추가

위 코드의 결과물은 Splash Screen이 너무 순식간에 사라집니다. Fade out 효과를 해주도록 해봅시다.

아래 코드를 보시면 삼항연산자로 애니메이션 구현하고 있습니다. (링크 참고) 1초 후에 Splash Screen이 사라질 때 1초 동안 opacity가 감소하는 방법으로 fade out 되고 있습니다.

struct ContentView: View {
    
    @State var isLaunching: Bool = true
    
    var body: some View {
        if isLaunching {
            SplashView()
                .opacity(isLaunching ? 1 : 0)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        withAnimation(.easeIn(duration: 1)) {
                            isLaunching = false
                        }
                    }
                }
        } else {
            Text("Launched!")
        }
    }
}

struct SplashView: View {
    
    var body: some View {
        ZStack {
            Color.blue
                .opacity(0.3)
                .ignoresSafeArea()
            Text("App is now Launching...")
        }
    }
}