ios UIView 垂直翻转动画

UIView vertical flip animation

提问by Christian Schlensker

I have an iOS UIView with UIViewAnimationTransitionFlipFromRight. I need it to flip vertically though. The page curl transition won't cut it. I assume this will require something custom.

我有一个带有UIViewAnimationTransitionFlipFromRight. 不过我需要它垂直翻转。页面卷曲过渡不会削减它。我认为这需要一些定制的东西。

Any ideas?

有任何想法吗？

采纳答案by Mark Amery

As of iOS 5.0, there's no need to write your own Core Animation transformation to do vertical flips. Just use UIKit's UIViewAnimationOptionTransitionFlipFromTopand UIViewAnimationOptionTransitionFlipFromBottomtransitions, and all this stuff becomes a single method call.

从 iOS 5.0 开始，无需编写自己的 Core Animation 转换来进行垂直翻转。只需使用 UIKitUIViewAnimationOptionTransitionFlipFromTop和UIViewAnimationOptionTransitionFlipFromBottom过渡，所有这些都变成了一个单一的方法调用。

These behave analagously to UIViewAnimationOptionTransitionFlipFromLeftand UIViewAnimationOptionTransitionFlipFromRight(which have been around since iOS 2.0).

这些行为类似于UIViewAnimationOptionTransitionFlipFromLeft和UIViewAnimationOptionTransitionFlipFromRight（自 iOS 2.0 以来一直存在）。

Example usage:

用法示例：

[UIView transitionFromView:viewToReplace
                    toView:replacementView
                  duration:1
                   options:UIViewAnimationOptionTransitionFlipFromBottom
                completion:nil];

The above code will vertically flip the superview of viewToReplace. At the halfway point in the animation, at the instant when the superview is perpendicular to the screen and thus invisible, viewToReplacegets replaced by replacementView.

上面的代码将垂直翻转viewToReplace. 在动画的中间点，当 superview 垂直于屏幕并因此不可见时，viewToReplace被替换为replacementView.

It's that easy.

就这么简单。

回答by Brenton Morse

Just write your own method for the flip using Core Animation Transforms.

只需使用 Core Animation Transforms 编写自己的翻转方法即可。

- (void)verticalFlip{
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0);
    } completion:^{
        // code to be executed when flip is completed
    }];
}

Make sure you have the Core Animation libraries/frameworks added and included and also have included math.hif you want to use the M_PInotation.

确保您已添加和包含核心动画库/框架，math.h如果您想使用该M_PI符号，也已包含。

EDIT:

编辑：

To have it essentially "change" the view when it's halfway flipped do something like this:

要让它在中途翻转时从本质上“改变”视图，请执行以下操作：

- (void)verticalFlip{
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
    } completion:^{
        while ([yourView.subviews count] > 0)
            [[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
        // Add your new views here 
        [UIView animateWithDuration:someDuration delay:someDelay animations:^{
            yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
        } completion:^{
            // Flip completion code here
        }];
    }];
}

This could also work:

这也可以：

