Comment créer des transitions et des animations de contrôleur de vue personnalisées

introduction

UIKit est un framework très puissant et fournit diverses façons de faire la transition entre les contrôleurs de vue. Certaines des animations fournies par UIKit incluent le glissement horizontal (via un push segue), le glissement vertical, le fondu enchaîné et le curl de page. Parfois, cependant, vous devez avoir une transition personnalisée entre les contrôleurs de vue pour créer une conception convaincante ou offrir une expérience utilisateur unique. Un bon exemple de transitions personnalisées est Photos d’Apple pour iOS lors de la sélection d’une photo.

Dans ce didacticiel, je vous montre comment créer vos propres transitions personnalisées grâce à l’utilisation de plusieurs API UIKit.

Exigences

Alors que les API utilisées pour créer des transitions personnalisées ont été introduites dans iOS 7, ce didacticiel utilise Auto Layout et Swift 2, ce qui signifie que vous devez exécuter Xcode 7+ sur OS X Yosemite ou une version ultérieure. Vous devez également télécharger le projet de démarrage depuis GitHub.

1. Composants d’une transition personnalisée

Lors de l’implémentation d’une transition de contrôleur de vue personnalisée, vous devez connaître deux composants principaux:

  • contrôleur d’animation, également appelé le animateur
  • délégué de transition, un contrôleur de vue que vous attribuez

le animateur L’objet est responsable de la transition en termes de durée et de logique réelle d’animation des vues. Le contrôleur d’animation de votre application peut être n’importe quel type d’objet à condition qu’il soit conforme à la UIViewControllerAnimatedTransitioning protocole.

le délégué de transition est responsable de fournir le contrôleur d’animation à utiliser pour la transition personnalisée. L’objet délégué que vous désignez doit être conforme à la UIViewControllerTransitioningDelegate protocole.

2. Créer une transition personnalisée

Ouvrez le projet de démarrage et exécutez votre application. Lorsque vous appuyez sur le Appuyez pour voir , la transition modale verticale standard est actuellement utilisée.

Créez un nouveau fichier en sélectionnant Nouveau> Fichier … du Fichier menu. Parmi les options affichées, sélectionnez iOS> Source> Swift Fichier et nommez le fichier Transition personnalisée. Ce fichier va contenir la logique nécessaire pour la transition personnalisée.

Tout d’abord, nous allons définir la classe de contrôleur d’animation qui sera utilisée pour la transition personnalisée. Ajoutez le code suivant à CustomTransition.swift:

Nous définissons un TransitionType énumération, qui est utilisée lors de la création d’un AnimationController objet.

Ensuite, nous définissons le AnimationController classe avec quelques propriétés. le duration va être utilisée pour déterminer la durée de l’animation et est la valeur renvoyée dans le UIViewControllerAnimatedTransitioning méthode de protocole transitionDuration(_:). Cette durée ne doit pas nécessairement être une variable, mais elle est plus facile à modifier lorsqu’elle n’est définie qu’une seule fois lors de la création du contrôleur d’animation. Les deux isPresenting et originFrame properties sera utilisé pour créer l’animation de la transition.

À ce stade, Xcode devrait vous présenter une erreur. C’est parce que nous n’avons pas implémenté la méthode obligatoire du UIViewControllerAnimatedTransitioning protocole. Avant de mettre en œuvre cette méthode, il y a une chose importante que vous devez savoir.

Lorsque votre transition personnalisée commence, UIKit vous fournit une vue de conteneur dans laquelle vous devez effectuer les animations pour la transition. Dans cette vue de conteneur, vous devez ajouter manuellement la vue du contrôleur de vue vers lequel vous effectuez la transition. Cette vue de conteneur ne dure que pendant la durée de la transition et est supprimée de la hiérarchie des vues dès que votre animation est terminée.

En relation :  Les 4 meilleures applications d'égaliseur Android pour booster l'audio

Nous allons maintenant implémenter l’animation personnalisée. Ajoutez la méthode suivante au AnimationController classe:

Nous commençons cette méthode en récupérant la vue du conteneur à partir du contexte de transition fourni en utilisant le containerView() méthode. Nous accédons au de et à vues en invoquant le viewControllerForKey(_:) méthode, passage UITransitionContextFromViewControllerKey et UITransitionContextToViewControllerKey respectivement.

Dans iOS 8 et versions ultérieures, vous pouvez accéder directement aux vues à l’aide du viewForKey(_:) méthode et la UITransitionContextFromViewKey et UITransitionContextToViewKey clés.

Dans le corps de la méthode, nous animons la vue de détail pour l’agrandir ou la réduire en utilisant UIView API d’animation.

La dernière chose importante à noter est la completeTransition(_:) méthode appelée sur l’objet de contexte de transition. Cette méthode doit être appelée une fois que votre animation est terminée pour informer le système que vos contrôleurs de vue ont terminé la transition. Cette méthode accepte un booléen comme paramètre unique, qui indique si la transition s’est terminée ou non.

