Question

i have iPad application with splitViewController and tableViewController in splitViewDetailController.
i would like to show detailViewController (with UIModalPresentationFormSheet), after click on tableCell, with custom animation. The animation shoud be vertical rotation of tableViewCell and rotating cell should transform into detailViewController view. The whole animation should look like animation in iTunes podcast.

Here’s the code of my animation:

CGRect rectInCell = [[self.cellView superview] convertRect:self.cellView.frame toView:cell];
CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:[self.tableView indexPathForCell:cell]];
CGRect rectInSuperview = [self.tableView convertRect:rectInTableView toView:[[[APP_DELEGATE window] subviews] lastObject]];

CGRect imgRect = CGRectMake(rectInSuperview.origin.x+rectInCell.origin.x, rectInSuperview.origin.y+rectInCell.origin.y, rectInCell.size.width, rectInCell.size.height);

self.originalRelativeFrame = imgRect;
self.originalFrame      = self.cellView.frame;
self.originalSuperview  = self.cellView.superview;
self.originalTransform  = self.cellView.transform;

[self.cellView setFrame:imgRect];
if (self.whiteView == nil) {
    self.whiteView = [[UIView alloc] init];
    [self.whiteView setBackgroundColor:[UIColor whiteColor]];
}
[self.whiteView setFrame:imgRect];
[self.whiteView setAlpha:0];

self.cellView.layer.zPosition = self.cellView.frame.size.width;
self.whiteView.layer.zPosition = self.cellView.frame.size.width;

[[[[APP_DELEGATE window] subviews] lastObject] addSubview:self.whiteView];
[[[[APP_DELEGATE window] subviews] lastObject] addSubview:self.cellView];


CATransform3D rotation = CATransform3DMakeRotation(M_PI/2, 0, 1, 0);
CATransform3D scale = CATransform3DMakeScale(1.5,1.5,1);//(540.0/self.cellView.bounds.size.width, 620.0/self.cellView.bounds.size.height, 1);
CGPoint finCent = CGPointMake([[[[APP_DELEGATE window] subviews] lastObject] bounds].size.width/2.0, [[[[APP_DELEGATE window] subviews] lastObject] bounds].size.height/2.0);
//(finCent.x > self.cellView.center.x) ? (finCent.x - self.cellView.center.x) : (self.cellView.center.x - finCent.x);
CGPoint center = CGPointMake((self.cellView.center.x - finCent.x) / 2.0 ,(self.cellView.center.y - finCent.y )/2.0);

[UIView animateWithDuration:ANIMATION_DURATION_HALF delay:0 options:UIViewAnimationOptionCurveEaseOut
                 animations:^{

                     [self.cellView.layer setTransform:CATransform3DConcat(scale, rotation)];
                     [self.cellView setCenter:CGPointMake(self.cellView.center.x - center.x, self.cellView.center.y - center.y)];
                     //[self.cellView setAlpha:0];

                     [self.whiteView.layer setTransform:CATransform3DConcat(scale, rotation)];
                     [self.whiteView setCenter:CGPointMake(self.whiteView.center.x - center.x, self.whiteView.center.y - center.y)];
                     //[self.whiteView setAlpha:1];

                     [self.blackView setAlpha:0.3];

                 }
                 completion:^(BOOL finished) {

                     [self.whiteView setAlpha:1];
                     [self.cellView setAlpha:0];

                     [UIView animateWithDuration:ANIMATION_DURATION_HALF delay:0 options:UIViewAnimationOptionCurveLinear
                                      animations:^{

                                          CATransform3D rotation = CATransform3DMakeRotation(M_PI, 0, 1, 0);
                                          CATransform3D scale = CATransform3DMakeScale(540.0/self.cellView.bounds.size.width, 620.0/self.cellView.bounds.size.height, 1);
                                          CGPoint finCent = CGPointMake([[[[APP_DELEGATE window] subviews] lastObject] bounds].size.width/2.0, [[[[APP_DELEGATE window] subviews] lastObject] bounds].size.height/2.0);

                                          [self.cellView.layer setTransform:CATransform3DConcat(scale, rotation)];
                                          [self.cellView setCenter:finCent];

                                          [self.whiteView.layer setTransform:CATransform3DConcat(scale, rotation)];
                                          [self.whiteView setCenter:finCent];

                                      }
                                      completion:^(BOOL finished) {

                                          [self presentModalViewController:self.modalCtrl animated:YES];


                                      }];

                 }];

But the problem is rotation of application. After rotating application whiteView behind my detailViewController dosn’t stay centered in the middle of window.

Any idea how can i fix this issue?

Answer 1

You should rearrange the layout of your views when the user rotates the device.

The UIViewController class offers a couple of methods to deal with this:

– willRotateToInterfaceOrientation:duration:
– willAnimateRotationToInterfaceOrientation:duration:
– didRotateFromInterfaceOrientation:

Have a look at UIViewController reference.

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
                            duration:(NSTimeInterval)duration {

       CGRect imgRect = <CALC YOUR NEW FRAME HERE TO ACCOUNT FOR THE DEVICE ORIENTATION>;
       [self.whiteView setFrame:imgRect];
}

When calculating the new frame, you can use the toInterfaceOrientation argument to know for which orientation. Another option you have that might make things simpler is defining the view center.