Suite à la sortie d’iOS 7 (et iOS 8 également), les effets d’animation et de mouvement sont devenus centraux dans la conception des applications d’Apple et des développeurs tiers. iOS 7 a introduit un design plat et minimal aux applications, ce qui a inévitablement abouti à certaines applications ayant une interface utilisateur similaire. Pour distinguer leurs applications des autres applications, les développeurs ont utilisé des fonctionnalités telles que des animations et des effets de mouvement pour faire ressortir leurs applications.

Non seulement les animations sont utilisées pour distinguer votre application, mais elles peuvent améliorer l’expérience utilisateur globale de votre application. Pour de bons exemples de la façon dont les animations sont utilisées pour améliorer l’expérience utilisateur, vous devriez regarder comment Apple utilise les animations dans ses applications. Par exemple, dans l’application Photos, lorsque vous sélectionnez une photo d’une collection, la photo s’étend de celle sélectionnée et, à la fermeture, elle revient à la photo sélectionnée. Cela ajoute à la navigation de l’application en ce sens qu’elle vous permet de savoir exactement où vous étiez, si vous parcourez de nombreuses images.

Le papier de Facebook utilise également des animations magnifiquement pour ajouter à l’expérience utilisateur globale de l’application. Vous sélectionnez un article à lire en le retournant. Cette action, le fait que l’article se développe à partir de sa version miniature, suggère qu’en faisant le contraire, c’est-à-dire en retournant l’article vers le bas, il le ramènerait à sa miniature. Ici, l’animation est utilisée pour expliquer le fonctionnement de l’application et même un utilisateur pour la première fois de l’application pourrait bientôt faire des hypothèses sur son utilisation et comprendre sa navigation sans avoir besoin d’un tutoriel.

Non seulement les animations ajoutent à l’expérience utilisateur de l’application, mais elles pourraient être ce qui ravit et impressionne vos utilisateurs en garantissant une utilisation répétée au lieu de désinstaller l’application pour une meilleure depuis l’App Store.

Il existe de nombreuses façons d’inclure des animations dans vos applications, certaines d’entre elles étant en utilisant la dynamique UIKit, les animations de calques, les transitions de contrôleur de vue ou en utilisant une bibliothèque tierce comme la bibliothèque Facebook Pop ou le framework JNWSpringAnimation.

Dans ce tutoriel, nous allons examiner des animations de vue simples. Vous pouvez télécharger le projet de démarrage qui est une application à vue unique avec une vue de table qui répertorie les exemples présentés dans le tutoriel tutoriel. Je l’utiliserai lorsque nous arriverons à la partie exemples du tutoriel, au lieu de partir de zéro.

Le didacticiel commence par un résumé des API utilisées pour animer les vues et se termine par quelques exemples montrant l’utilisation de certaines API dans une application.

Animations de vue de base

Créer des animations sur vos vues consiste à modifier les propriétés de celles-ci et à laisser UIKit les animer automatiquement. Les propriétés que nous modifions sont celles marquées Animables.

La liste suivante affiche les propriétés animables.

  • centre
  • alpha
  • cadre
  • limites
  • transformer
  • backgroundColor
  • contentStretch

Vous allez constatez que toutes les animations impliquent un changement d’une ou plusieurs des propriétés ci-dessus.

Pour des animations de vue simples, UIKit fournit les API suivantes qui peuvent être utilisées pour animer des vues à l’écran.

Le premier prend deux paramètres – une valeur pour la durée en secondes de l’animation et une fermeture où vous spécifiez les propriétés que vous souhaitez modifier. UIKit prendra l’état d’origine de la vue et créera une transition en douceur de cet état à l’état final selon ce que vous avez spécifié dans la fermeture des animations.

Les deux autres API sont similaires à la première, mais elles prennent des paramètres supplémentaires qui ajoutent plus de configuration à l’animation. La seconde prend une fermeture d’achèvement que vous pouvez utiliser pour spécifier une autre animation que vous souhaitez faire après la première ou vous pouvez nettoyer l’interface utilisateur, par exemple, en supprimant une vue de la hiérarchie des vues une fois qu’une autre vue est animée sur la scène.

La troisième API prend deux paramètres supplémentaires – le délai, qui est le temps d’attente avant le début de l’animation et les options, une constante UIViewAnimationOptions, qui indique comment vous souhaitez effectuer les animations. Ce qui suit montre les options disponibles.

Animations de printemps

Les animations de printemps tentent de modéliser le comportement d’un ressort réel, en ce sens que, lorsqu’une vue est déplacée d’un point à un autre, elle rebondit /oscille vers la fin avant de se positionner.

