Comment puis-je mettre en œuvre un glisser/glissement de l'animation entre les points de vue?

Depuis iOS 7, si vous souhaitez animer la transition entre deux contrôleurs de vue, vous pouvez utiliser des transitions personnalisées, tel que discuté dans la WWDC 2013 vidéo Les Transitions Personnalisées À L'Aide De La Vue Des Contrôleurs. Par exemple, pour personnaliser la présentation d'un nouveau point de vue contrôleur de vous:

1. La destination view controller spécifier la self.modalPresentationStyle et transitioningDelegate pour la présentation de l'animation:

   - (instancetype)initWithCoder:(NSCoder *)coder {
       self = [super initWithCoder:coder];
       if (self) {
           self.modalPresentationStyle = UIModalPresentationCustom;
           self.transitioningDelegate = self;
       }
       return self;
   }

2. Ce délégué (dans cet exemple, le point de vue du contrôleur lui-même) serait conforme à UIViewControllerTransitioningDelegate et à mettre en œuvre:

   - (id <UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented
                                                                      presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
       return [[PresentAnimator alloc] init];
   }
   
   //in iOS 8 and later, you'd also specify a presentation controller
   
   - (UIPresentationController *)presentationControllerForPresentedViewController:(UIViewController *)presented presentingViewController:(UIViewController *)presenting sourceViewController:(UIViewController *)source {
       return [[PresentationController alloc] initWithPresentedViewController:presented presentingViewController:presenting];
   }

3. Vous pouvez implémenter un animateur qui permettrait de réaliser l'animation recherchée:

   @interface PresentAnimator : NSObject <UIViewControllerAnimatedTransitioning>
   
   @end
   
   @implementation PresentAnimator
   
   - (NSTimeInterval)transitionDuration:(id <UIViewControllerContextTransitioning>)transitionContext {
       return 0.5;
   }
   
   //do whatever animation you want below
   
   - (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
       UIViewController* toViewController   = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
       UIViewController* fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
   
       [[transitionContext containerView] addSubview:toViewController.view];
       CGFloat width = fromViewController.view.frame.size.width;
       CGRect originalFrame = fromViewController.view.frame;
       CGRect rightFrame = originalFrame; rightFrame.origin.x += width;
       CGRect leftFrame  = originalFrame; leftFrame.origin.x  -= width / 2.0;
       toViewController.view.frame = rightFrame;
   
       toViewController.view.layer.shadowColor = [[UIColor blackColor] CGColor];
       toViewController.view.layer.shadowRadius = 10.0;
       toViewController.view.layer.shadowOpacity = 0.5;
   
       [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
           fromViewController.view.frame = leftFrame;
           toViewController.view.frame = originalFrame;
           toViewController.view.layer.shadowOpacity = 0.5;
       } completion:^(BOOL finished) {
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
       }];
   }
   
   @end

4. Vous souhaitez également mettre en œuvre une présentation contrôleur qui prend soin de nettoyer le point de vue de la hiérarchie pour vous. Dans ce cas, puisque nous sommes complètement le recouvrement de la présentation de la vue, nous pouvons l'enlever de la hiérarchie lorsque la transition est faite:

   @interface PresentationController: UIPresentationController
   @end
   
   @implementation PresentationController
   
   - (BOOL)shouldRemovePresentersView {
       return true;
   }
   
   @end

5. Éventuellement, si vous voulais que ce geste interactif, vous aussi, vous avez:

   • Créer une interaction contrôleur (généralement un UIPercentDrivenInteractiveTransition);

   • Votre UIViewControllerAnimatedTransitioning également de mettre en œuvre interactionControllerForPresentation, qui, évidemment, serait de rendre celle-ci interaction contrôleur;

   • Avoir un geste (ou ce que vous avez) qui met à jour la interactionController

Cela est décrit dans ce qui précède Les Transitions Personnalisées À L'Aide De La Vue Des Contrôleurs.

Par exemple de personnalisation de la navigation contrôleur push/pop, voir Manette de Navigation personnalisée animation de transition

---

Veuillez trouver ci-dessous une copie de ma réponse originale à cette question, qui date d'avant les transitions personnalisées.

---

@sooper la réponse est correcte, que CATransition peut donner l'effet que vous recherchez.

Mais, par ailleurs, si votre fond n'est pas blanc, le kCATransitionPush de CATransition a une étrange fade in et fade out à la fin de la transition qui peut être gênant (lors de la navigation entre les images, surtout, il donne un peu d'effet scintillant). Si vous souffrez de cela, j'ai trouvé ce simple transition très gracieux: Vous pouvez préparer votre "vue suivante" pour être juste à côté de l'écran à droite, et puis d'animer le déplacement de la vue courante hors de l'écran vers la gauche pendant que vous simultanément animer la prochaine vue à déplacer à l'endroit où la vue actuelle a été. Remarque, dans mes exemples, je suis l'animation des sous-vues dans et hors de la vue principale au sein d'une seule vue-contrôleur, mais vous avez probablement l'idée:

float width = self.view.frame.size.width;
float height = self.view.frame.size.height;

//my nextView hasn't been added to the main view yet, so set the frame to be off-screen

[nextView setFrame:CGRectMake(width, 0.0, width, height)];

//then add it to the main view

[self.view addSubview:nextView];

//now animate moving the current view off to the left while the next view is moved into place

[UIView animateWithDuration:0.33f 
                      delay:0.0f 
                    options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
                 animations:^{
                     [nextView setFrame:currView.frame];
                     [currView setFrame:CGRectMake(-width, 0.0, width, height)];
                 }
                 completion:^(BOOL finished){
                     //do whatever post processing you want (such as resetting what is "current" and what is "next")
                 }];

