UIView垂直翻转animation
我有一个iOS UIView与UIViewAnimationTransitionFlipFromRight
。 我需要它垂直翻转。 页面curl转换不会削减它。 我认为这将需要一些自定义。
有任何想法吗?
从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
视图。 在animation的中途点,在viewToReplace
垂直于屏幕并因此不可见的瞬间, viewToReplace
被replaceviewToReplace
replacementView
。
这很容易。
只需使用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库/框架,并且如果要使用M_PI
表示法,还包含了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 }]; }
干杯。
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; } } ]; }
像魅力一样工作。
UIViewAnimationOptionTransitionFlipFromTop易于使用,但我们不能使用UIViewAnimationOptionTransitionFlipFromTop创build交互式转换。 我们需要变化层的变换来创build一个交互式的过渡。
只需使用CATransform3DMakeRotation创build一个转换是不够的,没有灯光效果,没有视angular。 我写了一个样本来添加这些效果。 您可以轻松将其更改为交互式转换。
演示:
示例代码:
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被设置为黑色背景。
Swift 4.0版本 100%的工作解决scheme
// 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)
最好的做法是创buildUIView
扩展,并将该函数保存到该扩展中,以便任何UIView
子对象都可以访问它。 这个解决scheme也可以使用completionBlock来编写。
翻到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];
[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];
你可以在翻转视图的时候做任何你想要的修改,这里我改变了背景颜色