How to Rotate Objects in Your iOS App - dummies

How to Rotate Objects in Your iOS App

By Jesse Feiler

Here, you find out how to rotate a view (in this case, turn the car around) in your iOS app. To do so, you update the rotate code stub you started out with and replace it with the bolded code.

- (void)rotate {
 CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI);
 void (^animation)() = ^() {
 self.car.transform = transform;
 };
 void (^completion)(BOOL) = ^(BOOL finished){
 [self returnCar];
 };
 [UIView animateWithDuration:3 animations:animation completion:completion];
}

This method uses the block declarations.

The CGAffineTransform data structure represents a matrix used for affine transformations — a blueprint for how points in one coordinate system map to points in another coordinate system. Although CGAffineTransform has a number of uses (such as scaling and translating a coordinate system), the only one covered here is the rotation method you use in Listing 10-3:

CGAffineTransformMakeRotation(M_PI)

To rotate a view, you specify the angle (in radians) to rotate the coordinate system axes. Whereas degrees are numbers between 0 and 360, radians, though similar, range from 0 to 2π. So when you create a rotation that turns an object around one half-circle, that rotation in radians is pi. (M_PI is a system constant that represents pi.)

Just to make your life interesting, you should note that in iOS, positive is counterclockwise, but on Mac OS X, positive is clockwise.

The end result of Listing 10-3 is that the car will rotate 180 degrees in three seconds, and when it’s done, you send the returnCar message in the completion handler.

To return the car to its original position, add the bolded code to the returnCar method stub in TestDriveController.m.

- (void)returnCar {
 CGPoint center = CGPointMake(self.view.center.x, self.view.frame.size.height -
   self.car.frame.size height);
 void (^animation)() = ^() {
 self.car.center = center;
 };
 void (^completion)(BOOL) = ^(BOOL finished){
 [self continueRotation];
 };
 [UIView animateWithDuration:3 animations:animation
         completion:completion];
}

This approach is pretty much the same as that of the testDrive method except that the new center is arbitrarily placed 600 points below where the car turns around. You put the center back by computing the bottom of the view

   self.view.frame.size.height
   - self.car.frame.size.height);

You can experiment with these formulas to see how to move the car around the view.

But you’re not done yet. You need to rotate the car back to its original position (unless you want to drive in reverse from California to New York). Add the bolded code to the continueRotation method stub in TestDriveController.m.

- (void)continueRotation {
 CGAffineTransform transform =
      CGAffineTransformMakeRotation(0);
 void (^animation)() = ^() {
 self.car.transform = transform;
 };
[UIView animateWithDuration:3 animations:animation
          completion:NULL];
}

You need to understand that the transform (in this case, a view rotation) is still there; that is, you created a transform to rotate the car 180 degrees. If you want to get the car back to the original position, you need to return the transform to 0.