Synchronised splash animation

In this article we are going to explore simple technique to make synchronised splash animation. The end result will look like this:

Create a new `xcode` project with `single view app` template.

Single View App

If you are using `xcode 11` then make sure to select `storyboard` instead of `SwiftUI` and name the project whatever you want.

Next you need to prepare your splash images that you want to animate. For this article I will be using the following images.

Images for splash animation

Next open your Main.storyboad file and follow the following steps:

• Drag and drop UIView on the viewcontroller.
• Make sure that the view’s top, leading and trailing should be aligned with the superview by having fixed height of 150 points.
• Set the view’s background color to system pink color.
• Drag and drop a UILabel in the pink view and set the title whatever you want.
• Drag and drop a UIImageView and make sure to align it with the top pink view and leading, trailing with the superview.
• By default preset the first image from the available images.
• Make sure that the UIImageView's frame should be according to the aspect ratio of the images. As for this article the images are in square shape so the aspect ratio is 1:1.
• Next add one more UILabel for a tag line at the bottom. Make sure to align its horizontal center with the superview and pin the bottom with the constant value of 65 points.

The end result should look something like this:

Next copy the newly designed view controller from the Main.storyboard and paste it in the the LaunchScreen.storybord Make sure to delete the previous view controller and make the copied view controller as initial view controller. Moreover, remove the custom class for the copied controller.

Next open the Main.storyboard file again and add UIActivityIndicatorView just below the tag line label and make its IBOutlet. Mean while make the IBOutlet for UIImageView as well.

Now we need to write a code for animating image change. Moreover, we need to write some logic that keeps repeating the animation and stop when view controller goes away from the screen.

Open the ViewController.swift file and create three properties as:

images array will hold all the images that are involved in the animation. currentIndex property will be used to get the current and next image for animation. isScreenVisible property will be used to stop the next iteration for animation.

In the viewDidLoad function of the view controller prepare the array of images by initialising and appending instances of UIImage in the array. Moreover, set isScreenVisible to false in viewWillDisappear and true in viewWillAppear.

Next we will write a recursive function responsible for animation. Overall the view controller will look something like this:

Build and run! Voila :)

Photo by bruce mars on Unsplash