Animated Launch Screen

Hey guys, I had come with a bit old concept with my unique way. It is animated Launch screen and animated loader. It is till useful for emerging developers. Here i used lottie frame work to achieve this.

Launch

Here is some piece of definition about lottie SDK

Lottie is a mobile library for Android and iOS that natively renders vector based animations and art in realtime with minimal code. Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.

SDK installation steps:

1. Initiate podfile using pod init command.

pod init

2. Add commands to install lottie in project from podfile.

pod 'lottie-ios'

3. Now use it in project.

Now add a viewcontroller for launch screen in .xcodeproj.

Change it to main

For lottie animation, we can get lottie JSON of any animation from this link https://lottiefiles.com/categories/animations. I have download water animation and infinity loader animation from this link and added it to project file.

Add animation view from lottieView. And init the lottie JSON file. Add frame and contentMode. Add animation speed and subview in self.view.

Now i had created separate file for loader and we can get that view anywhere and show loaded if needed. Here is the LoaderView file overview.

Now we can use that loader like in another view controller as button action.

@IBAction func showLoader(_ sender: UIButton){
let allViewsInXibArray = Bundle.main.loadNibNamed("Loader", owner: self, options: nil)
let myView = allViewsInXibArray?.first as! LoaderView
myView.frame = self.view.bounds
myView.play()
self.view.addSubview(myView)
DispatchQueue.main.asyncAfter(deadline: .now()+5, execute: {
myView.hide()
})
}

And now the final result is, Loader will hide after 5 seconds. You can make it configurable as per the need.

HAPPY CODING!🌤