Animations: Bringing your Code to Life
Animations play a crucial role in bringing your code to life. They have the power to transform (lol) a static or dull application, into a fun, interactive, and aesthetically pleasing one. Suddenly, lines of code have the power to give emotions to a text box or life to a view.
However, there are many different ways animations can be used and implemented, with swift offering many different options. This post aims to demonstrate some of those options, and begin to introduce you to the different things you can do with animations.
So, what can actually be animated in swift?
The following can be animated on any UIView Object:
- frame: change the view’s size or position relative to it’s superview
- bounds: change the view’s size
- center: change the view’s position
- transform: modify the view’s scale, rotate the view, or translate the view relative to it’s center point
- alpha: change the view’s opacity
- backgroundColor: change the view’s background color
- contentStretch : change the way the view’s content is stretched to fill available space
Apple gives 4 different methods to use to implement an animation. As we move through the different methods available, each one increasing the number of arguments it takes in, greater customization of the animation is available to the coder. In this post, I am going to explain the individual parts of the most complex animation method.
withDuration: total number of seconds of the animation
delay: how long to delay the start of the animation
usingSpringWithDamping: how much the view oscillates (0–1)
initialSpringVelocity: how fast the animation starts
options: options we can use to change how our animation behaves
animations: a block of code where we define our animation
completion: a block of code where we define what to do after animation completion
Now, for the fun part — let’s look at some of the things you can do with this animation method!
First, I created a View Controller, with a single UIView, a purple box, added to the View. I then created a button called “animate” and hooked it up so that when it is pressed by the user, my animation will be called.
The first thing we’re going to do is have the box simply move across the screen. Here is the code used to implement this animation. A simpler version of the animation function is used here.
In this function we create an animation that lasts 1.0 seconds and in it, we tell the purple square to change it’s x position to equal the width of the screen, minus 100. We minus 100, since we the width of the object is 100, and we want it to remain on screen, not go beyond it. Remember that the x coordinate refers to the upper left corner coordinate.
What if we wanted to have the color change from purple to orange as the square moves across the screen? By adding one line of code we can make this happen.
Notice that all we did was set the background color to orange and voila.
To remove the view after animation completion, all we have to do is add a line of code to the completion argument.
Now look at our animation!
Now we’re gonna make a generative animation! These are animations that generate over and over again.
We need to make some changes to our code to make this happen!
First, I added some constants that I can use throughout my code.
Then, I hooked up the button so that every time I push it, a new instance of a purple view is created and added to the view.
I can add .autoreverse to the options to automatically reverse the animation upon completion.
I can also add .repeat, to repeat the animation indefinitely. Combined with autoreverse, this will have the box going back and forth — wall to wall.
Finally, for the funnest part! If I just change the constants to constantly generate a random number every time the button is pressed. (see below)
This is the result you will get:
In conclusion, animations can be super useful and fun! The biggest challenge comes from understanding how to properly manipulate them to create the animations we want! This is only an introduction to the many cool things you can do!