UIView 翻转动画与核心动画

Question

尊敬的 Core Animation/iOS 专家，

我正在尝试获得类似于以下问题的效果。

Core animation animating the layer to flip horizontally

接受的答案似乎准确地描述了我的要求，除了这个答案没有代码而且我无法让我编写的任何代码工作。

这正是我想要做的：
1) 有 1 个主视图控制器/视图，在主视图的一部分上有 2 个重叠的 UIView，只显示一个（1 个在“前”，1 个在“后”）
2) 按下单独的 UIControl/UIButton，然后发生 3D 翻转过渡，将前（可见）视图旋转到视图之外，同时将后（隐藏）视图旋转到前面......就像看到相反一张扑克牌。
3) 能够按住 UIControl 在两个视图之间切换
4) 能够仅与前视图上的控件进行交互（即按下前层不会无意中触发恰好位于水龙头下方的背面控件）

我可能以错误的方式处理这个问题，所以请告诉我。理想情况下，我想使用 Core Animation，而不是 UIView 内置翻转事务，因为我希望动画是 3D 并且还希望将此任务用作执行更复杂 CA 工作的垫脚石。

目前我可以很好地翻转前视图（仅一次），但后视图不显示。

干杯，
安迪

这是我得到的代码：

MainViewController.h

@interface MainViewController : UIViewController
    - (IBAction)changeViewTapped:(UITapGestureRecognizer *)recognizer;
@end

MainViewController.m

#import "MainViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface MainViewController ()

@property (weak, nonatomic) IBOutlet UIView *detailView;
@property (weak, nonatomic) IBOutlet UIView *listView;
@property (nonatomic) CATransform3D rotationAndPerspectiveTransform;

@end

@implementation MainViewController

@synthesize detailView = _detailView;
@synthesize listView = _listView;
@synthesize rotationAndPerspectiveTransform = _rotationAndPerspectiveTransform;

- (void)viewDidLoad {
    [super viewDidLoad];

    CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
    rotationAndPerspectiveTransform.m34 = 1.0 / -500;
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, M_PI, 0.0f, 1.0f, 0.0f);
    self.rotationAndPerspectiveTransform = rotationAndPerspectiveTransform;

    CALayer *listLayer = self.listView.layer;
    listLayer.doubleSided = NO;
    listLayer.transform = self.rotationAndPerspectiveTransform;
}

- (IBAction)changeViewTapped:(UITapGestureRecognizer *)recognizer {
    CALayer *detailLayer = self.detailView.layer;
    CALayer *listLayer = self.listView.layer;

    detailLayer.doubleSided = NO;
    listLayer.doubleSided = NO;

    [UIView animateWithDuration:0.5 animations:^{
        detailLayer.transform = self.rotationAndPerspectiveTransform;
        listLayer.transform = self.rotationAndPerspectiveTransform;
    } completion:^(BOOL finished){
        // code to be executed when flip is completed
    }];
}

@end

Answer 1

关于 iOS 中翻转动画的快速提示 - 在您开始翻转动画之前，系统需要时间来渲染后视图（将被翻转到的视图）。所以如果你试图改变那个视图的内容，并以同样的方法触发翻转动画，你就会遇到问题。

为了解决这个问题，我用这样的代码取得了成功：

- (void)flipView {
   // Setup the view for the back side of the flip

   [self performSelector:@selector(performFlip) withObject:nil afterDelay: 0.1];
}

- (void)performFlip {
    [UIView transitionWithView: tileToFlip
                      duration: 0.5
                       options: UIViewAnimationOptionTransitionFlipFromLeft
                    animations:^{
                        // My flip specific code
                    }
                    completion:^(BOOL finished) {
                    }
     ];
}

简而言之，我在 flipView 方法中设置了所有内容，将控制权返回给 iOS，以便它有时间进行渲染，然后在十分之一秒后启动 flipTile 选择器来执行实际动画。

祝你好运！

Answer 2

- (void)perform
{
   UIViewController *src = (UIViewController *) self.sourceViewController;
   UIViewController *dst = (UIViewController *) self.destinationViewController;    

  [UIView beginAnimations:@"LeftFlip" context:nil];
  [UIView setAnimationDuration:0.8];
  [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
  [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft    forView:src.view.superview cache:YES];
  [UIView commitAnimations];

  [src presentViewController:dst animated:NO completion:nil];
 }