Smooth transition from Launch Image to View Controller in iOS

The LaunchImage in iOS is a static image (or a screen) being shown at launch of the app and it dissappears in a couple of seconds, and then showing your default view.

For Høst I wanted to display a nice photo I took a couple of years ago of summer harvesting, and then smoothly transition into the login screen if you haven't signed in yet.

But it turns out you don't have much control of the transition. There's a few hacky solutions to the problem where you manually need to grab the correct image (you can't load up your LaunchImage from the asset catalog into a UIImage, like you normally do) and with all the different screen sizes now, it would be way too messy.

So what I did instead was copy the original image into the asset catalog - this is a 2208 x 2208 pixel image that I used to cut out LaunchImage files for all form factors and then I display this photo in the center of the login screen.

In the video below, on the right you see the default behavior if you just slap the image into view controller and placing it at the center - this is on an iPhone 6 (simulator).

Now, remember the image were 2208 x 2208 in size? That's because the largest required size on iOS is the height of the iPhone 6 Plus - so any other device will not show the image at the correct scale to match the way the LaunchImage files were cropped.

To get the desired outcome, you need to scale the image relatively to the size (in points) of the iPhone 6+ (shown on the left in the video).

This is done using this line of code: bgImage.transform = CGAffineTransformMakeScale(screenSize.width / 414, screenSize.height / 736)

Complete example to do what's in the video is embedded below:

Martin H. Normark

Product and UX Hacker. Web and iOS developer.

Subscribe to Martin Normark's Blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!