Débuter avec Core Animation

A

près cette présentation-express la plus courte du monde, il nous a semblé utile de la compléter par un article qui intéressera sans doute les débutants. Le but du jeu est d’implémenter quelques éléments basiques d’animation sans avoir à plonger dans les profondeurs de Core Animation, … au moins dans un premier temps.

1. Rotation du device

Téléchargez le projet joint en cliquant ici. Exécutez-le tel quel et faites pivoter le device (ou le simulateur, avec cmd-flèches). Vous pouvez constater qu’en l’état, le résultat n’est pas satisfaisant.

Lorsque le device pivote, la méthode clé est dans le viewController :

// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

Ce YES indique au framework que la view pilotée par ce viewController accepte l’orientation passée en argument. Ici on ne fait pas dans le détail et on répond YES dans tous les cas.

Il est intéressant de noter que les templates proposent des formulations par défaut qui diffèrent selon qu’il s’agit de l’iPhone ou de l’iPad : si l’iPad renvoie YES par défaut pour toutes les orientations, sur l’iPhone, la méthode est non seulement rendue inactive par un commentaire, mais elle ne renvoie YES que pour l’orientation “portrait”. On peut bien sûr modifier ce comportement, mais il faut garder à l’esprit que la rotation “universelle” est réellement à considérer comme le standard sur l’iPad.

Interface Builder facilite grandement la gestion de la rotation grâce à l’autosizing, dont l’examen sort du cadre de cet article, mais dont nous présupposerons que vous savez l’utiliser. Hélas, lorsque l’UI atteint un certain niveau de complexité, l’autosizing ne permet pas de s’affranchir d’une gestion manuelle du déplacement et/ou du redimensionnement des éléments.

Apple a bien fait les choses : si ce déplacement est implémenté au bon endroit vis-à-vis du framework, autrement dit dans la bonne méthode, l’animation sera automatiquement ajoutée et suivra la rotation du device.

Dans le projet, décommenter la méthode suivante :

- (void)willAnimateRotationToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration
{
...
}

Le code récupère l’espace disponible à l’écran, puis calcule et applique les valeurs adéquates sur la propriété “center” de chaque UIImageView pour les déplacer.

Le simple fait d’insérer ce déplacement dans la méthode willAnimateRotationToInterfaceOrientation: suffit à obtenir l’effet souhaité : le déplacement est animé par le framework en réponse à la rotation du device, et en parfaite synchronisation avec les autres déplacements (status bar, etc.).

2. Déplacement d’une view

Dans le projet, décommenter la méthode viewDidLoad:. Lors du chargement initial de la view, on initialise oldLocation et on masque les deux autres images, qui ne sont pas utilisées pour la suite de l’article.

Le projet comporte trois versions de la méthode touchesEnded:. La version 1 se contente du service minimum : le point touché est directement appliqué à la propriété “center” de l’ UIImageView, qui s’y déplace sans aucune animation.

Commentez la version 1 et décommentez la version 2, qui ajoute l’animation du déplacement. On instancie un CAKeyFrameAnimation, qui est à son tour alimenté par un CGPath, lequel est créé en décrivant une ligne droite allant de oldLocation à newLocation. On crée ensuite un CAAnimationGroup que l’on applique sur le CALayer de la view.

3. Rotation ajoutée au déplacement

Commentez la version 2 et décommentez la version 3, qui ajoute la rotation. On instancie un autre CAKeyFrameAnimation qui gérera la rotation avec un array de CATransform3D, chaque élément du tableau représentant un “step” de rotation. La fonction CATransform3DMakeRotation() permet de préciser l’amplitude de rotation relative dans chacun des trois axes, ici nous ignorons l’axe des x et nous tournons à 100% sur les axes y et z. Pour expérimenter, faites varier les valeurs x, y et z ainsi que le nombre de pas.

Notez enfin qu’on ajoute le second CAKeyFrameAnimation dans le CAAnimationGroup :

[animationGroup setAnimations:[NSArray arrayWithObjects:move, rotation, nil]];


Animez bien, et au prochain CocoaHeads !

Benoit Widemann — www.widemann.net

One thought on “Débuter avec Core Animation

Leave a Reply

Your email address will not be published. Required fields are marked *