Share
Cette astuce rapide iOS vous apprendra à animer facilement des objets avec UIKit. Que vous ayez besoin de menus coulissants ou de singes volants, il est facile de le faire et cette astuce vous montrera comment!
L'animation dans les applications mobiles peut être une caractéristique très importante. D'un point de vue pratique, UX, il peut informer l'utilisateur que quelque chose a été modifié ou déplacé. D'un point de vue plus divertissant, il peut déplacer les images-objets de jeu ou les cartes de tuiles sur l'écran, entraînant l'utilisateur dans une expérience totalement interactive..
Heureusement, il est très facile de faire bouger des objets UIView dans vos applications iOS, et vous n'avez même pas à vous soucier de calculer des équations géométriques cryptiques ou autres!
Avant d'entrer dans l'animation proprement dite, nous devons nous familiariser avec les propriétés d'animation de base des objets UIView. Ce qui suit est une liste de toutes ces propriétés en tant que iOS 5.1:
Dans cette astuce, nous ne disposons pas de suffisamment d'espace pour parcourir toutes ces propriétés, mais nous en examinerons quelques-unes des plus courantes: centre, alpha et transformation..
[UIView animateWithDuration: animations (NSTimeInterval): animations ^ (void)]
Dans sa forme la plus élémentaire, ce qui précède est tout ce dont vous avez besoin pour animer une vue UIV. C'est assez simple: passez une durée (combien de temps durera l'animation), puis les propriétés à animer (les valeurs que vous souhaitez que les propriétés de UIView aient à la fin de l'animation).
Pour un exemple rapide, si nous avons un UIView appelé «theView» et que nous voulons le faire disparaître jusqu'à ce qu'il soit invisible au bout d'une durée de 0,5 seconde, nous appellerions:
[UIView animateWithDuration: animations 0.5f: ^ [theView setAlpha: 0.0f]; ];
Et nous avons fini! La durée de l'animation est définie par le animateWithDuration: paramètre, et un bloc d’actions d’animation spécifiques à Objective-C est fourni au animations: paramètre. C'est aussi simple que ça!
Souvent, nous voudrons faire quelque chose après la fin de l'animation. Nous allons prendre un jeu par exemple. Disons que nous voulons montrer à un joueur qu'il a réussi une action. Nous ferons cela en faisant voler une étoile dans le coin gauche de l'écran, puis un point sera ajouté à son score. Il y a deux choses que nous voudrons faire une fois que l'étoile aura fini de voler:
Pour ce faire, nous appellerons notre méthode d'animation avec un bloc d'achèvement, comme ceci:
[UIView animateWithDuration: animations (NSTimeInterval): achèvement des animations ^ (void): achèvement de ^ (BOOL terminé)];
Par exemple, si nous avons un UIImageView (c'est-à-dire une sous-classe de UIView) appelé «starImageView», avec une image d'étoile et une variable numérique appelée «points», nous appellerions:
[UIView animateWithDuration: animations 0.7f: ^ [setCenter starView: CGPointMake (0, 0)]; complétion: ^ (BOOL terminé) [starView removeFromSuperView]; points ++; ];
Il est à noter que nous devrons ajouter de nouveau notre "starView" en tant que sous-vue de notre UIView si nous voulons exécuter cette animation à nouveau. Vous pouvez le voir dans l'exemple de code fourni en pièce jointe à ce didacticiel Mobiletuts +..
Enfin, il existe une méthode qui nous permettra de définir des détails encore plus détaillés sur notre processus d’animation, y compris un délai avant l’exécution de l’animation et de définir le type "d'accélération" de notre animation. Ces types "d'accélération" peuvent être trouvés (et décrits) dans le fichier d'en-tête UIView.h en tant qu'énums:
typedef enum UIViewAnimationCurveEaseInOut, // lent au début et à la fin UIViewAnimationCurveEaseIn, // lent au début UIViewAnimationCurveEaseOut, // lent à la fin UIViewAnimationCurveEaseIn, // lent au début UIViewAnimationCurveEaseOut, // lent à la fin UIViewAnimationCurveEaseIn, // lent au début UIViewAnimationCurveEaseOut, // lent en fin UIViewAnimationCurveEaseIn, // lent au début UIViewAnimationCurveEaseOut, // lent en fin UIViewAnimationCurveEaseIn, // lent au début
Je vous encourage à jouer avec ceux-ci en les plaçant dans le paramètre "options" de la méthode d'animation suivante:
[UIView animateWithDuration: (NSTimeInterval) délai: (NSTimeInterval) options: (UIViewAnimationOptions) animations: ^ (void) animations complétion: ^ (BOOL terminé) achèvement];
Et encore une fois, en utilisant nos exemples précédents combinés, nous retarderons notre animation de 0,1 seconde, puis commencerons à la déplacer (lentement au début, puis à la vitesse, puis à la fin à la fin). De plus, pendant que nous déplaçons notre image, nous la fondons à 0% d'opacité. Enfin, une fois l’animation terminée, nous ajouterons un point à notre partition et supprimerons l’image de notre vue UIV..
[UIView animateWithDuration: délai 0.6f: options 0.1f: animations UIViewAnimationCurveEaseInOut: ^ [setCenter starView: CGPointMake (0, 0)]; [starView setAlpha: 0.0f]; complétion: ^ (BOOL terminé) [starView removeFromSuperview]; points ++; ];
Comme vous pouvez le constater, il est très facile d’animer vos UIViews, alors prenez le temps de vous amuser avec les différentes propriétés UIView animables et découvrez toutes les nouvelles choses que vous pouvez découvrir.!
Pour plus de pratique, utilisez la commande suivante pour faire pivoter votre image:
[starView setTransform: CGAffineTransformRotate (starView.transform, 90.0f)];
Maintenant, voyez ce qui est possible avec les animations pour UIViews! Et rappelez-vous, il existe plusieurs sous-classes d'UIView qui peuvent être animées avec les mêmes méthodes et propriétés, telles que (sans toutefois s'y limiter):
L'image étoile utilisée dans ce didacticiel a été publiée avec une licence GNU / GPL de FindIcons
Accentsconagua