In Part 1 of this tutorial, we learned how to use animation to fade elements of our user interface in and out of view. By gradually altering the value of a view’s alpha property, we improved UIKit’s default behavior with an effect that makes an app appear more polished and professional. Here in Part 2 we’ll see how to use animation to create simple motion and recreate a very common iPhone visual effect.

The techniques we’ll use today require slightly more explanation, so rather than build a project from scratch, we’ll start with this sample project, which you can download to save time.

Simple animation

After you’ve downloaded the Animations project, open it in Xcode and click on ViewController.xib. As shown in Figure A, you’ll find that the main view contains a subview connected to the myView outlet, which in turn contains a UILabel connected to the myLabel outlet. We also have a button that will fire the move: method in our ViewController class.

Figure A

Click on ViewController.m in the Files and Groups pane and add the following line to viewDidLoad:

- (void)viewDidLoad
[super viewDidLoad];
self.nextMove = 0;

Then add the following method directly underneath viewDidLoad: (You might have noticed Xcode’s warning about an “incomplete implementation”. This will disappear as soon as you’ve got this method in place.)

- (IBAction)move:(id)sender
CGPoint newPoint;
switch (self.nextMove) {
case 0: {
// 1
newPoint = CGPointMake(0, 0);
// 2
[UIView animateWithDuration:1.5
// 3
// 4
CGRect frame = self.myView.frame;
frame.origin = newPoint;
self.myView.frame = frame;
completion: nil];}
case 1: {
// 5
newPoint = CGPointMake(300,600);
// 6
[UIView animateWithDuration:.5
CGRect frame = self.myView.frame;
frame.origin = newPoint;
self.myView.frame = frame;
// 7
self.myView.transform = CGAffineTransformMakeScale(0.0, 0.0);
self.nextMove ++;

Build and run the application. The first time Go is pressed, the label and it’s containing view move to the top left corner of the screen in a smooth easy motion. Press Go again, and they shrink and disappear off into the bottom right corner of the screen. You’ve seen this effect in many of Apple’s app, and though Apple typically adds a lot more flourish, the technique is fundamentally the same. Let’s understand how it’s done.

How it’s done

We need a way to control the action, and do in such a manner so that the move: method contains a switch statement that determines which animation will be run each time the button is pressed. The current value of the self.nextMove instance variable determines which code block to execute. The first time Go is pressed, self.nextMove = 0 and the block of code at case 0: will be executed. self.nextMove is then incremented so that the next time Go is pressed, the code block at case 1: will run.

The code of more interest to us is inside the two code blocks themselves. At Comment 1, we create a new CGPoint variable named newPoint that represents the upper left corner of the screen, which is position x = 0, y = 0 in UIKit’s coordinate system. Shown in Figure B, the coordinate system originates in the upper left corner, and the values of both the x and y axis increase as we move to the right and down. For example, the lower right corner on iPhone 5 would be the point x = 639, y = 1135. CGPoint variables allow us to represent the x and y value of given location in a single structure.

Figure B

At Comment 2 we set up an animation block similar to what we did in Part 1, but with a slight twist. This time we specify an animation option called UIViewAnimationOptionCurveEaseInOut. This option tells Core Animation we want the animation to start slowly at first, and then increase to top speed, and finally slow down just before ending. This effect gives the animation a more pleasing and natural look. You might want to experiment with other options such as UIViewAnimationOptionCurveEaseIn, UIViewAnimationOptionCurveEaseOut, and UIViewAnimationOptionCurveLinear to see the other effects available.

In the three lines at Comment 4, we alter the value of myView’s origin, which is the location of its upper left corner within the main view. We are going to animate the value of origin from its current value of x=60, y=278 (as set in the .xib file) to the upper left corner of the screen by assigning it the value of newPoint, or x=0, y=0. We assign a duration of 1.5 seconds, so the value will change gradually enough that we can enjoy the animation. The visual effect created by UIViewAnimationOptionCurveEaseInOut will be based on this timing also.

At Comment 5, we set up newPoint to represent a location in the bottom right area of the screen so that myView’s origin moves down and to the right during the second animation. Then at Comment 6 we set up the animation of the origin as we did before, and we also apply a scale transform to myView’s coordinate system as shown at Comment 7. By applying a scale transform to myView, we essentially shrink its coordinate system to the point where it becomes invisible. Transforms are a deep subject for another day, but for now, just know that this a very simple way to make a view and everything it contains seem to shrink and disappear. It is actually still a live object within the main view, but invisible for all practical purposes.

As the animation runs, myView’s origin gradually moves right and down, and its coordinate system shrinks at the same time. By the time the animation completes, the view becomes effectively invisible. If you were writing a real app, you would probably want to make sure to dispose of the view after the animation completes unless you intended to reuse it in some way.

You now have a few basic techniques you can apply to add some “wow” to your applications. Be sure to experiment with these animations on real devices, as performance on real hardware is often surprisingly different than on the simulator.

Also read: