Kodeco Forums

How To Create an Uber Splash Screen

Learn how to build an Uber Splash Screen that uses animations to go beyond the typical static launch screen and keeps users interested while the app loads.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/1031-how-to-create-an-uber-splash-screen
1 Like

Nice tutorial, thanks! At the end of the Splash Screen Views and Layers Composition section, you provided a GIF that shows the 3D view of the view hierarchy, with animations running. I wonder how did you achieve this, did you use any kind of tool?

Hey @axl411, that gif that you were talking about was actually quite involved. Compiled the app several times to show the different layers while taking a screen recording via QuickTime. That was handed off to a friend who knows After Effects well and could make a 3D video composition. After that was turning it into a gif w/ a program whose name I forget off the top of my head. But yeah, I wish a program would do that for me :]

I see. My first thought was like: a new version of Reveal supports this? Appreciate the effort :slight_smile:

This was a fun tutorial!!!

One issue I’m seeing when I add the last step for zooming in…

It’s got frame around the edge that doesn’t have the same fade as the stuff in the centre. Any idea where I would have goofed up? Everything up to this point looked exactly like the gifs.

Hey @jstheoriginal,

Tricky to diagnose w/o me seeing the animation or code. Potential culprits I can give you are to make sure the if shouldEnableRipple { conditional in the Animating the TileView section matches. Another area to look at is to make sure you are adding the animation to the correct area. i.e. not self.layer.addAnimation, but containerView.layer.addAnimation.

If you still are having trouble, I would do a diff of TileView.swift, & TileGridView.swift on your project and the final project found in the Where to Go From Here section. When you figure it out, I would be intrigued to hear the culprit. Good luck :wink:

I spent over half an hour trying to compare using diff tools and finally…i didn’t notice this curly brace. :stuck_out_tongue: i had everything in that shouldEnableRipple block instead of just transform.scale and position. :slight_smile:

Back to doing the iOS Animations by Tutorial book!

Thanks for the tutorial, and plan to go through it more closely soon, but I just have a quick question while Im here -
Is it possible to use an image as the background, than use tiled set of views?
Can the same ‘ripple’ effect be applied to one large imageView?

Thanks!

@simon_za, yes, something like that is possible, but changes would be needed in the codebase.

Great Tut! I am attempting to build your source in swift 3. I am getting the following errors after migrating your source zip.

Any Ideas?

It seems not to like the ‘/’ operator with NSNumber.

Here is the error:
~/Fuber final/SplashScreenUI/AnimatedULogoView.swift:220:83: No '/' candidates produce the expected contextual result type 'NSNumber'

Thanks!
–Alexander Murphy

Hey @thexande,

I still need to upgrade this tutorial to Swift 3.0 and will get to that this week. In the meantime, try something like this:

((kAnimationDuration - kAnimationDurationDelay) / kAnimationDuration) as NSNumber

Will do as soon as Im back at my computer. Are you thinking of moving the code to github?

Hi Derek,

It was kind of hard for me to follow your tutorial.

Do you have any advice regarding how to learn about layers from?

Hi @jmoukel
I would strongly recommend you check out Marin Todorov’s Intermediate iOS Animation video series or alternatively his book

1 Like

Hi Derek,

I am trying to convert this to swift 3 and bombing so hard. I am sure I’m not the only one. Could you throw us a bone and help convert the tut over to swift 3? I cant wait to contribute if you do decide to put this up on GitHub.

Thanks!!!

thexande

@thexande Updated. Ping if you come across any Swift issues that I might have missed.

@lolgrep is a hero to us all! Stay Frosty!

1 Like

Thanks for the great Tutorial. I’m trying to implement a similar Splashscreen for my App.
I copied the SplashscreenUI framework to my project and I can run it on the simulator. But when I want to archive my Project I get the following error:

ld: bitcode bundle could not be generated because ‘/Users/mikekoene/Documents/Work/Henrys app/HenrysApp/SplashScreenUI.framework/SplashScreenUI’ was built without full bitcode. All frameworks and dylibs for bitcode must be generated from Xcode Archive or Install build for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

This tutorial is more than six months old so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]

1 Like