UIView垂直翻转动画

Question

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

有任何想法吗？

Answer 1

只需使用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
    }];
}

确保添加并包含Core Animation库/框架,math.h如果要使用M_PI表示法,还要包括它们.

编辑:

要让它在半途翻转时基本上"改变"视图,请执行以下操作:

- (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
        }];
    }];
}

这也可以工作:

- (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
    }];
}

干杯.

Answer 2

从iOS 5.0开始,没有必要编写自己的Core Animation转换来进行垂直翻转.只需使用UIKit UIViewAnimationOptionTransitionFlipFromTop和UIViewAnimationOptionTransitionFlipFromBottom转换,所有这些东西就变成了单个方法调用.

这些行为UIViewAnimationOptionTransitionFlipFromLeft和UIViewAnimationOptionTransitionFlipFromRight(从iOS 2.0开始以来一直存在)表现出来.

用法示例:

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

上面的代码将垂直翻转超视图viewToReplace.在动画的中间点,在超视图垂直于屏幕并因此不可见的瞬间viewToReplace被替换为replacementView.

就这么简单.

Answer 3

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;
                                   }
                              }
    ];
}

您可以通过更改选项做垂直翻转UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft到UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom.

工作就像一个魅力.

Answer 4

UIViewAnimationOptionTransitionFlipFromTop易于使用,但我们无法使用UIViewAnimationOptionTransitionFlipFromTop创建交互式转换.我们需要更改图层的变换来创建交互式过渡.

只是使用CATransform3DMakeRotation创建一个变换是不够的,没有光效,没有透视.我写了一个样本来添加这些效果.您可以轻松地将其更改为交互式转换.

演示:

示例代码:

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和sideBView是containerView的子视图.

containerView设置为黑色背景.