Clairement, vous auriez à le tordre pour la façon dont vous avez reçu vos commandes tout mettre en place, mais cela donne une très simple de transition, pas de décoloration ou quelque chose comme ça, juste une belle transition en douceur.

Une mise en garde: tout d'Abord, ni exemple, ni la CATransition exemple, sont tout à fait comme le Tremplin de l'écran d'accueil de l'animation (que vous avez parlé), qui est continue (c'est à dire si vous êtes à mi-chemin à travers un glissement de doigt, vous pouvez arrêter et revenir en arrière ou quoi que ce soit). Ces transitions sont ceux qui une fois de les initier, ils ont juste arriver. Si vous avez besoin que l'interaction en temps réel, qui peut être fait, aussi, mais c'est différent.

Mise à jour:

Si vous souhaitez utiliser un geste continu qui permet de suivre le doigt de l'utilisateur vous pouvez utiliser UIPanGestureRecognizer plutôt que UISwipeGestureRecognizer, et je pense que animateWithDuration est mieux que CATransition dans ce cas. J'ai modifié mon handlePanGesture pour changer le frame coordonnées de coordonner avec les gestes de l'utilisateur, puis j'ai modifié le code ci-dessus pour remplir l'animation lorsque l'utilisateur se laisser aller. Fonctionne assez bien. Je ne pense pas que vous pouvez le faire avec CATransition très facilement.

Par exemple, vous pouvez créer un geste de gestionnaire sur le contrôleur principal de vue:

[self.view addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)]];

Et le gestionnaire pourrait ressembler à:

- (void)handlePan:(UIPanGestureRecognizer *)gesture
{
//transform the three views by the amount of the x translation
CGPoint translate = [gesture translationInView:gesture.view];
translate.y = 0.0; //I'm just doing horizontal scrolling
prevView.frame = [self frameForPreviousViewWithTranslate:translate];
currView.frame = [self frameForCurrentViewWithTranslate:translate];
nextView.frame = [self frameForNextViewWithTranslate:translate];
//if we're done with gesture, animate frames to new locations
if (gesture.state == UIGestureRecognizerStateCancelled ||
gesture.state == UIGestureRecognizerStateEnded ||
gesture.state == UIGestureRecognizerStateFailed)
{
//figure out if we've moved (or flicked) more than 50% the way across
CGPoint velocity = [gesture velocityInView:gesture.view];
if (translate.x > 0.0 && (translate.x + velocity.x * 0.25) > (gesture.view.bounds.size.width / 2.0) && prevView)
{
//moving right (and/or flicked right)
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
prevView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
currView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}
completion:^(BOOL finished) {
//do whatever you want upon completion to reflect that everything has slid to the right
//this redefines "next" to be the old "current",
//"current" to be the old "previous", and recycles
//the old "next" to be the new "previous" (you'd presumably.
//want to update the content for the new "previous" to reflect whatever should be there
UIView *tempView = nextView;
nextView = currView;
currView = prevView;
prevView = tempView;
prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
}];
}
else if (translate.x < 0.0 && (translate.x + velocity.x * 0.25) < -(gesture.view.frame.size.width / 2.0) && nextView)
{
//moving left (and/or flicked left)
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
nextView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
currView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
}
completion:^(BOOL finished) {
//do whatever you want upon completion to reflect that everything has slid to the left
//this redefines "previous" to be the old "current",
//"current" to be the old "next", and recycles
//the old "previous" to be the new "next". (You'd presumably.
//want to update the content for the new "next" to reflect whatever should be there
UIView *tempView = prevView;
prevView = currView;
currView = nextView;
nextView = tempView;
nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}];
}
else
{
//return to original location
[UIView animateWithDuration:0.25
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
prevView.frame = [self frameForPreviousViewWithTranslate:CGPointZero];
currView.frame = [self frameForCurrentViewWithTranslate:CGPointZero];
nextView.frame = [self frameForNextViewWithTranslate:CGPointZero];
}
completion:NULL];
}
}
}

Qui utilise ces simples frame méthodes que vous feriez sans doute définir pour votre choix UX:

- (CGRect)frameForPreviousViewWithTranslate:(CGPoint)translate
{
return CGRectMake(-self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}
- (CGRect)frameForCurrentViewWithTranslate:(CGPoint)translate
{
return CGRectMake(translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}
- (CGRect)frameForNextViewWithTranslate:(CGPoint)translate
{
return CGRectMake(self.view.bounds.size.width + translate.x, translate.y, self.view.bounds.size.width, self.view.bounds.size.height);
}

Votre particulier la mise en œuvre est sans aucun doute différente, mais j'espère que cela illustre bien l'idée.

Avoir illustré tout cela (de compléter et de préciser cette vieille réponse), je dois préciser que je n'utilise pas cette technique, pas plus. Aujourd'hui, j'utilise généralement un UIScrollView (avec "d'échange") ou (iOS 6) un UIPageViewController. Cela vous sort de l'entreprise de l'écriture de ce genre de geste gestionnaire (et de profiter de fonctionnalités supplémentaires comme les barres de défilement, de rebondir, etc.). Dans le UIScrollView mise en œuvre, je viens de répondre à la scrollViewDidScroll événement pour s'assurer que je suis paresseusement chargement de la nécessaire sous-vue.

Si vous voulez la même page de défilement/balayage à effet de tremplin avoir lors du passage de la page, alors pourquoi ne pas utiliser un UIScrollView?

CGFloat width = 320;
CGFloat height = 400;
NSInteger pages = 3;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,width,height)];
scrollView.contentSize = CGSizeMake(width*pages, height);
scrollView.pagingEnabled = YES;

Et ensuite utiliser UIPageControl pour obtenir ces points. 🙂