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.

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!