Sprucing up your iOS Apps with simple animations: Part 1

By Scott Kantner February 28, 2013, 1:20 PM PST

Takeaway: 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, its very easy to accomplish. In Part 1, well 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 well use motion to recreate a common iPhone visual effect.

Automatically sign up for TechRepublic's App Builder newsletter!

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 lefthand side, select Application from the iOS section. Select Single View Applicationand click the Next button. (Figure A)

Figure A

On the next pane, enter Animations for the Product Name and com.myappcompany as theCompany 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 anAnimations 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 views 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 its 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 animations:^{ self.view.alpha = 1.0; }]; }

Every UIView has a floating point property named alpha that controls the views 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 UIViews 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. Youve no doubt seen this effect dozens of times in other apps, and now you know how its done! Now add the following code to viewWillAppear directly after the code you entered above.
[UIView animateWithDuration:1.5 animations:^{ self.myLabel.alpha = 0.0; } completion:^(BOOL success){ [UIView animateWithDuration:3.0 animations:^{ self.myLabel.alpha = 1.0; }]; }];

Here were using another one of UIViews 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 users attention to something theyve overlooked or entered incorrectly. In Part 2 well 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:

Best practices: Develop heterogeneous iOS apps Drive more iOS App downloads with better icons Understand the states and transitions of an iOS App

Getting started with iOS Views and View Controllers: Part 1 Get IT Tips, news, and reviews delivered directly to your inbox by subscribing to TechRepublics
free newsletters.