Don’t you wonder how cool would it be if your app could do that too?
Luckily, working with animations in iOS is a piece of cake! And this tutorial will help you to get started with some basic animation techniques!
Continue reading below to get the ball rolling!
iOS Basic Animation 101
As I said, when it comes to iOS, creating beautiful and fluid animations is easy. You don’t need to write any drawing code, or know how to handle openGL scissors and rendering loops (huh?!). So don’t get afraid of making your App more polished because it seems too hard to be done.
Apple provided us built-in animation support in the UIKit framework, (which is great BTW) and it does all the hard work for you. All you need to do is to write a few lines of code, setting things like: your animation duration, what you want to be animated, and even what you want to be done after the animation is complete.
If this tutorial isn’t enough to cover what you need or you are willing to do some more advanced animation, like sophisticated stuff, you better go with animating layers using Core Animation. Apple Documentation is very well written on this topic, you can check it out here and here.
All the techniques described in this tutorial are based on the built-in animation mechanism included in the UIKit framework.
Enough blah blah blah, let’s get started!
What can I animate?
Every UIView is animatable. Period. And this sentence includes all the UIView subclasses, like UIButton, UITextField, UILabel, and all those visual elements you already know. Even your custom UIView subclass can be animated using the built-int animation mechanism.
There are a set of animatable properties on the UIView class, if you change these properties inside an animation block (we will explore that on the next topic), the element magically gets animated. Believe me, It just works! 
Let’s get into details about the animatable properties:
- frame/bounds/center
These properties allow you to move your element around the x/y axis, as well as resize it.
Jedi hint: If you don’t fully understand the difference between frame, center and bounds, I highly recommend you to refer to this awesome tutorial on Ash Furrow. - transform
I would say this is the most powerful UIView animatable property. It enables you to scale, rotate, or translate your element relative to its center point. Remember that your element will be transformed in 2D space, if you want 3D stuff, you need to animate the layer, which bring us to those Core Animation links (1, 2) mentioned on the previous topic. - alpha
This one is very handy, it is simple to use and you can get gorgeous visual effects from it. As its name suggests, it changes the element transparency. You can animate this property to achieve the famous fade in/fade out effects. - backgroundColor
Modify this property to change your element’s background color. When you animate this property, the transition between the original color to the target color is calculated for you with no pain. Isn’t that freaking awesome? - contentStretch
This one is deprecated in iOS 6, and you shouldn’t be developing for old stuff, the effort is not worth it. Really. So forget about it.
How to do animations?
You may be asking: “Alright, I’ve got it all, but how can I actually do these animations anyway?”
I am glad you asked.
UIView provide us some class methods to do block based animations. There are three of them:
animateWithDuration:animations: animateWithDuration:animations:completion: animateWithDuration:delay:options:animations:completion:
There is no better way to understand how to use them than writing some examples. Let’s code! \o
A simple animation would look like this:
myButton.alpha = 1.5;
[UIView animateWithDuration:1.0f animations:^{
myButton.alpha = 0.0;
}];
NSLog(@"The animation has started!");
This code would fade out your button in one and a half second. See how it is easy? I guess you’ve already got how block based animation works. The line inside the animations block is the target value for the animatable property. In other words, is the final state of your element, or elements. Yes, you can do more than one animation with only one block. They will be performed at once.
Note that the animation method is an asynchronous method, and it is performed in a another queue, then you don’t need to worry about blocking the main queue. On the example above, the NSLog function would be called right after the animation had started.
Let’s take a look on multiple animations at once with the same duration:
[UIView animateWithDuration:1.0 animations:^{
myButton.alpha = 0.0;
myView.backgroundColor = [UIColor redColor];
}];
And multiple animations at once with different durations:
[UIView animateWithDuration:1.0 animations:^{
myButton.alpha = 0.0;
myView.backgroundColor = [UIColor redColor];
}];
[UIView animateWithDuration:1.2 animations:^{
anotherView.frame = finalFrame;
}];
You can even define a code block to be executed after one animation is complete:
[UIView animateWithDuration:1.0 animations:^{
myButton.alpha = 0.0;
myView.backgroundColor = [UIColor redColor];
} completion:^(BOOL finished){
[myButton removeFromSuperview];
[self foo];
}];
The completion block is always executed, even if your animation is cancelled for some reason. It also tells you whether the animation had been finished or not, using the finished flag.
Your completion block can also be another animation. This way you can trigger one animation after another has just finished. Just like that:
[UIView animateWithDuration:1.0 animations:^{
myButton.alpha = 0.0;
myView.backgroundColor = [UIColor redColor];
} completion:^(BOOL finished){
[UIView animateWithDuration:0.5 animations:^{
myButton.alpha = 1.0;
} completion:^(BOOL finished){
NSLog(@"The end!");
}];
}];
Nesting animations is a good way to achieve animation sequences.
The last method is very similar to the others. In a nutshell, it has more options to manipulate your animations. See for yourself:
[UIView animateWithDuration:1.0
delay:1.5
options:(UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction)
animations:^{
aView.transform = CGAffineTransformMakeRotation(M_PI);
} completion:^(BOOL finished){
NSLog(@"I am finally done");
}];
Alright, there are two new guys here:
- delay:
It is where you set how much time your animation needs to wait before it starts (in seconds). - options:
It is where you set your animation options, things like: Which curve(s) will your animation(s) follows? should your animation(s) be repeated? Etc..One important thing to notice on this one, is the fact that this parameter accepts enumerator bitwise masking. Cool name, huh? In other words, you can choose multiple options and pack all of them by using the single pipe symbol, as shown on the example above. Here is a list of the available options:UIViewAnimationOptionLayoutSubviews UIViewAnimationOptionAllowUserInteraction UIViewAnimationOptionBeginFromCurrentState UIViewAnimationOptionRepeat UIViewAnimationOptionAutoreverse UIViewAnimationOptionOverrideInheritedDuration UIViewAnimationOptionOverrideInheritedCurve UIViewAnimationOptionAllowAnimatedContent UIViewAnimationOptionShowHideTransitionViews UIViewAnimationOptionCurveEaseInOut UIViewAnimationOptionCurveEaseIn UIViewAnimationOptionCurveEaseOut UIViewAnimationOptionCurveLinear UIViewAnimationOptionTransitionNone UIViewAnimationOptionTransitionFlipFromLeft UIViewAnimationOptionTransitionFlipFromRight UIViewAnimationOptionTransitionCurlUp, UIViewAnimationOptionTransitionCurlDown UIViewAnimationOptionTransitionCrossDissolve UIViewAnimationOptionTransitionFlipFromTop UIViewAnimationOptionTransitionFlipFromBottom
Ps.: If you got curious about the “bitwise” term, it is inherited from the good and old C Language, you can learn more here.
Where to go from here?
Congratulations! You have just learned the basics of iOS UIKit animations (I hope so).
With these concepts, you are able to make your projects more fluid and friendly to your final user. Believe me, basic animations brings another level of elegance to your app. (:
Please, do not stop here, when it comes to iOS Animations, there is vast number of things you can learn and discover by yourself. Go ahead and try it!
Here are a few links you can refer to:
- Core Animation Introduction
- Core Animation Basics
- Animating layers using Core Animation
- Advanced Animation Tricks
Thank you for your time, and don’t hesitate to leave a comment if you feel like it! (=