Implementing iOS Maps style page curl gesture interactions

Question

A bunch of people are interested in implementing the page curl modal transition in iOS like that found in the native Maps app - see here, here and here - however the question doesn't seem to have been fully answered. So:

Is it possible to display a page-curl modal beneath a main view as is currently the case in Maps on iOS 6? I wish to implement the segue via "curling" the top view back with a finger, giving the appearance of direct interaction with the curl, as is the case with iBooks in the same versions of iOS.

Implementing the segue itself (as in a partial curl transition) is not the problem - adding the gesture interaction (with dynamic partial peeling) is.

have you tried it with UIPageViewController? I think this allows direct interaction. — Felix, Jun 29 '12 at 12:45
Can UIPageViewController be used to show a modal like in maps? — NSTJ, Jun 29 '12 at 13:18
No, i guess it's hard to reproduce the exact behavior of the curl in maps app. I don't know how to achieve the fixed curl position. — Felix, Jun 29 '12 at 13:26
That seems to be the best response. I guess you could hack together some kind of mash between UIPageViewController and the partial curl modal transition which is offered, however it seems the likelihood of having this accepted in App Store submission is de minimis. — NSTJ, Jun 30 '12 at 06:53

score 3 · Accepted Answer · answered Jul 11 '12 at 16:48

3

This piece of code will do the trick: XBPageCurl

answered Jul 11 '12 at 16:48

Eric

16,003
15
87
139

Nice work! I'm on another project right now though will check it out ASAP. – NSTJ Jul 11 '12 at 18:35

score 0 · Answer 2 · edited May 23 '17 at 12:29

I don't think you need a OpenGL ES to curl your mapView like in iOS 5. You can just achieve that in QuartzCore framework itself. You can see my code as I mentioned here and I also revised that code and try this

- (void)mapCurl {
    [UIView animateWithDuration:1.0 
                     animations:^{
                         CATransition *animation = [CATransition animation];
                         [animation setDuration:0.7];
                         [animation setTimingFunction:[CAMediaTimingFunction functionWithName:@"default"]];
                         animation.fillMode = kCAFillModeForwards;
                         [animation setRemovedOnCompletion:NO];
                         // For curl and uncurl the animation here..
                         if (!_isCurled) {
                             animation.endProgress = 0.65;
                             animation.type = @"pageCurl";
                             [_locationMapView.layer addAnimation:animation forKey:@"pageCurlAnimation"];  
                             // _backView is a view behind the mapView
                             [_locationMapView addSubview:_backView];                                 
                         }else {
                             animation.startProgress = 0.35;
                             animation.type = @"pageUnCurl";
                             [_locationMapView.layer addAnimation:animation forKey:@"pageUnCurlAnimation"];  
                             // _backView is a view behind the mapView
                             [_backView removeFromSuperview];
                         }
                     }
     ];                    
    _isCurled = (!_isCurled);
}

my bad I should have just said iOS 6. It's not the page curl modal I'm going for, it's the ability to lift the map view with a pan gesture, like the way the maps settings are accessed in iOS 6. — NSTJ, Feb 01 '13 at 11:19

Implementing iOS Maps style page curl gesture interactions

2 Answers2

Linked