Swift animations for iOS

This tutorial is the second in series to this article.

Swift and UIKit Basics for Animations in iOS

We will cover how to do basic animations in a really structured way. There are only a few main categories of animations.

• Moving — Moving from point A to point B or along a path
• Shape — A square becomes a bigger square or it becomes a circle
• Colour — Red becomes blue
• Particles — Particles of different sizes flying in many different directions
• Transitioning — From one view to another view
• Alpha — Which is really colour I guess, but transparency
• Blur — Blur animations can be nice

By the end of this short tutorial you will be able to do all of these and a couple more.

Once you get the hang of these basic animations. You can put in actual User Interfaces in them and mix and match the animations to get incredible results.

Red Rectangle (Moving sideways)

The red rectangle moving back and forth. This is the code for that one.

• The duration of the animation is 5.0 seconds
• The animation is on the horizontal axis only, and it moves it until the end of the rectangle is 16.0 points from the end of the screen
• It has options of AutoReverse & Repeat, which makes it go back to its original position, then repeat the whole cycle, this is a useful combination of options
• The delay function just delays the start of the animation for 5 seconds, look at next animation to learn how to delay

Blue Rectangle (Flip)

The blue rectangle flipping to reveal the purple rectangle. This is the code for that one.

• The duration is 2.0
• The logic here is you create a new purple view with the same frame(size) as the blue one.
• Then we delay it 1.0
• Then go from blue to purple, using the transition static function from UIView
• We use the options, [.transitionFlipFromLeft, .repeat, .autoreverse]

Green Rectangle (Colour)

The green rectangle becoming yellow.

• If sometimes you’re animation should work but it’s not, try using a different delay than the delay parameter given by the UIView function, worth a shot
• Really simple, inside the closure, you just change the background colour

Yellow Circle (Orbiting)

This one is just a view moving in a path (Circular path).

• First we basically clip the corners perfectly to make the square into a circle
• Then we make a circle path using system Bezier path initializer
• Then we use a keyframe animation to make this magic happen
• Duration is 5.0 seconds
• Repeat count is basically forever, biggest number there is in Swift. The maximum non-infinite value float.
• The animation is of type position and the path is the previous circle
• Then we just add the animation to the yellow view’s layer

The same gif so you don’t have to scroll up and I can include it in the cover picture :)

Small Red Circle (Custom bezier path)

Does this whole thing around half the screen, then curves in the middle.

• I assume you know how to make bezier paths. Basically you start at one point and you give the next point and the computer will draw a line to it
• So I started the path at the middle of the screen to the left. Then curve across the middle with the addCurve function
• The control points for the curve are 50 points above and below from the centre
• Then you loop over the top area of the phone and do the same thing as before with the CAKeyFrameAnimation
• This time to illustrate the path it’s taking I also just add a shape layer with stroke colour red

Particle Emitter

When overdone like in this example it doesn’t look that great. But subtle applications can be really nice and will spice up a page.

• From an origin of some shape, in this case a rectangle you can generate little particles and throw them in different directions using different properties
• Basically play around with every property to get the effect you want, but they’re pretty self explanatory

That’s it!

I hope you learned some really neat tricks, and how simple they can be to implement once you get the core animation mechanism down.

Stay tuned for some more animations in the next article with gifs and gists. 👌

Cute puggerino! You’re welcome

Lattice Studios is an app development & design studio based out of Calgary, Alberta. Check us out at latticestudios.com and on our social media @latticestudios.