Simple UIView Animations – Part 2

WWDC 2012 registration has now opened! But I still have time for coffee at the Ferry Building and a quick second tutorial on UIView Animations.

In this tutorial we will build on top of our last sample. So far we have managed to fade in a picture on our App’s main UIView. Now we will go ahead and make things a little bit more interesting by mixing UIView animations and CoreGraphics transformations. This is a very simple yet very powerful technique. Let’s go ahead and rotate our image.

Our UI is now slightly changed. We have added a new “Rotate Photo” button, which when tapped it will make the photo of the Golden Gate Bridge rotate by 180 degrees (upside down). Of course the rotation will be animated and last one second.

wpid-image2-2012-06-10-09-03.png

Let’s take a look at the code.

– (IBAction)btnRotate:(id)sender

{

[UIView beginAnimations:@”imgPhoto Rotate” context:nil];

[UIView setAnimationDuration:1.0];

CGAffineTransform transform = CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(180));

self.imgPhoto.transform = transform;

[UIView commitAnimations];

}

As in the previous sample, we declare our UIView animations and the only difference here is that we define a CoreGraphics affine transformation matrix. By using the CGAffineTransformMakeRotation we are defining an affine transformation matrix constructed from the given rotation value. The value is in radians. To simplify this, you can define a DEGREES_TO_RADIANS macro that converts degrees to radians:

#define DEGREES_TO_RADIANS(angle) (angle / 180.0 * M_PI)

Again please remember that had you not included your transform in a UIView animation it would have simply rotated the image instantly without animating the effect. So go ahead and have fun with this.

In the next tutorial we will start combining multiple control animations!

Off to register at Moscone West!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s