SwiftUI - Launch Screen / splash screen

https://velog.io/@jyw3927/SwiftUI-Launch-Screen-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Gradient-Animation

위의 벨로그를 참조하여 작성하였습니다.

LaunchScreenView

import SwiftUI

struct LaunchScreenView: View {
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor"), Color("SubPrimaryColor")]), startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
            
            VStack {
                Text("Launch Screen")             
                Image("YourImage")
            }
        }
    }
}

struct LaunchScreenView_Previews: PreviewProvider {
    static var previews: some View {
        LaunchScreenView()
    }
}

LinearGradient 메서드의 경우 그라데이션을 도와주는 내장 기능이다. Assets에서 2개의 color set을 새로 만들어 하나는 "PrimaryColor", 다른 하나는 "SubPrimaryColor"로 만들어 주었다.

이제 ContentView로 돌아와서 isLoading Boolean 타입 변수를 활용하여 launch screen을 구현한다.

ContentView

import SwiftUI

struct ContentView: View {
    
    @State var isLoading: Bool = true
    
    var body: some View {
        ZStack {
            VStack {
                Text("Hello, world")
            }
            .padding()
            
            if isLoading {
                LaunchScreenView().transition(.opacity).zIndex(1)
            }
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 2, execute: {
                withAnimation { isLoading.toggle() }
            })
        }
    }
}

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

.transition(.opacity)과 withAnimation{...}을 통해 launch screen이 서서히 사라지는 애니메이션을 구현하였다.

결과