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.

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.

score 2 · Answer 1 · answered Jan 18 '13 at 05:25

2

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

answered Jan 18 '13 at 05:25

Zen

3,047
1
20
18

score 2 · Answer 2 · edited Feb 19 '13 at 05:39

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.

edited Feb 19 '13 at 05:39

Prajwal Rauniyar

136
2

answered Feb 19 '13 at 05:12

Meera

1,031
6
25

@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 – surendher Feb 20 '13 at 16:30

devluv · Answer 3 · 2013-02-15T11:44:58.657

1

There are two ways of doing it:

The hard way, implement everything yourself (from scratch, with layers and masks and transforms and gradients) and a lot of headache.
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.

edited Feb 15 '13 at 11:44

answered Feb 14 '13 at 12:29

devluv

2,007
13
13

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 – surendher Feb 14 '13 at 12:48
Ya it should support iOS 4.3 :-( – surendher Feb 15 '13 at 04:33
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. – devluv Feb 19 '13 at 04:08
@croyneaus4u did it well enough in the demo app with handling `UISwipegestureRecognizer` and transforming `contentView` etc. @surendher 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. – Zen Feb 19 '13 at 08:39
`transitionWithVeiw` and `transform` are both available from iOS 4.0 – devluv Feb 19 '13 at 09:09

score 0 · Answer 4 · answered Feb 28 '13 at 11:28

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];

Eric Genet · Answer 5 · 2013-03-05T19:33:07.963

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.

score 0 · Answer 6 · edited Jan 30 '16 at 15:23

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];

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

6 Answers6