iPhone Curl Left and Curl Right transitions

Question

I am looking for a way to do a UIViewAnimationTransitionCurlUp or UIViewAnimationTransitionCurlDown transition on the iPhone but instead of top to bottom, do it from the left to right (or top/bottom in landscape mode). I've seen this asked aroud the internet a few times but none sems to get an answer. However I feel this is doable.

I have tried changing the View's transform and the view.layer's transform but that didn't affect the transition. Since the transition changes when the device changes orientation I presume there is a way to fool the device to use the landscape transition in portrait mode and vice versa?

Answer 1

I actually managed to achieve this effect by changing the orientation of my UIViewController. The strange thing is, I had my controller nesten in another one when it wasn't working, but when I set him as the immediate view controller, it worked.

Code that does it:

In a UIViewController that is the main view controller in my app delegate and only allows landscape orientation (as you see in the 2nd method below) I have the following:

-(void)goToPage:(int)page flipUp:(BOOL)flipUp {

     //do stuff...

     // start the animated transition
     [UIView beginAnimations:@"page transition" context:nil];
     [UIView setAnimationDuration:1.0];
     [UIView setAnimationTransition:flipUp ? UIViewAnimationTransitionCurlUp : UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

     //insert your new subview
     //[self.view insertSubview:currentPage.view atIndex:self.view.subviews.count];

      // commit the transition animation
      [UIView commitAnimations];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
     return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

Answer 2

It's possible to do curls in any of the four directions by using a container view. Set the container view's transformation to the angle you want and then do the curl by adding your view to the container view, not your app's main view which does not have a transformed frame:

NSView* parent = viewController.view; // the main view
NSView* containerView = [[[UIView alloc] initWithFrame:parent.bounds] autorelease];
containerView.transform = CGAffineTransformMakeRotation(<your angle here, should probably be M_PI_2 * some integer>);
[parent addSubview:containerView]; 

[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:containerView cache:YES];
[containerView addSubview:view];
[UIView commitAnimations];

Answer 3

I also struggled with this. To get the curl to come from the right or left you can create an intermediate view and transform it. So, let's say the view you're transitioning (myView) is a child of the main window (parentView):

-parentView
-->myView

You will insert an intermediate view in between (easily done in Interface Builder):

-parentView
-->containerView
--->myView

Then, use the following code to flip the container 90 deg left and the transitioned view 90 deg right:

containerView.transform = CGAffineTransformMakeRotation(-M_PI_2);
myView.transform = CGAffineTransformMakeRotation(M_PI_2);

myView will still appear upright to the user but the transition will think it's applied at 90 degrees from the left.

Note that depending on how auto-scaling your views are, you might have to fix the frame sizes after applying the transform, eg

  containerView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);
  myWebView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);

Hope this helps. The is the closest you can get to UIViewAnimationTransitionCurlLeft and UIViewAnimationTransitionCurlRight.

Answer 4

I tried the solution of fluXa on iOS5 (So I had to use [UIView trans......]) but it didn't work: the curl still went up or downwards. Apparently the transition now don't take the transform of the view into account. So in case someone else wants to do the same trick on iOS5, the solution is to add another container in between and animate the transition from there.

Here is my code, which is a bit specific since I want to curl 'up' to the left, but with the lower corner curling. As if I am tearing a page out of a note book.

UIView* parent = self.view; // the main view
CGRect r = flipRectSize(parent.bounds);
UIView* containerView = [[UIView alloc] initWithFrame:r];
CGAffineTransform t = CGAffineTransformMakeRotation(-M_PI_2);
t = CGAffineTransformTranslate(t, -80, -80);
containerView.transform = CGAffineTransformScale(t, -1, 1);
[parent addSubview:containerView]; 

UIView* container2 = [[UIView alloc] initWithFrame:r];
[containerView addSubview:container2]; 

UIImageView* v = [[UIImageView alloc] initWithFrame:r];
v.image = [UIImage imageWithCGImage:contents.CGImage scale:contents.scale orientation:UIImageOrientationLeftMirrored];
[container2 addSubview:v];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    [UIView transitionWithView:container2
                      duration:DURATION_CURL_ANIMATION
                       options:UIViewAnimationOptionTransitionCurlUp
                    animations:^{
                        [v removeFromSuperview];
                    } completion:^(BOOL finished) {
                        if (completion) {
                            completion(finished);
                        }
                        [containerView removeFromSuperview];}];});

Notes:

1. I must admit that the affine transform translate (80,80) doesn't make sense in my mind, but it is necessary for iphone, probably won't work on iPad.
2. flipSizeRect flips the width and height of a rectangle (you already got that, right?)
3. the dispatch_after is necessary because I added the container and then want to remove a view from the hierarchy. If I leave out the dispatch nothing animates. My best guess is that we first need to let the system do a layout pass before we can animate a removal.

Answer 5

I don't think there is a way beyond writing a custom animation.

More importantly you probably shouldn't try to it. The curl up and curl down are part of the user interface grammar that tells the user that a view is being lifted up or put down over the existing view. It's supposed to be like a sticky note being put down and then removed. A left<->right curl will most likely be interpreted as the something like ripping a page out of a book. It will confuse users.

Whenever you find yourself trying to do something in the interface that the standard API doesn't do easily, you should ask yourself whether such a novel method will communicate something important to user and whether it is similar to the existing interface grammar. If not, then you shouldn't bother.

Unusual interfaces have an initial wow factor but they lead to frustration and errors in day-to-day use. They can also cause Apple to refuse your app.