NSTJ
NSTJ

Reputation: 3888

Implementing iOS Maps style page curl gesture interactions

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.

Upvotes: 5

Views: 4968

Answers (2)

Dinesh Raja
Dinesh Raja

Reputation: 8501

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);
}

Upvotes: 0

Eric
Eric

Reputation: 16931

This piece of code will do the trick: XBPageCurl

Upvotes: 3

Related Questions