2011-03-22 151 views

回答

34

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

这些行为类似于UIViewAnimationOptionTransitionFlipFromLeftUIViewAnimationOptionTransitionFlipFromRight(自iOS 2.0以来一直存在)。

实例:

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

上面的代码将垂直翻转的viewToReplace的上海华。在动画的中途点,在超视图垂直于屏幕并因此不可见的瞬间,viewToReplacereplacementView取代。

就是这么简单。

+0

注意:在调用动画之前,在其超级视图中插入两个视图。 “viewToReplace”必须位于“replacementView”前面。两个视图都必须设置为hidden = false。 – artkoenig 2013-08-16 13:26:42

+0

@Artjom您声称与我的经历不同。在调用'transitionFromView:...'之前,如果没有在'superview'中插入'replacementView',这对我来说工作得很好。也许还有其他一些不明显的相关因素,我们也采取了不同的做法,导致我们观察到的差异?你能否提供一个示例项目来展示你所描述的内容? – 2013-08-16 13:33:14

+0

在我的情况下,两个视图都是从nib初始化为类成员。但是,如果没有在翻转超视图中插入这两种方法,您的方法将无法正常工作。 – artkoenig 2013-08-16 13:49:19

65

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

请确保您有核心动画库/加入,其中包括和框架也已列入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 
    }]; 
} 

干杯。

+0

我已经看到翻转,但我需要显示视图的“背面”。有没有办法在这个动画的中途隐藏它的子视图,所以它模拟了视图在背面是“空的”? – 2011-03-22 15:25:14

+1

我编辑了我的帖子,添加了代码,可以做到这一点。 – 2011-03-22 16:20:29

+49

对于3D变换,您需要执行yourView.layer.transform而不是yourView.transform – 2011-06-28 12:24:50

26

从布伦顿代码为我,所以我没有通过苹果的文档和found this piece of code多一点挖不工作:

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

工作就像一个魅力。

+2

这是一个垂直翻转? – 2011-04-01 17:35:16

+1

它不是一个垂直翻转。它的系统提供了水平翻转 – 2011-09-09 15:33:45

+0

什么是downvotes?此代码比其他示例更短且更清晰。有没有隐藏的陷阱? – 2012-04-06 11:21:45

-3
[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]; 

你可以让你想要同时翻转查看任何修改,在这里,我有改变背景颜色

+0

-1,因为a)这是一个水平翻转,和b)我不认为这增加了任何新的东西,我的答案还没有提供。 – 2014-05-24 10:32:49

7

UIViewAnimationOptionTransitionFlipFromTop易于使用,但我们不能创建使用UIViewAnimationOptionTransitionFlipFromTop一个互动的转变。我们需要变更图层的变换来创建交互式变换。

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

演示:

Flip effect

样品的编号:

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被设置为黑色背景。

+1

这个动画有什么问题。正如你所看到的,在旋转的后半部分,视角被完全去除,看起来很奇怪。 – 2015-09-21 23:07:12

+0

这是令人印象深刻的,但不完全正确! – Fattie 2015-09-25 13:43:17

1

要翻转成的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]; 
3

雨燕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 
    }) 
} 

功能召唤:

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

最佳实践会至创建UIView扩展名,并将该函数保留为该扩展名,以便任何UIView子对象都可以访问该扩展名。这个解决方案也可以使用completionBlock编写。

+0

谢谢@ C0mrade,你节省了我的时间。 – 2017-07-18 08:22:31