Imagine the first time you open an app—those early moments are pretty important. And what gives you that first good feeling? Well, it’s the Launch Screen Animation. Now, with SwiftUI in play, the art of forming these screens takes a detour from the conventional UIKit route. Let’s smoothly navigate into the captivating and clever process of constructing a launch screen. It’s not just about delivering a friendly “hello”; it’s about sparking that special sentiment from the get-go. The Launch Screen Animation adds that extra touch, setting the vibe right from the start.

Let’s talk about why first impressions matter. We’re delving into why a nifty launch screen can boost your user’s mood and set a positive vibe for their app journey.

Basic Example of Launch Animation

In SwiftUI, you can create a launch screen animation using a combination of View animations and transitions. Here’s a simple example to help you begin. This example assumes you have a basic understanding of SwiftUI.

import SwiftUI

struct LaunchScreenAnimation: View {
    @State private var isAnimationVisible = true

    var body: some View {
        ZStack {
            // Your main content goes here

            // Launch screen with animation
            LaunchScreen()
                .opacity(isAnimationVisible ? 1 : 0)
                .onAppear {
                    withAnimation(.easeOut(duration: 1.5)) {
                        isAnimationVisible = false
                    }
                }
        }
    }
}

struct LaunchScreen: View {
    var body: some View {
        // Customize your launch screen content here
        Text("Your App Name")
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .cornerRadius(10)
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Your Main Content Goes Here")
                    .padding()
            }
            .navigationTitle("Main Content")
        }
    }
}

@main
struct YourAppNameApp: App {
    var body: some Scene {
        WindowGroup {
            LaunchScreenAnimation()
        }
    }
}

In this example, LaunchScreenAnimation is the main entry point, and it uses a ZStack to overlay the launch screen on top of the main content. The isAnimationVisible state variable is used to control the visibility of the launch screen.

The launch screen is represented by the LaunchScreen view, which contains a simple example with a text view. You can customize the launch screen content to match your app’s design.

The onAppear modifier is used to trigger the animation when the launch screen appears. The withAnimation block specifies the animation type and duration. In this scenario, it employs a fade-out animation lasting for 1.5 seconds.

Make sure to replace the placeholder content with your actual app content and design.

Check out this easy example of a startup screen created entirely with SwiftUI!

LaunchScreen-SwiftUI

SwiftUI Launch Screen Animation
Launch Screen Animation in SwiftUI

ContentView Class

import SwiftUI
import AlertToast

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .cornerRadius(20)
            .shadow(color: Color.black.opacity(0.2), radius: 20, x: 0, y: 0)
        
    }
}

struct ContentView: View {
    let instagramLink = "https://www.instagram.com/Maxime_dpj"
    let twitterLink = "https://twitter.com/max21160"
    let githubLink = "https://github.com/max21910"
    let url = URL(string: "https://github.com/max21910/LaunchScreen-iOS")!
    let impact = UIImpactFeedbackGenerator() //set vibration
    @AppStorage("vibration ") var vibration = true
    @State private var Welcome = false
    @State private var showanime = true
    @State private var easteregg = false
    @State private var count = 0
    
    var body: some View {
        NavigationView{
            ZStack {
                Color.black.ignoresSafeArea() //force the background to be black
                VStack(spacing: 5) {
                    Image("bigIcon")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .clipShape(Circle())
                        .onAppear {
                            if showanime == true { //if this is the first time show the animation
                                Welcome.toggle()
                            }
                        }
                        .onTapGesture {
                            count = count + 1
                            if count == 10 {
                                easteregg.toggle()
                                count = 0
                            }
                        }
                    
                    Text("Developer")
                        .font(.title)
                        .fontWeight(.bold)
                    
                    Text("Maxime Jourdan")
                        .font(.headline)
                        .foregroundColor(.gray)
                    
                    Text("maxime21160@icloud.com")
                        .font(.headline)
                        .foregroundColor(.gray)
                    
                    HStack {
                        Button(action: {
                            if vibration == true {
                                impact.impactOccurred()
                            }
                            guard let url = URL(string: instagramLink) else { return }
                            UIApplication.shared.open(url)
                        }) {
                            Image("insta")
                                .resizable()
                                .frame(width: 30, height: 30)
                                .foregroundColor(.pink)
                                .font(.system(size: 24))
                                .padding(10)
                            
                        }
                        
                        Button(action: {
                            if vibration == true {
                                impact.impactOccurred()
                            }
                            guard let url = URL(string: twitterLink) else { return }
                            UIApplication.shared.open(url)
                        }) {
                            Image("twitter")
                                .resizable()
                                .frame(width: 30, height: 30)
                                .foregroundColor(.blue)
                                .font(.system(size: 24))
                                .padding(10)
                        }
                        
                        Button(action: {
                            if vibration == true {
                                impact.impactOccurred()
                            }
                            guard let url = URL(string: githubLink) else { return }
                            UIApplication.shared.open(url)
                        }) {
                            Image("github")
                                .resizable()
                                .frame(width: 30, height: 30)
                                .foregroundColor(.black)
                                .font(.system(size: 24))
                                .padding(10)
                        }
                    }
                    
                   
                    Button(action: {
                        if vibration == true {
                            impact.impactOccurred()
                        }
                        let activityVC = UIActivityViewController(activityItems: [url], applicationActivities: nil)
                        guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
                              let rootViewController = windowScene.windows.first?.rootViewController else {
                            return
                        }
                        rootViewController.present(activityVC, animated: true, completion: nil)
                    }) {
                        VStack{
                            Text("Version 1.2 Launchscreen")
                            
                                .padding(10)
                            Text("Made by Max21910 in 🇫🇷 with ❤️")
                                .foregroundColor(Color.white)
                                .fontWeight(.bold)
                                .padding(10)
                            Button(action: {
                                if vibration == true {
                                    impact.impactOccurred()
                                }
                                let activityVC = UIActivityViewController(activityItems: [url], applicationActivities: nil)
                                guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
                                      let rootViewController = windowScene.windows.first?.rootViewController else {
                                    return
                                }
                                rootViewController.present(activityVC, animated: true, completion: nil)
                            }) {
                                HStack{
                                    Image(systemName: "square.and.arrow.up")
                                    Text("find this project on github")
                                    
                                }
                                
                            }
                        }
                        .frame(width: 370,height: 140)
                        .background(Color(red: 32/255, green: 36/255, blue: 38/255))
                        .modifier(CardModifier())
                        .padding(.all, 5)
                        .cornerRadius(15)
                        
                        
                    }
                    
                }
            }
            .navigationTitle("About")
        }
        .toast(isPresenting: $Welcome, duration: 6) {
            
            // `.alert` is the default displayMode
            AlertToast(displayMode: .banner(.pop),type: .systemImage("person.line.dotted.person.fill", Color.blue), title: "Thanks for Use my project!", subTitle: "Maxime Jourdan - Developer")
        } completion: {
            //Completion block after dismiss
            print("alert AboutView dissmis")
            showanime = false //make sure to show only 1 time the greeting animation
        }
        .toast(isPresenting: $easteregg, duration: 10) {
            
            // `.alert` is the default displayMode
            AlertToast(displayMode: .banner(.pop),type: .systemImage("person.line.dotted.person.fill", Color.blue), title: "Easter egg !! 🥚this is my favorite quote : ", subTitle: "Steve Jobs once said, “Give people wonderful tools, and they'll do wonderful things”.")
        } completion: {
            //Completion block after dismiss
            print("alert AboutView dissmis")
            showanime = false //make sure to show only 1 time the greeting animation
        }
        
    }
    
}

