Create a Loading Animation in Swift

Walk on, with hope in your heart

Image for post
Image for post

Difficulty: Beginner | Easy | Normal | Challenging

This article has been developed using Xcode 11.4.1, and Swift 5.2.2

Want to display a loading screen that can appear when you’re doing some heavyweight operations? Perhaps you want this with when you are producing your App with a Storyboard, perhaps you want to do this programatically. Either way, this article has you covered.

Oh, and there are versions using CABasicAnimation and UIView.animate all nestled rather nicely in the attached Repo.

Prerequisites:

Terminology:

The goal

How is it possible to do this, when using the Storyboard?

The Storyboard version

Now for this to adequately work, the background images must be at least double the width of the devices screen you wish to cover.

The Storyboard is created as below with constraints to keep the images horizontally centered in the screen.

Image for post
Image for post

The man has a single static image (we will animate walking this in code), as does the tree and both are in static positions on the screen that can be moved later.

Animating the man

Within viewDidLoad() we can animate the man walking (albeit on the spot), appending images from the asset catalog.

Image for post
Image for post
Click for Gist

Fading in and out nicely

Within the Storyboard I set the man, the tree and the two backgrounds as invisible — the alpha as 0.0 for each of them.

Then before we animate we have the following code, using .curveEaseOut to weight the animation towards the beginning of the animation.

Image for post
Image for post
Click for Gist

with a similar animation to make them fade out just before the screen disappears. viewWillDisappear is called just before the view disappears from the screen, that is when we press one of the buttons to see the other implementation variants of this code!

Image for post
Image for post
Click for Gist

The animation

Here I am using CABasicAnimation — the tricky part here is to make sure that the first city city and the second city city2 move at the same pace across the screen, here working through the self.city.frame.size.width.

Image for post
Image for post
Click for Gist

This animate function is called from viewDidAppear, a good place to start the animation as the constraints are set (everything is in position) and this is called just before the view is visible to the user.

Image for post
Image for post
Click for Gist

The programmatic version

**Load the view**

Nothing much to see here, but this is much like my guide to programmatically create a view with loadview.

Image for post
Image for post
Click for Gist

Adding the objects

I’ve added the objects in viewWillAppear since the frame of the UIView is set at this point, but it is before the user will see the screen.

Here is the code:

Image for post
Image for post
Click for Gist

The animation

Called once again from viewWillAppear however I’ve put a little delay to make this seem like a nicer transition in my NavigationBar implementation here.

Here I’m using UIView.animate, and this means the animation is working in just a few lines!

Image for post
Image for post
Click for Gist

BUT by not using constraints…what happens when we rotate a device? Bad things happen! Of course I could do some various fixes for this, but why not just use constraints?

The programmatic version using constraints

In fact, all the animation is done in much the same way.

Load the view

Now this is where we are creating the subviews in code. The constraints here mirror those set up in the Storyboard version detailed above.

*Interesting* parts here might be considered to be `clipsToBounds` which keeps the UIImage within the bounds, and of course translatesAutoresizingMaskIntoConstraints to let the compiler know that we are taking care of the constraints here.

Image for post
Image for post
Click for Gist

Conclusion

My take on this is that the version using constraints programatically is not only easier to write, but easier to maintain and change in the future. If you’re not that familiar with walking away from the storyboard you might enjoy my storyboard technical article.

It is rather complex in the description, but rather easy in the implementation. Take a look at the attached Repo. It is a rather wonderful thing.

If you’ve any questions, comments or suggestions please hit me up on Twitter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store