what are some ways you could use Core Animation to create a curl or peel animation?

Question

I'm trying to figure out how I could create a curl or peel effect on an image in my iPad app using Core Animation, but as I'm learning the API, I only understand different ways to move, scale, and rotate the 2D image (including the 3D transformations). I'd like to accomplish this effect on small, individual layers (i.e. sprites) that have images on both sides, so as you peel back the layer, you expose the image on the backside. I also need to have control over the position and angle at which the layer peels. I'm horrible at math and was hoping someone smarter than me could help me out so long as I at least understood those basic transformations that I mentioned.

Thanks so much in advance for wisdom!

Answer 1

You can skip the math in most situations and let the api handle everything. Try this code:

- (IBAction)showPeelBack:(id)sender{
    FooController *controller = [[CreditsController alloc] initWithNibName:@"Foo" bundle:nil];
    // setup the stuff you want to display
    [controller setViewController: self];

    controller.modalPresentationStyle = UIModalPresentationFullScreen;
    controller.modalTransitionStyle = UIModalTransitionStylePartialCurl;

    // note: I'm using a nav controller here
    [[self navigationController] presentModalViewController:controller animated:YES];
    [controller release];
}

Answer 2

The only way in which to easily create it is through the use of UIView's class methods as follows:

This code goes within the MyViewController.h file:

 @interface MyViewController : UIViewController
    {
       UIImageView* imageView1;
       UIImageView* imageView2;
    }
  @end

This code goes within the MyViewController.m file:

 @implementation MyViewController

    - (void) dealloc
    {
       [imageView2 release];
       [imageView1 release];

       [super dealloc];
    }

    - (void) loadView
    {
       self.view = [[UIView alloc] initWithFrame : CGRectMake (0, 0, 768, 1004)];

       UIImage* image1 = [[UIImage alloc] initWithContentsOfFile : @"image1.png"];
       UIImage* image2 = [[UIImage alloc] initWithContentsOfFile : @"image2.png"];

       imageView1 = [[UIImageView alloc] initWithImage : image1];
       imageView2 = [[UIImageView alloc] initWithImage : image2];

       [imageView1 setFrame : CGRectMake (0, 0, 768, 1004)];
       [imageView1 setFrame : CGRectMake (0, 0, 768, 1004)];

       [self.view addSubview : imageView1];

       [image2 release];
       [image1 release];
    }

    - (void) viewDidUnload
    {
       imageView2 = nil;
       imageView1 = nil;

       [super viewDidUnload];
    }

    - (void) touchesBegan : (NSSet*) touches withEvent : (UIEvent*) event
    {
       [UIView beginAnimations : nil context : nil];
       [UIView setAnimationCurve : UIViewAnimationCurveLinear];
       [UIView setAnimationDuration : 0.25];

       if (imageView1.superview != nil)
       {
          [UIView setAnimationTransition : UIViewAnimationTransitionCurlUp forView : self.view cache : YES];
          [imageView1 removeFromSuperview];
          [self.view addSubview : imageView2];
       }
       else
       {
          [UIView setAnimationTransition : UIViewAnimationTransitionCurlDown forView : self.view cache : YES];
          [imageView2 removeFromSuperview];
          [self.view addSubview : imageView1];
       }

       [UIView commitAnimations];
    }
 @end

Since, in this example, the UIViewController is being created programmatically, the method "loadView" was used in order to create the view managed by the view controller and the subviews which this view will manage. I hope this helps. Cheers.