You probably have seen some animations done on the Onboarding screen as you scroll through the screen. There are many different ways to create an animation screen, you could either use a third party library or write your own code. We’ll choose the latter approach and demonstrate how this can be done.
Before we begin, let me show you some of the animation that we will be doing here so you can have a glimpse of an idea. We will be using CollectionView as compared to the traditional PageViewController.
This is an animation Onboarding screen for Kaodim iOS app
Step 1: Create a VIEW CONTROLLER
The Collection View constraints is equal to the superview. The top right button is the skip button which will be visible in all three screens. The middle label is the description of each screen and the middle button is the get started button which will only appear on the third screen. All this can be configured in the class once we have created them later.
Step 2: Create a XIB FOR EACH COLLECTION VIEW CELL
You can do that by navigating to File > New > File > View (Found under User Interface)
Once you have your own XIB, you could create a View and store all the UIImages and create a constraint. If you are curious why are we setting the constraint, you could look at the GIF again and you’ll notice that we are making room for Label, Button and PageControl.
Our designer did a really good job in creating many different layer of images which makes our job a lot easier. In our case, we have many different layer of images. By doing this, we could basically animate all the images.