LaunchScreenXcodeApp.swift

import SwiftUI

@main
struct LaunchScreenXcodeApp: App {
    var body: some Scene {
        WindowGroup {
            Prelaunch() //launch the app to the Launchscreen View
        }
    }
}
Dark Mode Home Screen In SwiftUI
Dark Mode Home Screen
Light Mode Home Screen In SwiftUI
Light Mode Home Screen

Create Prelaunch.swift Class

import SwiftUI

struct Prelaunch: View {
    
    @State private var animationisfinish = false
    @State private var angle: Double = 360
    @State private var opacity : Double = 1
    @State private var scale : CGFloat = 1
    
    var body: some View {
        Group {
            if animationisfinish == true {
                
                ContentView() //view after the animation is completed
                
            } else { //else we start the animation
                
                
                ZStack {
                    //set a background color here if you whant
                 /*  Image("Blue")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .ignoresSafeArea()
                  */
                    
                    Image("bigIcon")//you can add your own icone in the asset folder
                        .resizable()
                        .frame(width: 200, height: 200)
                        .rotation3DEffect(
                            .degrees(angle),
                            axis: (x: 0.0, y: 1.0, z: 0.0)
                        )
                        .opacity(opacity)
                        .scaleEffect(scale)
                }
            }
        }
        
        .onAppear { // OnAppear start the animation when the view is seen by the user
            withAnimation(Animation.linear(duration: 2)) {
                angle = 0
                scale = 3
                opacity = 0
            }
            withAnimation(.linear.delay(1.75)) {
                animationisfinish = true
            }
        }
    }
}


struct PrelaunchView_Previews: PreviewProvider {
    static var previews: some View {
        Prelaunch()
    }
}

Github – Launch Screen Animation in SwiftUI

Twitter Launch/Splash Animation – SwiftUI

import SwiftUI

struct ContentView: View {
  let color : UIColor = UIColor(red: 29/255.0, green: 161/255.0, blue: 242/255.0, alpha: 1)
  
  @State var animation: Bool = false
  @State var showSplash: Bool = true
  
  var body: some View {
    VStack{
      ZStack{
        //Content
        ZStack{
          VStack{
            Text("Atakan Cengiz KURT")
              .foregroundColor(Color.init(color))
              .font(.largeTitle)
              .bold()
              .padding()
            
            Image(systemName: "house")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: UIScreen.main.bounds.width * 0.6, height: UIScreen.main.bounds.height * 0.3, alignment: .center)
              
          }
          
        }
        //Splash
        ZStack{
          Color(color)
          
          Image("twitter")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 85, height: 85, alignment: .center)
            .scaleEffect(animation ? 50 : 1)
            .animation(Animation.easeOut(duration: 0.4))
          
          
        }
        .edgesIgnoringSafeArea(.all)
        .animation(Animation.linear(duration: 1))
        .opacity(showSplash ? 1 : 0)
      }
    }.onAppear(perform: {
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
        self.animation.toggle()
      }
      DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
        self.showSplash.toggle()
      }
    })
    
    
  }
}

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

Github – Twitter Splash Screen Animation in SwiftUI

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *