使用transitionFromView和transitionWithView进行过渡行为

Question

我正在尝试创建两个子视图（view1和view2）之间的过渡效果。当按下按钮时，我希望view1（前面）翻转并显示view2（背面）。我已经尝试了transitionFromView和transitionWithView。每个都有效，但都存在问题。

transitionFromView - 翻转父视图（整个窗口视图翻转，而不是子视图）。当进行翻转时，一个子视图在翻转前处于父视图的前面，另一个子视图在翻转的背面 - 这正是应该的。但我不想翻转父视图，只想翻转子视图。

transitionWithView - 只翻转子视图 - 但“to”视图在过渡发生之前就会显示出来。

有人有建议吗？

-(IBAction) button1action:(id) sender {  

 if ([sender tag] == 0) {  

  [UIView transitionFromView:view2 toView:view1 duration:2.0   
  options:UIViewAnimationOptionTransitionFlipFromLeft   
  completion:nil];   
}  

 else {  
  [view1 removeFromSuperview];    
  [self.view addSubview:view2];  
  [UIView transitionWithView:view2   
    duration:2.0  
    options:UIViewAnimationOptionTransitionFlipFromRight +  
    UIViewAnimationOptionShowHideTransitionViews  
      animations:^{}   
     completion:nil];  
 }
}

- David

---

请将下面的问题标记为答案，或输入自己解决问题的答案以帮助社区。 - Sam

他为什么要将问题标记为答案呢？ :D - return true

Answer 1

你需要在动画块中移除并添加子视图。另外，我认为transitionWithView应该以父视图作为参数。我认为你需要做的是使用一个与要翻转的视图相同大小的容器视图来实现正确的效果。

这是从文档中复制的内容：

[UIView transitionWithView:containerView
       duration:0.2
       options:UIViewAnimationOptionTransitionFlipFromLeft
       animations:^{ [fromView removeFromSuperview]; [containerView addSubview:toView]; }
       completion:NULL];

- Erik B

---

容器视图非常重要。这已经在iOS6和iOS7上进行了测试并且可以正常工作。 - Jameo

Answer 2

我遇到了完全相同的问题，我同意之前的答案。似乎你必须拥有一个容器视图才能使子视图之间的转换进行动画显示。

我正在使用`transitionFromView`方法。为了让动画背后有背景色，您还需要在容器视图中添加带背景色的父视图。

我的代码如下：

    [UIView transitionFromView:view1
                        toView:view2
                      duration:0.5
                       options:UIViewAnimationOptionTransitionFlipFromRight |
                               UIViewAnimationOptionAllowUserInteraction    |
                               UIViewAnimationOptionBeginFromCurrentState
                    completion:nil];

- Sam

Answer 3

这是我的工作方案草稿，一个简单的东西，却花费了2个小时，真是够呛： 我们有1个按钮来翻转元素，一个名为panel的UIView来容纳两个视图，用翻转动画进行切换。

-(void)viewDidLoad{
    [super viewDidLoad];
    UIButton *btnFlip = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btnFlip.frame = CGRectMake(10, 10, 50, 30);
    [btnFlip setTitle:@"flip" forState:UIControlStateNormal];
    [btnFlip addTarget:self action:@selector(flip) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btnFlip];

    panel = [[UIView alloc] initWithFrame:CGRectMake(10, 40, 300,300)];
    panel.backgroundColor = [UIColor darkGrayColor];
    [self.view addSubview:panel];

    panelBack = [[UIView alloc] initWithFrame:CGRectMake(10, 40, 280, 200)];
    panelBack.tag = 1;
    panelBack.backgroundColor = [UIColor brownColor];
    [panel addSubview:panelBack];

    panelFront = [[UIView alloc] initWithFrame:CGRectMake(10, 40, 280, 200)];
    panelFront.tag = 2;
    panelFront.backgroundColor = [UIColor whiteColor];
    [panel addSubview:panelFront];

    displayingFront = TRUE;
}

-(void)flip{

    [UIView transitionWithView:panel 
    duration:0.5
    options:(displayingFront ? UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft)
    animations:^{ 
        if (displayingFront) {
            //panelFront.hidden=TRUE;
            //panelBack.hidden = FALSE;
            [panelFront removeFromSuperview];
            [panel addSubview:panelBack];
        }else{
            //panelFront.hidden=FALSE;
            //panelBack.hidden = TRUE;
            [panelBack removeFromSuperview];
            [panel addSubview:panelFront];
        }
     }
     completion:^(BOOL finished){
         displayingFront = !displayingFront;
     }];
}

- Rui Nunes

Answer 4

我遇到了同样的问题，我同意Eric和Sam的说法： 只要创建一个适当大小的容器视图来翻转，transitionWithView或transitionFromView都可以按照上述给出的代码实现你想要的效果。否则整个窗口视图会翻转。

如果view1是你开始时的子视图，并且你想要翻转到view2，则添加

UIView *containerView = [[UIView alloc] initWithFrame:appropriateSize];
[containerView addSubview:view1];

然后，最简单的动画方式可能是：

[UIView transitionFromView:view1 
                    toView:view2 
                  duration:2.0   
                   options:UIViewAnimationOptionTransitionFlipFromLeft   
                completion:nil];   

- Hal

Answer 5

我有同样的需求，并看到了许多方法--从使用图层（如果您只想处理UIView，则最终会变得非常复杂）到建议我需要一个“容器”，然后在两个子视图之间进行转换。但是，如果您只想将某些东西从前面切换到后面，例如翻转纸牌或游戏块，我只需要进行一行更改：

（注意：我在网格中拥有UIView的数组（tiles [x] [y]），用于游戏。我所有的图像文件名都在数据库表/数组中，这些表/数组动态加载到UIImageViews的UIImages中。卡片或瓷砖的“背面”图像在UIImage中命名为“tileBackPicImageNM”。

因此，我的代码只是将正面图像替换为背面图像的代码：

[tiles[indexX][indexY] setImage:[UIImage imageNamed:tileBackPicImageNM]];

这个程序运行良好。

但是现在，为了展示翻转动作，它是：

[UIView transitionWithView:tiles[indexX][indexY] duration:0.3 options:UIViewAnimationOptionTransitionFlipFromLeft 
                    animations:^{  
                        [[indexX][indexY] setImage:[UIImage imageNamed:tileBackPicImageNM]];
                    }
                    completion:NULL];    

我尝试了不同的“duration”参数 - 后来将其设置为浮点数，并在viewDidLoad例程中进行了设置。快于0.3几乎看不见，而1或2的值非常慢...

这不涉及两个子视图，对我来说更有用，因为我不想拥有包含一系列视图层次结构的容器数组等...并且在新级别等上，我总是重新加载数组...

- harry

Answer 6

请记住，容器视图需要一个纯色背景。这意味着除了透明颜色以外的任何颜色都可以。这是我的错误，花费了相当长的时间才弄清楚。

- Ilker Baltaci

Answer 7

使用transitionFromView，前后视图都应该在另一个视图中（而不是超级视图）内。这样它就不会翻转整个屏幕。

> superview
>     another view
>        backview
>        frontview

UIView.transitionFromView(frontView, toView: backView, duration: 0.5, options: .TransitionFlipFromLeft | .ShowHideTransitionViews) { finished in

UIView.transitionFromView(frontView, toView: backView, duration: 0.5, options: .TransitionFlipFromLeft | .ShowHideTransitionViews) { 结束后 in

}

你可能想让（另一个视图）的大小等于frontView的大小

- Ahmed Onawale