iOS optimize

Sprucing up your iOS Apps with simple animations: Part 1

Adding even the simplest of animations can give your app that extra dose of wow.

Nothing says "class" like an app that has great visual appeal. Good artwork is of course very important, but adding even the simplest of animations can give your app that extra dose of "wow." Best of all, it's very easy to accomplish. In Part 1, we'll build a project to learn a simple technique that you can use to give your app a more polished look and feel by showing how to fade views in and out. Then in Part 2 we'll use motion to recreate a common iPhone visual effect.

New project

Open Xcode and from the File menu, select New, and then New Project. A new workspace window will appear, and you will be presented with several application templates to choose from. On the left-hand side, select Application from the iOS section. Select Single View Application and click the Next button. (Figure A)

Figure A

On the next pane, enter Animations for the Product Name and com.myappcompany as the Company Identifier. (Feel free to substitute your own product name and company identifier). Leave the Class Prefix as is. It should be blank - XYZ is just a placeholder hint. Make sure Use Automatic Reference Counting is checked and uncheck the others. Set Device Family to iPhone, and click Next. (Figure B)

Figure B

A new pane will appear asking you where you would like to save the project. XCode will create an Animations project folder inside the directory you select.

Once the project is created, Xcode will open a workspace window with your new project.

Setting up the user interface

In the Files and Groups pane, click on ViewController.xib. After it opens in Interface Builder, select the View object, click on the Attributes Inspector and then change the view's background color to a color of your choosing.

Next go to the Object Library located on the lower right-hand side of the workspace and drag a UILabel onto the view. Drag it's resize handles to make it approximately two-thirds the width of the view, and change both its background and text color. Figure C summaries the situation so far.

Figure C

Next, click on the Assistant Editor in the upper right corner of the Xcode Interface. (Figure D)

Figure D

The Assistant Editor will display ViewController.h in an adjacent pane as shown in Figure E. Click on the label to select it, then press the Control key and drag from the label to just under the word "@interface" in ViewController.h. When you release your finger from the mouse, the Connection dialog will appear. Type "myLabel" into the Name field and press Enter.

You have now created an outlet named myLabel and connected it to the UILabel in the xib file. For more information on outlets, see Getting started with iOS Views and View Controllers: Part 1. Click on the Standard Editor button to remove the Assistant Editor window from the screen.

Figure E

Build and run the app. Notice how abruptly the view snaps on to the screen. Our objective will be to improve this default visual behavior by replacing it with a nice gradual fade-in effect.

Click on ViewController.m in the Files and Groups pane and add the code below just under the viewDidLoad: method.

- (void)viewWillAppear:(BOOL)animated
[super viewWillAppear:animated];
self.view.alpha = 0.0;
[UIView animateWithDuration:0.5
self.view.alpha = 1.0;

Every UIView has a floating point property named alpha that controls the view's transparency. Its value ranges from 0.0 to 1.0, where 0.0 represents totally transparent and 1.0 represents totally opaque. Since viewWillAppear: is called before the view is drawn on the screen, setting its alpha value to 0.0 effectively causes it to become invisible before it is even displayed.

The call to UIView's built in animateWithDuration: method is where the magic happens. Changing the value of certain properties of views can be animated using this method, and by animating the change of alpha, we can gradually alter its value from 0.0 to 1.0 over a defined amount of time.

The first parameter to animateWithDuration: is the amount of time in seconds that the animation will last. By setting this to 0.5, the value of alpha will reach 1.0 in half a second. To speed up or slow down how quickly the view comes into view, we simply specify a smaller or larger duration.

The messy looking syntax being passed to the animations: parameter is called a block. It is simply a chunk of code that we want to have executed. In this, we just have one line of code that sets self.view.alpha to 1.0. Simply put, we are telling UIView to change the value to 1.0, but to do it gradually over 0.5 seconds.

Build and run the app again. Experiment with different values for the duration until you find something pleasing. You've no doubt seen this effect dozens of times in other apps, and now you know how it's done!

Now add the following code to viewWillAppear directly after the code you entered above.

[UIView animateWithDuration:1.5
self.myLabel.alpha = 0.0;
completion:^(BOOL success){
[UIView animateWithDuration:3.0 animations:^{
self.myLabel.alpha = 1.0;

Here we're using another one of UIView's animation methods that lets us to run one animation, wait for it to complete, and then run a second animation. Using the alpha property as we did with the main view, we cause the label to disappear over the course of 1.5 seconds, and then reappear over the next 3 seconds.

Build and run the app and experiment with different duration values as before. No doubt your mind is already full of new ideas for using this cool effect in your own apps! For example, by repeating this effect with short durations, you can create slowing blinking text to draw the user's attention to something they've overlooked or entered incorrectly.

In Part 2 we'll see how to achieve a very common effect Apple uses in its own apps by animating the label to different positions on the screen.

Also read:


Scott Kantner started his IT career on a Radio Shack TRS-80 model I back in 1978. He is CTO of a hosting/colocation firm, a tech writer, and an avid iOS app developer. He has several music-related apps in the App Store that you can learn about at OnS...