CODEWITHSUNDEEP
iosobjective-cipadpage-curl
surendher
surendher

Reputation: 1378

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

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.

Upvotes: 11

Views: 3222

Answers (6)

Monish Bansal
Monish Bansal

Reputation: 519

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

Upvotes: 0

Eric Genet
Eric Genet

Reputation: 1260

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.

Upvotes: 0

dhaya
dhaya

Reputation: 1522

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

Upvotes: 0

Meera
Meera

Reputation: 1031

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.

Upvotes: 2

devluv
devluv

Reputation: 2017

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.

Upvotes: 1

Zen
Zen

Reputation: 3117

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

Upvotes: 2

Related Questions