Swift Animations in iOS
This tutorial is the second in the series...
Tojo Batsuuri - Lead Developer + Designer
Sep 16, 2019
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. https://gist.github.com/tbatsuur/a17ac544d291e4b1ad48802880ee370c#file-moveblue-swift
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
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
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. https://gist.github.com/tbatsuur/f9dbf48ddd733dd7988fc2efcb86c302#file-particleemitter-swift
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
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. 👌