Animated launch screen using a GIF in iOS
There was a question on a Slack channel for iOS developers on how to implement an animated launch screen using a GIF image since Apple doesn’t allow GIF images in launch screens. I answered the question with a brief explanation on how it could be implemented and how the user could get the impression that the launch screen is animating. In this blog post, I will explain the implementation in more detail.
The source code for this project is available on GitHub. At the end we’ll get the following result:
In order to implement the logo animation we’ll need to do two things:
- Add the first frame of the GIF as a static image in the launch screen
- When the app launches add a view in the root view controller that loads the animated GIF at the same spot that we’ve put the static image in the launch screen
This way, when the app launches the user will get the impression that the launch screen is animating.
In this example we’ll use the following GIF:
Adding the logo in the launch screen
To extract the first frame we can open the GIF in the Preview app and export the first frame as a JPEG image or use tools like GIMP. The first frame in my example will look like this:
We’ll add a
UIImageView with the logo in my
LaunchScreen.storyboard file and add center, width and height constraints to it. We’ll also have to update the background color of the root view to match the background color of the image. After these changes the launch screen will look like this:
Loading the GIF after launch screen
We’ll use a custom
UIView subclass that will replicate the root view of the launch screen, but instead of loading a JPEG image we’ll load the logo GIF. To import the GIF we have to drag and drop the image in the project since importing in the
Assets folder is not supported. For loading the GIF in the app we’ll use a library called SwiftyGif. It is a high performance and easy to use GIF engine. It allows us to load GIFs using a
UIImageView and also to control when to start and end the GIF animation.
UIView will look like this:
We’ve set the
loopCount to be 1 since we only need the GIF to animate once. Also, the constraints that we’ve set have to match the constraints set on the
UIImageView in the
Setting up the initial view controller
After implementing the
LogoAnimationView, we have to add it in the initial view controller. In
viewDidLoad method we only have to add the
LogoAnimationView and constrain it to the edges of the root view. As soon as the
viewDidAppear method gets called, we can start animating the GIF. Using the
SwiftyGifDelegate, we can observe when the GIF finishes animating and then hide the
The view controller implementation will look like this:
In this blog post, we’ve gone through the process of creating an animated launch screen using a GIF. One thing to note is that Apple recommends against using complex animations in launch screen. I highly recommend reading Apple Human Interface Guidelines before deciding to use this approach.