1

I want to create an 'unfold' animation to a UIView that appears on the screen. An example of the animation can be viewed in this YouTube video that reviews the SuperList app (Another example of the animation can be viewed in the app's App Store page in the screenshots section).

Paper 'Unfold' Animation

I have quite good understanding of Core Animation and Objective C, so as with Cocoa and Cocoa Touch. The app will support versions 5.x and 4.x of iOS so, if it is possible, I would prefer a solution that suits both cases.

Moreover, I have googled this question about a thousand times and failed to get any answers, so help will be much appreciated. Thanks ahead, iLyrical.

Itamar
  • 1,290
  • 1
  • 18
  • 29
  • You're looking for a page curl animation. Strategies for doing this can be found in the question [Partial page curl animation](http://stackoverflow.com/questions/1681315/partial-page-curl-animation). – Brad Larson Jun 05 '12 at 16:46
  • I am familiar with this kind of animation, but as the video demonstrates I want to 'reverse' this animation, and create an 'unfolding' effect. Kinda like the page is falling on a table. – Itamar Jun 05 '12 at 16:48
  • Can't you just use the `pageUnCurl` half of the transition animation in that case, as described by TheRonin in his answer? – Brad Larson Jun 05 '12 at 16:52
  • The effect seen in the video is pretty sure not rendered dynamically. It is a basic image sequence prerendered / created with graphic tools I would guess. – calimarkus Jun 05 '12 at 16:52
  • What TheRonin said in the question @BradLarson linked to is working, but in the opposite direction, I need the page to fall, not curl. Any suggestions? – Itamar Jun 05 '12 at 17:03
  • Curl and UnCurl are the two paper-like effects available on the frameworks. – EmilioPelaez Jun 05 '12 at 17:04
  • It looks like if you swap the `pageCurl` and `pageUnCurl` animation types in TheRonin's implementation that you'd reverse the direction of this animation. Is that not what happens? – Brad Larson Jun 05 '12 at 17:06
  • Oh my god, so dumb of me, I have not noticed the little 'Un' addition in the second code segment. Thank you very much, it works perfectly, I will answer my question right away! – Itamar Jun 05 '12 at 17:08

1 Answers1

2

Apparently, the 'UnCurl' effect is built-in with the framework and is your to use! All you have to do, is use the animateWithDuration: animation: method of the UIView class and include the animation as follows:

[UIView animateWithDuration:1.0
                     animations:^{
                         CATransition *transition = [CATransition animation];
                         [transition setDelegate:self];
                         [transition setDuration:0.7];
                         [transition setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
                         [transition setType:@"pageUnCurl"];
                         [self.view.layer addAnimation:transition forKey:@"pageUnCurl"];
                         [self.view addSubview:someView.view];
                     }];

The note image (white page) in this case has transparent section (all side) and thus when uncurl happens it looks like only the white part is uncurling.

Community
  • 1
  • 1
Itamar
  • 1,290
  • 1
  • 18
  • 29
  • also known as "use of private API" – Matthias Bauch Jun 05 '12 at 18:02
  • @MatthiasBauch Are you 100% sure? Then how come the app I listed above is using it? – Itamar Jun 05 '12 at 18:22
  • normally you would use a constant like `kCATransitionFade` for `setType:`. If you have to use a NSString you are using private API. Doesn't matter that other apps use private API too. Try it and see if you can get your app through the review. – Matthias Bauch Jun 05 '12 at 18:59
  • @iLyrical : As per my experience, you can use private API. **Don't worry, go ahead.** What you need to do is honestly tell Apple that I am using private API and show them the code. I have many private API which I used and they approved. ***Honesty is simplicity.*** – Fahim Parkar Jan 18 '15 at 13:28