实现 iOS Maps 风格的页面卷曲手势交互

Posted 2023-03-12

【中文标题】实现 iOS Maps 风格的页面卷曲手势交互

【英文标题】：Implementing iOS Maps style page curl gesture interactions

【发布时间】：2012-06-29 10:50:00

【问题描述】：

很多人有兴趣在 ios 中实现页面卷曲模式转换，就像在原生 Maps 应用中发现的那样 - 请参阅 here、here 和 here - 但问题似乎并不存在完全回答。所以：

是否可以像目前在 iOS 6 上的地图中那样在主视图下方显示页面卷曲模式？我希望通过用手指“卷曲”顶部视图来实现转场，给人一种与卷曲直接交互的外观，就像 iBooks 在相同版本的 iOS 中的情况一样。

实现 segue 本身（如在部分卷曲过渡中）不是问题 - 添加手势交互（动态部分剥离）是。

【问题讨论】：

你用 UIPageViewController 试过了吗？我认为这允许直接交互。

UIPageViewController 可以用来显示类似地图的模式吗？

不，我想很难在地图应用程序中重现 curl 的确切行为。我不知道如何实现固定卷曲位置。

这似乎是最好的回应。我想你可以在 UIPageViewController 和提供的部分 curl 模态转换之间进行某种混搭，但似乎在 App Store 提交中被接受的可能性很小。

【参考方案1】：

这段代码可以解决问题：XBPageCurl

【讨论】：

干得好！我现在在做另一个项目，不过会尽快检查出来。

【参考方案2】：

我认为您不需要 OpenGL ES 来像在 iOS 5 中那样卷曲您的 mapView。您可以在 QuartzCore framework 本身中实现这一点。您可以看到我提到的代码here，我还修改了该代码并尝试了这个

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

【讨论】：

我的错，我应该说 iOS 6。这不是我要使用的页面卷曲模式，它是能够通过平移手势提升地图视图的能力，就像地图设置的方式一样在 iOS 6 中访问。