iOS 5 Programming Cookbook

15.15. Animating and Rotating Views

Problem

You want to animate the rotation of your views.

Solution

Create a rotation affine transform and use the animation methods of UIView to animate the rotation.

Discussion

Note

I highly recommend that you read Recipe 15.13 before proceeding with this section of the book.

In order to rotate a view while animating it, you must apply a rotation transformation to it while in an animation block (see Recipe 15.11). Let’s have a look at some sample code that will make this clearer. Let’s say we have an image named Xcode.png (see Figure 15-14), and we want to display it in the center of the screen. After the image is displayed, we want to rotate it 90 degrees over a five-second time period and then rotate it back to its original orientation. So when the view appears on the screen, let’s rotate the image view 90 degrees clockwise:

- (void) viewDidAppear:(BOOL)paramAnimated{
  [super viewDidAppear:paramAnimated];
  
  self.xcodeImageView.center = self.view.center;
  
  /* Begin the animation */
  [UIView beginAnimations:@"clockwiseAnimation"
                  context:NULL];
  
  /* Make the animation five seconds long */
  [UIView setAnimationDuration:5.0f];
  
  [UIView setAnimationDelegate:self];
  
  [UIView setAnimationDidStopSelector:
   @selector(clockwiseRotationStopped:finished:context:)];
  
  /* Rotate the image view 90 degrees */
  self.xcodeImageView.transform =
  CGAffineTransformMakeRotation((90.0f * M_PI) / 180.0f);
    /* Commit the animation */
  [UIView commitAnimations];
  
}

We’ve chosen the clockwiseRotationStopped:finished:context: ...