Splash Screen Animation

Hello Guys, Today we learn about Splash Screen Animation with Video or Audio.

Sometimes, we want to launch our Splash screen with Audio and Video or want to play some animation starting when our app is launched, or want to play some .mp4 videos.

For this we need to do some lines of code in our app, let’s take an example.

Getting Started:-

Step 1:- First, we will Create an XCode project.

File–> New–> Project–> iOS–> Next and add the project name and then create the app.

Step 2:- Second, create a design in your stoaryboard.
Here, we create two screens, one for the launch screen and initial screen
In my first screen, we have taken the UIImageView and set it’s constraint accordingly.

Step 3:- Now, Add the code for the launch screen for animation.

Steps to follow:-

Added the video into your project directory, and add file in your project.

2. Add the video name in your build phase in bundle target.
Target–> Build Phase–> Copy Bundle Resources–> click plus button and add your videoname.mp4

3. Now, open your swift class and write some code for video and audio splash screen animation.
Here, we need to import AVFAudio and AVFoundation file to use the audio and video functionality in your app.

import UIKit
import AVFAudio
import AVFoundation


class ViewController: UIViewController {
    var player = AVAudioPlayer()
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.playSound(file: "SampleVideo", ext: "mp4")
    
    }
    func playSoundAnimation(file:String, ext:String) -> Void {
        let videoURL = NSURL(fileURLWithPath:Bundle.main.path(forResource: file, ofType:"mp4") ?? "")
        let player = AVPlayer(url: videoURL as URL)
        let playerLayer = AVPlayerLayer(player: player)
        playerLayer.frame = self.view.bounds
        self.view.layer.addSublayer(playerLayer)
        player.play()
        NotificationCenter.default.addObserver(self, selector:#selector(self.playerDidFinish(note:)),name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: player.currentItem)

            
        
    }
 @objc func playerDidFinish(note: NSNotification) {
    print("Video Finished")
  let stoaryboard = UIStoryboard(name: "Main", bundle: nil)
     let viewController = (stoaryboard.instantiateViewController(withIdentifier: "NextScreenViewController") as? NextScreenViewController)!
     self.navigationController?.pushViewController(viewController, animated: true)
   
}

}

import UIKit

import AVFAudio

import AVFoundation

class ViewController: UIViewController {

var player = AVAudioPlayer()

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.

self.playSound(file: "SampleVideo", ext: "mp4")

}

func playSoundAnimation(file:String, ext:String) -> Void {

let videoURL = NSURL(fileURLWithPath:Bundle.main.path(forResource: file, ofType:"mp4") ?? "")

let player = AVPlayer(url: videoURL as URL)

let playerLayer = AVPlayerLayer(player: player)

playerLayer.frame = self.view.bounds

self.view.layer.addSublayer(playerLayer)

player.play()

NotificationCenter.default.addObserver(self, selector:#selector(self.playerDidFinish(note:)),name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: player.currentItem)

}

@objc func playerDidFinish(note: NSNotification) {

print("Video Finished")

let stoaryboard = UIStoryboard(name: "Main", bundle: nil)

let viewController = (stoaryboard.instantiateViewController(withIdentifier: "NextScreenViewController") as? NextScreenViewController)!

self.navigationController?.pushViewController(viewController, animated: true)

}

Lastly, Run the project and see the output in your device.

Conclusion:-

In this blog, we discussed about, how to Animate the spalsh screen with audio and video or .mp4.

I hope this blog will help you to understand the flow of Splash Screen Animation functionality.

To learn about a more iOS related topics, Please click here.

Thanks for reading!!!

Khushboo Gupta 28 February 2023

. . .

Getting Started:-

Steps to follow:-

Conclusion:-

Thanks for reading!!!

Leave a Comment Cancel Reply

Message Sent!