web-dev-qa-db-fra.com

Animation de retournement vertical UIView

J'ai un iOS UIView avec UIViewAnimationTransitionFlipFromRight. J'en ai besoin pour retourner verticalement cependant. La transition de boucle de page ne la coupera pas. Je suppose que cela nécessitera quelque chose de personnalisé.

Des idées?

iosuiviewcore-animation
47
Christian Schlensker

Depuis iOS 5.0, il n'est pas nécessaire d'écrire votre propre transformation Core Animation pour effectuer des retournements verticaux. Utilisez simplement les transitions UIViewAnimationOptionTransitionFlipFromTop et UIViewAnimationOptionTransitionFlipFromBottom d'UIKit, et tout cela devient un appel de méthode unique.

Ceux-ci se comportent de manière analogue à UIViewAnimationOptionTransitionFlipFromLeft et UIViewAnimationOptionTransitionFlipFromRight (qui existent depuis iOS 2.0).

Exemple d'utilisation:

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

Le code ci-dessus inversera verticalement la vue d'ensemble de viewToReplace. A mi-chemin de l'animation, à l'instant où la superview est perpendiculaire à l'écran et donc invisible, viewToReplace est remplacé par replacementView.

C'est si facile.

34
Mark Amery

Écrivez simplement votre propre méthode pour le flip en utilisant les transformations d'animation de base.

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

Assurez-vous que les bibliothèques/frameworks Core Animation ont été ajoutés et inclus et ont également inclus math.h si vous souhaitez utiliser le M_PI notation.

MODIFIER:

Pour l'avoir essentiellement "changer" la vue lorsqu'elle est à mi-chemin, faites quelque chose comme ceci:

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

Cela pourrait également fonctionner:

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

À votre santé.

66
Brenton Morse

Le code de Brenton n'a pas fonctionné pour moi, j'ai donc creusé un peu plus les documents Apple et j'ai trouvé ce morceau de code pour un flip 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;
                                   }
                              }
    ];
}

Vous pouvez effectuer un retournement vertical en modifiant les options de UIViewAnimationOptionTransitionFlipFromRight : UIViewAnimationOptionTransitionFlipFromLeft à UIViewAnimationOptionTransitionFlipFromTop : UIViewAnimationOptionTransitionFlipFromBottom.

A fonctionné comme un charme.

27
Miha Hribar

UIViewAnimationOptionTransitionFlipFromTop est facile à utiliser, mais nous ne pouvons pas créer de transition interactive à l'aide de UIViewAnimationOptionTransitionFlipFromTop. Nous avons besoin de changer la transformation de la couche pour créer une transition interactive.

Il suffit de créer une transformation à l'aide de CATransform3DMakeRotation ne suffit pas, pas d'effet lumineux, pas de perspective. J'écris un échantillon pour ajouter ces effets. Vous pouvez facilement la transformer en transition interactive.

Démo:

Flip effect

Exemple de 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 et sideBView sont des sous-vues de containerView.

Le containerView est défini sur un fond noir.

7
BB9z

Version Swift 4. Solution 100% fonctionnelle

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

Appel de la fonction:

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

La meilleure pratique sera de créer l'extension UIView et de maintenir cette fonction sur cette extension afin qu'elle soit accessible à tout objet enfant UIView. Cette solution peut également être écrite à l'aide de ComplementBlock.

3
C0mrade

Pour basculer dans 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];
0
Mannam Brahmam