Voici le bloc de méthode que nous utilisons pour les animations de printemps.

  • UIView.animateWithDuration(_:, delay:, usingSpringWithDamping:, initialSpringVelocity:, options:, animations:, achèvement:)

Ce qui précède est similaire aux méthodes que nous avons examinées plus tôt, à l’exception de deux nouveaux paramètres – usingSpringWithDamping et initialSpringVelocity. L’amortissement est une valeur de 0 à 1 qui détermine combien la vue rebondit vers la fin de l’animation. Plus la valeur est proche de 1, moins elle sera gonflable. initialSpringVelocity, comme son nom l’indique, détermine la vitesse initiale de l’animation. Cela détermine la force de l’animation au départ. Si vous voulez qu’il démarre vigoureusement, définissez une valeur plus grande, si vous voulez une animation fluide, vous pouvez définir la valeur sur 0.

Animations d’images clés

Les animations d’images clés vous permettent de définir différentes étapes d’une animation. Vous pouvez regrouper différentes animations qui partagent des propriétés communes, tout en pouvant les contrôler séparément.

Au lieu d’une animation qui se déplace simplement le long d’un chemin, UIKit exécutera les différentes étapes de l’animation.

Les API d’animation d’images clés sont les suivantes.

Les deux méthodes ci-dessus sont utilisées ensemble, la seconde étant imbriquée dans la fermeture des animations de la première.

La première méthode définit la configuration globale de l’animation, comme le temps nécessaire, le délai et ses options. Vous définissez ensuite une ou plusieurs de la deuxième méthode (les images) à l’intérieur de la fermeture des animations pour définir les différentes étapes de l’animation.

L’heure relative de début et la durée relative de chaque image sont une valeur comprise entre 0 et 1 qui exprime le pourcentage de temps dans la durée totale de l’animation.

Transitions de vue

Les transitions de vue sont utilisées lorsque vous souhaitez ajouter une nouvelle vue à votre hiérarchie de vues ou supprimer une vue de la hiérarchie de vues.

Les API utilisées pour créer des transitions de vues sont

Vous utilisez la première pour introduire une vue dans la hiérarchie des vues. La méthode prend des paramètres similaires à ceux que nous avons vus dans les autres méthodes d’animation.

Le second est utilisé pour prendre une vue de la hiérarchie des vues et placer une nouvelle vue à sa place.

Exemples

Nous allons maintenant examiner quelques exemples qui utilisent certains des appels d’API ci-dessus pour animer des vues dans le projet de démarrage donné.

Exemple I

Si vous exécutez le projet, vous verrez une vue de table qui répertorie les exemples à travers lesquels nous allons travailler. Sélectionnez l’exemple I dans la liste et vous devriez voir un écran de connexion d’une application avec les champs Nom d’utilisateur et mot de passe et le bouton de connexion.

Nous voulons que ceux-ci soient animés sur l’écran lorsque l’application démarre.

Pour commencer, nous masquerons les vues de la vue lorsque la vue apparaîtra pour la première fois. Avant la mise en page automatique, il aurait été simple de modifier la position de la vue spécifique dans le code, mais puisque nous définissons des contraintes de mise en page automatique sur les vues dans le fichier storyboard, nous devrons modifier les contraintes dans le code, ce qui changera la position de la vue.

Tout d’abord, nous devons obtenir une référence des contraintes que nous allons modifier. Ouvrez le fichier storyboard. Localisez les contraintes suivantes dans l’exemple de scène I.

Ouvrez l’Assistant Éditeur et assurez-vous qu’il s’agit de l’ExampleIViewController.swift qui apparaît à côté du storyboard sur l’écran partagé. Faites glisser la contrainte Center X Alignment-View-Username vers la classe ExampleIViewController. Créez un outlet nommé centerAlignUsername. Faites de même pour le Center X Alignment-View-Password et définissez son nom sur centerAlignPassword. Créez également une sortie pour le bouton de connexion nommé loginButton et une action pour le même bouton et nommez-le login. Assurez-vous de définir le type de l’action sur UIButton. Vous devriez avoir ce qui suit dans le code.

1
2
3
4
5
6
7

@ IBOutlet Nom d’utilisateur du centre var faible: NSLayoutConstraint!
@IBOutlet Mot de passe central var faible: NSLayoutConstraint!
@IBOutlet Bouton de connexion var faible: UIButton!
@ Connexion IBAction func (expéditeur: UIButton) {
}

Dans l’ExampleIViewController.swift ajoute la méthode suivante qui est appelée avant que la vue ne soit présentée à l’écran.

Cela déplace les champs nom d’utilisateur et mot de passe juste hors de vue et définit la valeur alpha du bouton sur 0, ce qui le rend invisible.

Ajoutez la méthode suivante qui est appelée à droite lorsque la vue apparaît.

Ici, nous utilisons l’UIView.animateWithDuration() méthode que nous avons vue plus tôt. Nous incluons les options Uiviewanimation.Option CurveEaseOut qui permet à l’animation de démarrer rapidement puis de ralentir à la fin. Vous pouvez expérimenter différentes options ici. Commande – cliquez sur UIViewAnimationOptions pour voir toutes les options disponibles.

L’animation dure 0,5 seconde et commence immédiatement. Vous avez la liberté sur la durée, mais vous ne devez pas définir un nombre aussi important que pour ennuyer vos utilisateurs lorsque les animations sur votre application semblent prendre trop de temps. Normalement, la durée est fixée entre 0,5 et 0,7 seconde, mais comme je l’ai dit, ce n’est pas gravé dans le marbre et vous avez la liberté de le régler selon ce qui vous convient.

L’animation fait exactement le contraire de ce que nous avons fait dans viewWillAppear(). layoutIfNeeded() est utilisé pour définir les vues immédiatement modifiées. Si vous ne l’incluez pas, vous ne les verrez pas s’animer à l’écran, mais ils seront simplement affichés dans leur position finale. Exécutez l’application et vous devriez voir ce qui suit.

Ce qui précède semble plus intéressant qu’une présentation statique, mais les vues animées en même temps ne créent pas un tel effet. Modifiez la méthode comme indiqué ci-dessous.

Exécutez l’application et l’animation résultante a les vues s’animant à l’écran à des moments différents. En regardant le code, vous pouvez voir qu’après le premier bloc d’animation, nous définissons un délai sur les suivants.

Dans les écrans de connexion, lorsque la connexion échoue, une animation indique à l’utilisateur que la connexion a échoué. Cela se fait parfois en secouant les champs de texte ou le bouton de connexion, et un message qui indique à l’utilisateur que la connexion a échoué. Nous ajouterons un tel effet sur le bouton de connexion à l’aide de ressorts. Modifiez la fonction login() comme indiqué.

Ce qui précède modifie la taille du bouton de connexion lorsqu’il est pressé et anime l’action avec une animation de ressort qui fera augmenter la largeur du bouton et rebondir un peu à la fin avant de s’installer.

Jouez avec la valeur d’amortissement. Si vous le définissez sur 1, le bouton se développera, sans rebond à la fin. Vous pouvez également utiliser la même méthode dans les champs nom d’utilisateur et mot de passe. Au lieu de les faire apparaître à l’écran et de s’arrêter en place à la fin, demandez-leur d’être comme un ressort et de rebondir un peu avant de s’installer.

Exemple II

Dans votre application, vous devrez peut-être remplacer automatiquement l’image d’arrière-plan d’une vue lorsqu’une action se produit. Vous pouvez le faire d’une manière où une image en remplace immédiatement une autre sur la vue, ou vous pouvez la fondre lentement pour créer une belle transition. Nous allons créer cet effet ici. Ouvrez ExampleIIViewController.swift et ajoutez ce qui suit.

Ici, nous créons une vue d’image et l’ajoutons à la vue principale. Nous appelons ensuite imageFadeIn() qui crée une deuxième vue avec une image différente. Nous ajoutons cette vue au-dessus de la première vue d’image et définissons son alpha à 0. Dans le bloc d’animation, nous animons sa valeur alpha, la rendant visible. Nous utilisons ensuite une fermeture d’achèvement pour définir l’image de la vue d’image sur la deuxième image et nous supprimons la deuxième vue d’image de la hiérarchie des vues car elle n’est plus nécessaire. J’ai ajouté un long délai pour que l’animation ne se produise pas au moment où nous sélectionnons l’exemple II dans la vue de table. La durée est également un peu longue pour que nous puissions voir ce qui se passe dans la démo.

Voici l’effet.

Exemple III

Ensuite, nous examinerons les animations d’images clés. Ouvrez ExampleIIIViewController.swift et ajoutez la variable et les fonctions suivantes au fichier. J’ai commenté le code pour expliquer chaque étape.

Dans viewDidLoad(), appelez la fonction createView(). Ajoutez ce qui suit au bas de viewDidLoad().

1
Voir la création()

Lors de l’exécution de l’application et de la sélection de l’exemple III dans la vue tableau, vous devriez voir une vue rouge avec une vue d’image en haut et un bouton au milieu.

Nous voulons que la vue (que je vais appeler la vue d’alerte à partir de maintenant) rétrécisse en taille et tombe hors de vue.

Lorsque nous avons créé le bouton, nous y avons ajouté un écouteur. Lorsque vous appuyez sur le bouton, la fonction dismissAlert() est appelée. Modifiez la fonction comme indiqué.

Dans le code ci-dessus, nous créons des cadres qui représentent ce que nous voulons pour les deux étapes d’animation de la vue. smallFrame se rétrécit à la moitié de la taille d’alertView, conservant le point central et finalFrame a une position en bas de l’écran, hors de vue.

Nous utilisons une animation d’images clés avec deux images clés. Le premier définit le cadre d’alertView sur smallFrame et le second sur finalFrame. Le résultat sera que la vue d’alerte diminuera à la moitié de sa taille, puis tombera hors de vue. Remarquez que j’ai mis un si grand nombre pour la durée – 4 secondes. Vous pouvez changer cela, je voulais juste que l’animation fonctionne au ralenti pour la démo. Exécutez l’application et sélectionnez l’exemple III.

L’animation n’est pas tout à fait ce à quoi nous nous attendions. Vous pouvez voir l’alerte rouge s’animer comme prévu, mais l’échelle de ses enfants ne change pas. La modification du cadre du parent ne modifie pas automatiquement les cadres de ses enfants.

Nous utiliserons une fonctionnalité introduite dans iOS 7 appelée UIView snapshots pour corriger l’animation. Cela vous permet de prendre un instantané d’un UIView avec sa hiérarchie et de le rendre dans un nouveau UIView.

Dans dismissAlert(), ajoutez ce qui suit juste avant le code d’animation de l’image clé.

1
2
3
4

let snapshot= alertView.Snapshotviewaftercreenupdates (false)
instantané.frame = Vue d’alerte.vue du cadre
.addSubview (instantané)
Vue d’alerte.removeFromSuperview()

Ici, nous créons une vue d’instantané et l’ajoutons à la vue principale. Nous supprimons ensuite l’alertView de la vue, car l’instantané le remplacera.

Remplacez l’animation d’image clé par ce qui suit.

Exécutez l’application et en appuyant sur Rejeter, la vue (instantané, vraiment) devrait s’animer comme prévu.

Exemple IV

Nous avons examiné comment vous pouvez animer des vues simples. Dans cet exemple, nous verrons comment vous pouvez animer une vue de table.

Si vous sélectionnez l’exemple IV dans la vue table, vous trouverez une autre vue table contenant une liste d’éléments. Lorsque la vue tableau est présentée, les éléments de la liste sont déjà positionnés sur la table. Nous voulons les animer sur la vue pour créer un effet plus intéressant.

Ouvrez ExampleIVViewController.swift et ajoutez les méthodes suivantes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

override func viewWillAppear (animé: Bool) {
Table d’animation()
}
func animateTable() {
tableView.Données de rechargement()
let cells= tableView.visibleCells()
laissez Tablehight:CGFloat=tableView.lier.taille.hauteur
pour i dans les cellules {
laissez la cellule: UITableViewCell = i comme cellule UITableViewCell
.transform = CGAffineTransformMakeTranslation(0, Hauteur de la table)
}
indice var = 0
pour a dans les cellules {
soit la cellule: UITableViewCell = a comme UITableViewCell
UIView.animateWithDuration(1.5, delay: 0.05 * Double (index), usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: nil, animations: {
cell.transform = CGAffineTransformMakeTranslation(0, 0);
}, achèvement : néant)
index += 1
}
}

Ici, lorsque la vue apparaît, la fonction animateTable() est appelée. Nous rechargeons les données de la vue du tableau et parcourons les cellules actuellement visibles à l’écran et déplaçons chacune d’elles vers le bas de l’écran. Nous parcourons ensuite toutes les cellules que nous avons déplacées vers le bas de l’écran et les animons à nouveau avec une animation de printemps.

Exécutez l’application et vous devriez voir ce qui suit.

Conclusion

Nous avons examiné diverses API que vous pouvez utiliser pour ajouter des animations aux vues de votre application. Ce n’est pas un guide exhaustif sur l’animation dans iOS, mais en utilisant les API simples que nous avons examinées, vous pouvez créer diverses animations dans vos applications. Pour approfondir les animations iOS, vous pouvez examiner la dynamique UIKit, les animations de calques, les transitions de contrôleur de vue et même les effets de mouvement. Vous pouvez également consulter des bibliothèques tierces comme Facebook Pop et le framework JNWSpringAnimation qui pourraient vous aider à créer plus facilement des animations complexes.

Vous pouvez télécharger le projet terminé ici.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.