Splash Screen

The splash screen is one of the first interactions that a user has with your application. In the ShipThatApp SwiftUI boilerplate, the splash screen is designed to provide an engaging start to the application experience with a delay mechanism that keeps the splash screen visible for a predefined duration.

Overview

The splash screen in this application is managed by SplashScreenView.swift and controlled by SplashScreenStateManager.swift. The state manager ensures that the splash screen display logic proceeds through defined steps before revealing the main content of the app.

SplashScreenStateManager

The SplashScreenStateManager is an ObservableObject that holds the state of the splash screen which can be one of the following: .firstStep, .secondStep, and .finished. It's designed to progress the splash screen through these states, imbuing the splash screen with dynamic elements.

Key Properties

• state: Enum value representing the current state of the splash screen, determining which view to show.

Key Methods

• dismiss(): Controls the progression of the splash screen's states with asynchronous delay and updates the state property accordingly.

SplashScreenView

SplashScreenView is a SwiftUI view that displays the splash screen using animations and transitions based on the state managed by SplashScreenStateManager.

Layout and Design

• An image or logo for branding.
• App title or slogan for immediate app identification.
• [Optional] Animations or additional text to enhance user engagement.

Code Structure

struct SplashScreenView: View {
    // Bind to the SplashScreenStateManager
    @EnvironmentObject private var splashScreenState: SplashScreenStateManager

    // States for animating the splash screen elements
    @State private var firstAnimation = false
    @State private var secondAnimation = false
    @State private var startFadeoutAnimation = false

    // Body
    var body: some View {
        ZStack {
            // Background color or image
            Color(.accent).edgesIgnoringSafeArea(.all)

            // Content: Can include logo, title, tagline, and animations
            VStack {
                Image("Logo")
                // Animation and transition effects based on splash screen state
            }

            // Transitions and animations are triggered by splashScreenState changes
        }
        .onReceive(animationTimer) { timerValue in
            updateAnimation()
        }
    }

    // Defines how animations are triggered based on splash screen state
    private func updateAnimation() {
        ...
    }
}

Animation and State Progression

• The splash screen animations are set to trigger based on the state progression as dictated by dismissSplashScreenAfterDelay() within ShipThatAppApp.swift.
• For example, firstAnimation might begin when the view appears, and secondAnimation might start after a delay, followed by startFadeoutAnimation which fades the splash screen, transitioning to the main content.

Integration in App Lifecycle

In ShipThatAppApp.swift, you'll find SplashScreenView integrated as follows:

@main
struct ShipThatAppApp: App {
    @StateObject var splashScreenState = SplashScreenStateManager()

    var body: some Scene {
        WindowGroup {
            if splashScreenState.state != .finished {
                SplashScreenView()
                    .environmentObject(splashScreenState)
                    .task {
                        await dismissSplashScreenAfterDelay()
                    }
            } else {
                ContentView()
            }
        }
    }
}

Customization Tips

• To sync with branding, customize the color palette, logo, and animations in SplashScreenView.
• Set your logo in Image("Logo"), which should be replaced with your app's logo in the asset catalog.
• Adjust the delay for how long the splash screen is visible by modifying dismissSplashScreenAfterDelay() in ShipThatAppApp.swift.