How to do the page curl like in storybook app in iPad

Question

I am working on a storybook app, i want to do the page curl like in the following video.

Demo Video

Can anyone tell me how to do exactly like this.

Update:

I want this page curling to support iOS 4.3+. UIPageViewController will work only on iOS 6.

Junkman

Answer 1

You might want to consider UIPageViewController. It is quite useful in creating apps which use page curling animations. Here is the documentations link.

Neckband

Answer 2

You can make use of the UIView's animation effect for this. I guess this should help you

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:contentView cache:YES];
[UIView commitAnimations];

where the contentView is the view where you are applying the animation. By varying the duration and animation curve you can modify your animation effect.

Shurwood

@croyneaus4u Thanks for your sample project , the page curling you've shown in this project is not exactly like in the video.Can you do like that video – Junkman

Answer 3

There are two ways of doing it:

1. The hard way, implement everything yourself (from scratch, with layers and masks and transforms and gradients) and a lot of headache.

2. the Easy way, read the documentation for UIPageViewController as suggested by @Zen. Its very useful and gives you the exact animation that you want (as shown in video). Or, using some third party code.

If you dont't have time constraint, then I will say, go the first way. You will learn a lot.

Cheers, have fun :)

EDIT

Here is the link to a sample app:

https://www.dropbox.com/s/x4qo2igrzvnkj16/CurlAnimationProject.zip

check it and tell me what you think.

Behka

I want this page curling to support iOS 4.3+. UIPageViewController will work only on iOS 6. so i choose the first way but i don't know how to do it. do you have any tutorial for this or can you assist me in doing this – Junkman

Ya it should support iOS 4.3 :-( – Junkman

In the above sample I am transforming the superview 90 degree and the the subview -90 degree, and perform a pageCurlUp and pageCurlDown animation (as i have shown in the sample app). Since the superview has been rotated 90 degree the animation following a curlUp or curlDown looks as if its happening curlLeft and curlRight respectively. – Behka

@croyneaus4u did it well enough in the demo app with handling UISwipegestureRecognizer and transforming contentView etc. @Junkman you can have a look at it to get an idea of what you're going to do. For supporting iOS<5, you'll have to do the core-graphics thing yourself. – Neckband

transitionWithVeiw and transform are both available from iOS 4.0 – Behka

Answer 4

SettingViewController *svc = [[SettingViewController alloc]initWithNibName:@"SettingViewController" bundle:nil];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:2];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[self.navigationController pushViewController:svc animated:YES];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.navigationController.view cache:NO];
[UIView commitAnimations];

Mummery

Answer 5

As mentioned several time in the answers the UIPageViewController (apple documentation) is the thing you should be looking at.

The implementation is fairly straightforward, the controller uses 2 delegates

• datasource : controlling the content to display (your pages) through 2 main methods
• delegate : controlling its behaviour

It implements the swipe gesture for scrolling from page to page and can feature a page control at the bottom of your view.

For transitioning from page to page, you can either set a scroll animation (nice for photo / portfolios type) or the page curl you are looking for.

Immersed

Answer 6

You can make page curl/flip effect by

For landscape mode:

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:contentView cache:YES];
[UIView commitAnimations];

---

For portrait mode:

[UIView beginAnimations:@"Curl" context:nil];
[UIView setAnimationDuration:2.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlLeft forView:contentView cache:YES];
[UIView commitAnimations];

Cantal