- (void)verticalFlip{

    // Do the first half of the flip
    [UIView animateWithDuration:someDuration delay:someDelay animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
    } completion:^{
        while ([yourView.subviews count] > 0)
            [[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
        // Add your new views here 
    }];

    // After a delay equal to the duration+delay of the first half of the flip, complete the flip
    [UIView animateWithDuration:someDuration delay:durationOfFirstAnimation animations:^{
        yourView.layer.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
    } completion:^{
        // Flip completion code here
    }];
}

Cheers.

干杯。

回答by Miha Hribar

The code from Brenton didn't work for me so I did a little more digging through the apple docs and found this piece of codefor an horizontal flip:

来自 Brenton 的代码对我不起作用，所以我对苹果文档进行了更多的挖掘，并找到了这段用于水平翻转的代码：

- (IBAction)toggleMainViews:(id)sender {
    [UIView transitionFromView:(displayingPrimary ? primaryView : secondaryView)
                        toView:(displayingPrimary ? secondaryView : primaryView)
                      duration:1.0
                       options:(displayingPrimary ? 
                                    UIViewAnimationOptionTransitionFlipFromRight :
                                    UIViewAnimationOptionTransitionFlipFromLeft)
                    completion:^(BOOL finished) {
                                   if (finished) {
                                       displayingPrimary = !displayingPrimary;
                                   }
                              }
    ];
}

You can do a vertical flip by changing the options from UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeftto UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom.

您可以通过将选项从 更改为 来UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft进行垂直翻转UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom。

Worked like a charm.

像魅力一样工作。

回答by BB9z

UIViewAnimationOptionTransitionFlipFromTop is easy to use, but we can not create an interactive transition using UIViewAnimationOptionTransitionFlipFromTop. We need change layer's transform to create an interactive transition.

UIViewAnimationOptionTransitionFlipFromTop 很容易使用，但是我们不能使用 UIViewAnimationOptionTransitionFlipFromTop 创建交互式过渡。我们需要更改图层的变换来创建交互式过渡。

Just create a transform using CATransform3DMakeRotation is not enough, no light effect, no perspective. I write an sample to add these effect. You can change it to an interactive transition easily.

仅仅使用 CATransform3DMakeRotation 创建一个变换是不够的，没有光效，没有透视。我写了一个示例来添加这些效果。您可以轻松地将其更改为交互式过渡。

Demo:

演示：

Sample code:

示例代码：

CALayer *sideALayer = sideAView.layer;
CALayer *sideBLayer = sideBView.layer;
CALayer *containerLayer = containerView.layer;

sideALayer.opacity = 1;
sideBLayer.opacity = 0;
sideBLayer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
containerLayer.transform = CATransform3DIdentity;

CATransform3D perspectiveTransform = CATransform3DIdentity;
perspectiveTransform.m34 = -1.0 / containerViewWidth;
[UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{

    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.5 animations:^{
        sideALayer.opacity = 0;
        containerLayer.transform = CATransform3DConcat(perspectiveTransform,CATransform3DMakeRotation(M_PI_2, 0, 1, 0));
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.5 animations:^{
        sideBLayer.opacity = 1;
        containerLayer.transform = CATransform3DConcat(perspectiveTransform, CATransform3DMakeRotation(M_PI, 0, 1, 0));
    }];
} completion:nil];

sideAView and sideBView are subviews of containerView.

sideAView 和 sideBView 是 containerView 的子视图。

The containerView is set a black background.

containerView 设置为黑色背景。

回答by C0mrade

Swift 4.0 Version100% Working Solution

Swift 4.0 版本100% 工作解决方案

// view1: represents view which should be hidden and from which we are starting
// view2: represents view which is second view or behind of view1
// isReverse: default if false, but if we need reverse animation we pass true and it
// will Flip from Left

func flipTransition (with view1: UIView, view2: UIView, isReverse: Bool = false) {
    var transitionOptions = UIViewAnimationOptions()
    transitionOptions = isReverse ? [.transitionFlipFromLeft] : [.transitionFlipFromRight] // options for transition

    // animation durations are equal so while first will finish, second will start
    // below example could be done also using completion block.

    UIView.transition(with: view1, duration: 1.5, options: transitionOptions, animations: {
        view1.isHidden = true
    })

    UIView.transition(with: view2, duration: 1.5, options: transitionOptions, animations: {
        view2.isHidden = false
    })
}

Call of the function:

函数的调用：

anim.flipTransition(with: viewOne, view2: viewTwo)
anim.flipTransition(with: viewTwo, view2: viewOne, isReverse: true)

Best practice will be to create UIViewextension and hold this function to that extension so it will be accessible to any UIViewchild object. This solution also can be written using completionBlock.

最佳实践是创建UIView扩展并将此功能保留在该扩展中，以便UIView任何子对象都可以访问它。此解决方案也可以使用 completionBlock 编写。

回答by Alix

Swift 5 version of @C0mrade

@C0mrade 的 Swift 5 版本

func flipTransition (with view1: UIView, view2: UIView, isReverse: Bool = false) {
    var transitionOptions = UIView.AnimationOptions()
    transitionOptions = isReverse ? [.transitionFlipFromLeft] : [.transitionFlipFromRight]

    UIView.transition(with: view1, duration: 1.5, options: transitionOptions, animations: {
        view1.isHidden = true
    })

    UIView.transition(with: view2, duration: 1.5, options: transitionOptions, animations: {
        view2.isHidden = false
    })
}

回答by Mannam Brahmam

To flip into UIView:

要翻转到 UIView：

  -(void) goToSeconVC
 {
  SecondVC *secondVCObj = [[SecondVC alloc] init];
  [UIView beginAnimation: @”View Flip” context: nil];
  [UIView setAnimationDuration: 1.0];
  [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut];
  [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight forView: self.navigationController.view cache: NO];
  [sef.navigationController pushViewController: seconVCObj animated: YES];
  [UIView commitAnimation];
 }
**To flip into a view controller:**
          viewController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
         [self presentViewController:viewController animated:YES completion:nil];
**To flip out of it:**

[self dismissViewControllerAnimated:YES completion:nil];

回答by Crazy Developer

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.75];
// checks to see if the view is attached
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight
                       forView:flipLabel
                         cache:YES];

 flipLabel.backgroundColor = [UIColor yellowColor];



[UIView commitAnimations];

You can make any modification which you want while flipping view, Here I have change the background color

您可以在翻转视图时进行任何您想要的修改，这里我更改了背景颜色