iPhone左翻页和右翻页过渡效果

Question

我正在寻找一种在iPhone上执行 UIViewAnimationTransitionCurlUp 或 UIViewAnimationTransitionCurlDown 转换的方法，但不是从上到下，而是从左到右（或在横向模式下从上到下）。我在互联网上看到过这个问题被问过几次，但似乎没有得到答案。然而我认为这是可行的。

我已经尝试更改视图的 transform 和 view.layer 的 transform，但这并没有影响到转换。由于当设备改变方向时转换会发生变化，我想这里有一种方法可以欺骗设备在纵向模式下使用横向转换，反之亦然？

- Dimitris

Answer 1

通过使用一个容器视图，可以在四个方向中的任意一个方向上进行卷曲。将容器视图的转换设置为所需的角度，然后通过将您的视图添加到容器视图而不是您应用程序的主视图（其框架未经过变换）来完成卷曲操作：

NSView* parent = viewController.view; // the main view
NSView* containerView = [[[UIView alloc] initWithFrame:parent.bounds] autorelease];
containerView.transform = CGAffineTransformMakeRotation(<your angle here, should probably be M_PI_2 * some integer>);
[parent addSubview:containerView]; 

[UIView beginAnimations:nil context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:containerView cache:YES];
[containerView addSubview:view];
[UIView commitAnimations];

- fluXa

---

你正在向 containerView 添加哪个视图？@fluXa - Pradeep Reddy Kypa

Answer 2

我通过更改UIViewController的方向来实现了这种效果。奇怪的是，当我的控制器嵌套在另一个控制器中时它不起作用，但是当我将它设置为立即视图控制器时，它就可以工作了。

实现代码：

在一个UIViewController中，它是我的应用程序委托中的主视图控制器，并且只允许横向方向（如下面的第2个方法所示），我有以下内容：

-(void)goToPage:(int)page flipUp:(BOOL)flipUp {

     //do stuff...

     // start the animated transition
     [UIView beginAnimations:@"page transition" context:nil];
     [UIView setAnimationDuration:1.0];
     [UIView setAnimationTransition:flipUp ? UIViewAnimationTransitionCurlUp : UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

     //insert your new subview
     //[self.view insertSubview:currentPage.view atIndex:self.view.subviews.count];

      // commit the transition animation
      [UIView commitAnimations];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
     return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
}

- Dimitris

---

状态栏怎么样？- 当使用应用程序时，状态栏将显示在右侧。 - sagarkothari

请确保您的View Controller未嵌套，或者如果嵌套了，请确保其父级实现正确的方向... - Dimitris

Answer 3

我也曾遇到过这个问题。为了让卷曲效果从右边或左边出现，您可以创建一个中间视图并对其进行变换。假设您正在转换的视图（myView）是主窗口（parentView）的子视图：

-parentView
-->myView

你需要在中间插入一个视图（可以在Interface Builder中轻松完成）：

-parentView
-->containerView
--->myView

然后，使用以下代码将容器向左翻转90度，并将过渡视图向右翻转90度：

containerView.transform = CGAffineTransformMakeRotation(-M_PI_2);
myView.transform = CGAffineTransformMakeRotation(M_PI_2);

我的视图仍然会向用户显示正常，但是转换会认为它是从左侧旋转了90度。

请注意，根据您的视图自动缩放的方式，您可能需要在应用变换后修复框架大小，例如：

  containerView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);
  myWebView.frame = CGRectMake(0.0, 0.0, 768.0, 1024.0);

希望这能帮到您。这是最接近UIViewAnimationTransitionCurlLeft和UIViewAnimationTransitionCurlRight的方法。

- Brad V

Answer 4

我尝试了 fluXa 在 iOS5 上的解决方案（所以我必须使用 [UIView trans......]）但是它没有起作用：翻页仍然向上或向下翻转。显然，转换现在不再考虑视图的变换。因此，如果有人想在 iOS5 上做同样的小技巧，解决方案是添加另一个容器并从那里动画过渡。

这是我的代码，有点特殊，因为我想向左翻 'up' 并且下角卷曲。就像我正在从笔记本上撕一页一样。

UIView* parent = self.view; // the main view
CGRect r = flipRectSize(parent.bounds);
UIView* containerView = [[UIView alloc] initWithFrame:r];
CGAffineTransform t = CGAffineTransformMakeRotation(-M_PI_2);
t = CGAffineTransformTranslate(t, -80, -80);
containerView.transform = CGAffineTransformScale(t, -1, 1);
[parent addSubview:containerView]; 

UIView* container2 = [[UIView alloc] initWithFrame:r];
[containerView addSubview:container2]; 

UIImageView* v = [[UIImageView alloc] initWithFrame:r];
v.image = [UIImage imageWithCGImage:contents.CGImage scale:contents.scale orientation:UIImageOrientationLeftMirrored];
[container2 addSubview:v];

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC), dispatch_get_main_queue(), ^{
    [UIView transitionWithView:container2
                      duration:DURATION_CURL_ANIMATION
                       options:UIViewAnimationOptionTransitionCurlUp
                    animations:^{
                        [v removeFromSuperview];
                    } completion:^(BOOL finished) {
                        if (completion) {
                            completion(finished);
                        }
                        [containerView removeFromSuperview];}];});

注意：

1. 我必须承认，仿射变换平移(80,80)在我的脑海中没有意义，但在iPhone上是必要的，可能在iPad上不起作用。
2. flipSizeRect翻转矩形的宽度和高度（你已经明白了，对吧？）
3. dispatch_after是必要的，因为我添加了容器，然后想要从层次结构中删除一个视图。如果我省略了dispatch，就没有任何动画效果。我最好的猜测是，我们需要首先让系统执行布局传递，然后才能动画地删除。

- Michiel van Liempt

Answer 5

我认为除了编写自定义动画外，没有其他方法。

更重要的是，您可能不应该尝试这样做。翻起和翻下是用户界面语法的一部分，告诉用户一个视图正在被提起或放下到现有视图上方。这就像放下然后移除便利贴。左<- >右翻可能会被解释为像从书中撕下一页一样。这会让用户感到困惑。

每当您发现自己在界面上尝试做一些标准API无法轻松完成的事情时，您都应该问自己是否这种新颖的方法将向用户传达重要信息，并且它是否类似于现有的界面语法。如果不是，那么您就不应该费心。

不寻常的界面具有初始的惊叹效果，但它们会导致日常使用中的挫败和错误。它们还可能导致苹果拒绝您的应用程序。

- TechZen

---

这并不罕见。它完全相同。事实上，苹果也这样做，只是方向相反。我正在创建一个交互式的景观书，所以我确信这个动画将向用户传达书籍的感觉。上下效果适用于笔记本电脑（如notes应用程序）。但对于一本正式的书来说，我需要一种不同的感觉。 - Dimitris

如果你看过curl转场效果，你会发现它会将视图的三个角分离。而翻页只会分离两个角。Curl转场效果对视图进行对角线移动，而翻页仅左右移动。虽然不同之处微妙，但对用户的期望来说非常重要。 - TechZen

我认为你无法通过简单的变换获得所需的过渡效果，因为卷曲转场中的主要动作是右下角的对角线运动。无论你如何旋转或变换视图，那个对角线运动都会保持不变，这将破坏一个简单的从左到右的卷曲效果的幻觉。 - TechZen