Avec cette implémentation, nous avons créé un contrôleur d’animation entièrement fonctionnel. Pour réellement implémenter cela, nous devons maintenant configurer un délégué de transition.

3. Attribution d’un délégué de transition

Comme je l’ai mentionné plus tôt, le travail du délégué de transition est de fournir l’objet contrôleur d’animation pour une transition entre deux contrôleurs de vue. Le délégué de transition peut être l’objet de votre choix, mais la pratique courante consiste à faire du contrôleur de vue de présentation le délégué.

Dans CustomTransition.swift, ajoutez le code suivant sous le AnimationController définition de classe:

En implémentant cette extension, nous faisons le ViewController classe conforme à la UIViewControllerTransitioningDelegate protocole et mettre en œuvre trois méthodes. La première, prepareForSegue(_:sender:), sert à désigner le courant ViewController instance comme destination DetailViewController objets transitioningDelegate. Les deux autres méthodes créent un AnimationController objet pour présenter et supprimer le contrôleur de vue à l’aide de l’initialiseur que nous avons défini précédemment. Si vous revenez nil à partir de l’une de ces méthodes, la transition de contrôleur de vue par défaut ou standard sera utilisée à la place.

Une fois le délégué de transition configuré, il est temps de créer et d’exécuter votre application. Cette fois, lorsque vous appuyez sur Appuyez pour voir , vous devriez voir l’icône Xcode grossir et les autres étiquettes s’estomper. De même, lorsque vous appuyez sur le bouton Appuyez pour fermer bouton, vous devriez voir la même animation mais en sens inverse.

En relation :  3 conseils Google Play Store que tout utilisateur Android devrait savoir
Transition personnalisée

Toutes nos félicitations. Vous avez maintenant créé avec succès votre toute première transition de contrôleur de vue personnalisée sur iOS.

4. Rendre une transition interactive

Pour rendre la transition personnalisée encore meilleure, nous allons la rendre interactive et réactive. Un bon exemple de ceci est le UINavigationController faites glisser votre doigt depuis le bord gauche pour revenir en arrière.

Pour rendre une transition personnalisée interactive, vous devez d’abord disposer d’un objet conforme à la UIViewControllerInteractiveTransitioning protocole. Pour ce tutoriel, nous allons utiliser une classe fournie par UIKit qui est déjà conforme à ce protocole, UIPercentDrivenInteractiveTransition.

Afin de communiquer facilement entre les contrôleurs de vue (le délégué de transition et le contrôleur de vue déterminant le pourcentage d’achèvement de la transition), ouvrez DetailViewController.swift et ajoutez la propriété suivante au DetailViewController classe:

Ensuite, ajoutez le code suivant au didPanDown(_:) méthode de la DetailViewController classe:

dans le didPanDown(_:) méthode, nous calculons la valeur de la progress variable en fonction de la distance parcourue par l’utilisateur par rapport à la vue détaillée. Si le panoramique vient de commencer, nous créons l’objet contrôleur d’interaction et commençons le rejet du contrôleur de vue. Chaque fois que le mouvement de panoramique se déplace dans la vue, nous mettons à jour le contrôleur d’interaction avec la progression de la transition.

Enfin, lorsque le panoramique est terminé, nous terminons ou annulons la transition en utilisant le finishInteractiveTransition() et cancelInteractiveTransition() méthodes respectivement.

Ensuite, revenez à CustomTransition.swift et remplacez le prepareForSegue(_:sender:) méthode dans le ViewController extension de classe avec les éléments suivants:

Dans prepareForSegue(_:sender:), nous donnons au contrôleur de vue détaillée l’accès au contrôleur de vue racine.

Enfin, ajoutez la méthode suivante au ViewController extension:

le interactionControllerForDismissal(_:) renvoie le contrôleur de vue racine interactionController. Si c’est nil (par exemple, si le bouton est touché), l’animation personnalisée sera utilisée à la place.

Comme vous vous en doutez, un contrôleur interactif peut également être utilisé lors de la présentation des contrôleurs de vue en implémentant le interactionControllerForPresentation(_:) méthode.

Créez et exécutez votre application une dernière fois et, après avoir présenté votre contrôleur de vue détaillée, faites glisser vers le bas sur l’écran et vous verrez la transition se déplacer en synchronisation avec la position de votre doigt.

Conclusion

Vous devriez maintenant être à l’aise pour créer des transitions de contrôleur de vue entièrement interactives et personnalisées sur iOS. Comme vous pouvez le voir, ces API ne sont freinées que par les capacités d’animation d’UIKit et de Core Animation. Ils peuvent être utilisés pour presque tous les types de transition. Comme toujours, laissez vos commentaires et commentaires dans les commentaires ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.