UIView vertical flip animation

Tengo una UIView de iOS con UIViewAnimationTransitionFlipFromRight . Sin embargo, necesito que se voltee verticalmente. La transición de curl de página no lo cortará. Supongo que esto requerirá algo personalizado.

¿Algunas ideas?

A partir de iOS 5.0, no hay necesidad de escribir su propia transformación Core Animation para hacer volteos verticales. Solo use las transiciones UIViewAnimationOptionTransitionFlipFromTop y UIViewAnimationOptionTransitionFlipFromBottom , y todo esto se convierte en una sola llamada a método.

Estos se comportan análogamente a UIViewAnimationOptionTransitionFlipFromLeft y UIViewAnimationOptionTransitionFlipFromRight (que han estado presentes desde iOS 2.0).

Ejemplo de uso:

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

El código anterior invertirá verticalmente la supervista de viewToReplace . En el punto medio de la animación, en el instante en que la supervista es perpendicular a la pantalla y, por lo tanto, invisible, viewToReplace se reemplaza por replacementView .

Es fácil.

Simplemente escriba su propio método para el lanzamiento utilizando 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 }]; } 

Asegúrese de tener las bibliotecas / marcos de Animación Core añadidos e incluidos y también haya incluido math.h si desea usar la notación M_PI .

EDITAR:

Para tenerlo esencialmente “cambiar” la vista cuando está volteada a la mitad, haz algo como esto:

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

Esto también podría funcionar:

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

Aclamaciones.

El código de Brenton no funcionó para mí, así que profundicé un poco más en los documentos de Apple y encontré esta pieza de código para un lanzamiento horizontal:

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

Puede hacer una inversión vertical cambiando las opciones de UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft a UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom .

Trabajado como un encanto.

UIViewAnimationOptionTransitionFlipFromTop es fácil de usar, pero no podemos crear una transición interactiva usando UIViewAnimationOptionTransitionFlipFromTop. Necesitamos cambiar la transformación de la capa para crear una transición interactiva.

Simplemente crea una transformación usando CATransform3DMakeRotation no es suficiente, no hay efecto de luz, no hay perspectiva. Escribo una muestra para agregar estos efectos. Puede cambiarlo fácilmente a una transición interactiva.

Manifestación:

Efecto de volteo

Código de muestra:

 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 y sideBView son subvistas de containerView.

El contenedorView se establece en un fondo negro.

Solución de trabajo de la versión 100 de Swift 4.0

 // 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 }) } 

Llamada de la función:

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

La mejor práctica será crear la extensión UIView y mantener esta función en esa extensión para que sea accesible a cualquier objeto secundario UIView . Esta solución también se puede escribir usando completionBlock.

Para voltear en 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]; 

Puede hacer cualquier modificación que desee mientras se mueve la vista. Aquí he cambiado el color de fondo.