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:


Animated launch screen

Implementation

In order to implement the logo animation we’ll need to do two things:

  1. Add the first frame of the GIF as a static image in the launch screen
  2. 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:


Animated logo

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:


Animated logo

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:


Animated logo

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.

The custom UIView will look like this: 

class LogoAnimationView: UIView {

    let logoGifImageView = UIImageView(gifImage: UIImage(gifName: "logo.gif"), loopCount: 1)

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        backgroundColor = UIColor(white: 246.0 / 255.0, alpha: 1)
        addSubview(logoGifImageView)
        logoGifImageView.translatesAutoresizingMaskIntoConstraints = false
        logoGifImageView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
        logoGifImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        logoGifImageView.widthAnchor.constraint(equalToConstant: 280).isActive = true
        logoGifImageView.heightAnchor.constraint(equalToConstant: 108).isActive = true
    }
}


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 LaunchScreen.storyboard.


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 LogoAnimationView. The view controller implementation will look like this:

class ViewController: UIViewController {

    let logoAnimationView = LogoAnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(logoAnimationView)
        logoAnimationView.pinEdgesToSuperView()
        logoAnimationView.logoGifImageView.delegate = self
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        logoAnimationView.logoGifImageView.startAnimatingGif()
    }

}

extension ViewController: SwiftyGifDelegate {
    func gifDidStop(sender: UIImageView) {
        logoAnimationView.isHidden = true
    }
}


Conclusion

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.

Recent posts: