Share
Le nouveau système d'exploitation pour Apple Watch, watchOS 2, a été introduit il y a quelques semaines à la WWDC 2015. Il apporte de nombreuses améliorations, principalement pour les développeurs cherchant à créer une application Apple Watch. Voici les éléments les plus importants pour les développeurs:
Avant d'entrer dans les détails, j'aimerais passer une minute à parler du but des animations sur les applications Apple Watch..
La raison évidente est qu'ils rendent l'interface utilisateur plus agréable si elle est utilisée correctement. Et s’agissant de Apple Watch, c’est un grand si. Étant donné que la plupart des interactions avec les applications ne durent que quelques secondes, vous ne voulez vraiment pas abuser des animations.
La deuxième, et je crois la raison la plus importante, est qu’elles autorisent des hiérarchies de navigation personnalisées dans les applications Apple Watch. Supposons que vous deviez présenter un écran que l'utilisateur ne peut quitter qu'en effectuant une action spécifique. Normalement, les applications Apple Watch ont toujours un bouton d'annulation dans le coin supérieur gauche lorsqu'un contrôleur d'interface modal est présenté. Avec des animations et une manipulation de mise en page intelligente, vous pouvez créer votre propre routine "contrôleur de vue actuelle" qui affiche le contenu de votre application en plein écran, en le supprimant par cette action spécifique. C’est l’une des choses que vous apprendrez dans ce tutoriel..
Avant de vous plonger dans ce didacticiel, vous devez avoir des connaissances de base sur le fonctionnement du système de présentation sur WatchKit. Même si vous êtes un développeur iOS expérimenté, la disposition basée sur les groupes de WatchKit est très différente de celle à laquelle vous êtes habitué sur iOS. Vous devez penser à la mise en page d'une manière très différente. Mais une fois que vous vous y serez habitué, vous pourrez créer la plupart des mises en page sans trop d'effort..
Si vous débutez dans la mise en page sur WatchKit, il existe un excellent tutoriel sur Tuts + de mon ami Patrick Balestra, Comprendre le système de mise en page WatchKit. À l'aide d'un exemple d'application, il explique tout ce que vous devez savoir pour vous mettre à niveau..
En outre, de nombreuses sessions WWDC abordent ce sujet. La session que je recommande le plus et qui couvre les animations WatchKit s'intitule Techniques de présentation et d'animation pour WatchKit..
Le principe des animations sur watchOS 2 est simple: vous définissez une ou plusieurs propriétés animables dans un bloc d’animation. L'exemple suivant illustre comment cela fonctionne.
[auto animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ];
Cette méthode provoque la circleGroup être aligné à droite, avec une animation d'une durée de 0,5 seconde. Comme vous pouvez le constater, nous appelons animateWithDuration: animations: sur soi, qui est une instance de WKInterfaceController. C'est différent de iOS où les méthodes d'animation sont des méthodes de classe sur UIView.
La liste ci-dessous montre quelles propriétés sont animables:
Gardez à l'esprit qu'il n'est toujours pas possible sur watchOS 2 de créer des éléments d'interface utilisateur au moment de l'exécution. Mais puisque vous pouvez les cacher ou régler leur alpha sur 0 dans le storyboard, cela ne devrait pas être un gros problème.
C'est tout. Fort de vos connaissances sur le système de disposition WatchKit, vous êtes maintenant prêt à travailler avec des animations natives sur watchOS. Commençons par créer un exemple d'application pour que je puisse vous montrer quelques exemples montrant comment tout cela s'emboîte..
Nous allons créer une application simple, watchOS 2, qui présentera quelques-uns de ces concepts d'animation. Il ne s'agit en aucun cas d'essayer de donner un aperçu complet de toutes les choses possibles. Au lieu de cela, il montre l'idée de base, qui vous permettra, espérons-le, de trouver des solutions à vos besoins.
Au moment de la rédaction de ce document, Xcode 7 est toujours en version bêta. Pour créer une application watchOS 2, vous devez utiliser Xcode 7 et c’est ce que je vais utiliser..
Ouvrir Interface.storyboard dans le WatchApp groupe comme indiqué ci-dessous.
Ajoutez un groupe à l'interface en le faisant glisser depuis le Bibliothèque d'objets sur la droite. dans le Inspecteur d'attributs à droite, changez sa disposition en Verticale et mettre sa hauteur à Relatif au conteneur.
Ajoutez un deuxième groupe au groupe que nous venons d'ajouter. dans le Inspecteur d'attributs, régler sa position verticale sur Bas.
Ajoutez quatre boutons au deuxième groupe. Pour chaque bouton, définissez Taille à Relatif au conteneur avec une valeur de 0,25. Réglez les titres des boutons sur ←, →, ↑ et ↓. Après cette étape, l'interface utilisateur devrait ressembler à ceci:
Pour terminer la première partie de l'interface utilisateur, ajoutez un groupe supplémentaire au groupe principal et configurez-le comme suit:
La capture d'écran suivante vous montre comment configurer le cercle..
dans le Navigateur de projet, étendre le Extension WatchApp groupe et sélectionnez InterfaceController.m. Remplacer la mise en œuvre du InterfaceController classe avec les éléments suivants:
#import "InterfaceController.h" @interface InterfaceController () @property (nonatomic, faible) IBOutlet WKInterfaceGroup * circleGroup; @end @implementation InterfaceController // Boutons de direction de cercle - (IBAction) leftButtonPressed [auto animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentLeft]; ]; - (IBAction) rightButtonPressed [auto animateWithDuration: 0.5 animations: ^ [self.circleGroup setHorizontalAlignment: WKInterfaceObjectHorizontalAlignmentRight]; ]; - (IBAction) upButtonPressed [auto animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentTop]; ]; - (IBAction) downButtonPressed [auto animateWithDuration: 0.5 animations: ^ [self.circleGroup setVerticalAlignment: WKInterfaceObjectVerticalAlignmentBottom]; ]; @fin
Ces actions déplaceront le cercle rouge dans une direction spécifique. Et comme vous pouvez le constater, nous y parvenons en paramétrant son alignement vertical et / ou horizontal dans un bloc d’animation..
Ouvrir Interface.storyboard et connectez les prises comme indiqué ci-dessous.
Ça devrait le faire. Exécutez le projet et, si vous avez suivi les étapes ci-dessus, vous devriez pouvoir déplacer le cercle rouge sur l'écran à l'aide des boutons fléchés..
Dans la deuxième partie de ce didacticiel, nous allons créer une animation push. Comme la plupart des étapes impliquées sont similaires, je vais avancer un peu plus vite cette fois-ci..
Ouvrir InterfaceController.m et créer un nouveau point de vente, firstScreenGroup, de type WKInterfaceGroup dans l'extension de classe du InterfaceController classe.
@interface InterfaceController () @property (nonatomic, faible) IBOutlet WKInterfaceGroup * circleGroup; @property (nonatomic, faible) IBOutlet WKInterfaceGroup * firstScreenGroup; @fin
Ensuite, implémentez les actions suivantes dans le InterfaceController classe.
- (IBAction) pushButtonPressed [auto animateWithDuration: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 0]; ]; [auto animateWithDuration: 0.3 animations: ^ [self.firstScreenGroup setWidth: 0]; ]; - (IBAction) popButtonPressed [auto animateWithDuration: 0.3 animations: ^ [self.firstScreenGroup setRelativeWidth: 1 withAdjustment: 0]; ]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.2 * NSEC_PER_SEC))), dispatch_get_main_queue (), ^ [auto animateWithDuring: 0.1 animations: ^ [self.firstScreenGroup setAlpha: 1];);
Dans pushButtonPressed, nous réduisons le premier groupe d'écran (nous le créerons à l'étape suivante) et dans popButtonPressed nous élargissons à nouveau ce groupe. Nous animons également l'alpha du premier groupe d'écrans pour rendre l'animation un peu plus attrayante..
Ouvrir Interface.storyboard et ajoutez un nouveau groupe à l'interface utilisateur. Mettez le groupe qui était déjà là, celui qui contient Cercle et le groupe avec des boutons, à l'intérieur de ce nouveau groupe. Définir sa Disposition à Horizontal et renommer le groupe contenu à Premier écran. Cela vous sera utile plus tard. Le résultat devrait ressembler à ceci:
Ensuite, ajoutez un deuxième groupe qui sera au même niveau que le Premier écran groupe. Définir sa Disposition à Verticale. Ajoutez une image et un bouton au groupe. Vous pouvez ajouter littéralement n'importe quelle image, mais assurez-vous de placer quelque chose car sinon, l'animation aurait l'air un peu sèche. Définissez le titre du bouton sur "< Pop". Connect the button to the popButtonPressed action que nous avons créée plus tôt. L'interface utilisateur devrait maintenant ressembler à ceci:
Ajouter un bouton à la Premier écran groupe. Définissez son titre sur "Push>" et sa position verticale sur Bas. Connectez le bouton à la pushButtonPressed action. L'interface utilisateur devrait maintenant ressembler à ceci:
Il y a une chose que nous devons faire, reliant le firstScreenGroup sortie au groupe que nous avons nommé Premier écran.
Lorsque vous construisez et exécutez l'application, vous devriez pouvoir présenter le deuxième écran en appuyant sur le bouton avec le titre. "Push>" en bas. Vous pouvez fermer le deuxième écran en appuyant sur le bouton avec le titre "< Pop". It should look like this:
Dans ce tutoriel, nous avons examiné les animations natives sur watchOS 2. J'espère que cela vous a donné un aperçu de ce que vous pouvez réaliser avec les animations sur watchOS. Si vous avez des questions, vous pouvez poster un commentaire ci-dessous ou me contacter sur Twitter.
Accentsconagua