Metro et les animations

Les animations font partie intégrante de Metro, l’UX de Windows Phone 7. Un certain nombre d’animations sont utilisées au sein même du système mobile de Microsoft ; reproduire ces animations peut donc permettre à une application de ressembler plus au reste du système et donc de ne pas perdre l’utilisateur avec une signalétique différente. Dans cet article nous verrons les différentes animations de WP7 et comment les implémenter dans son application. Les spécifications des animations proviennent du blog de Clarity Consulting : http://blogs.claritycon.com/blogs/kevin_marshall/archive/2010/10/12/wp7-page-transitions-sample.aspx

Les types d’animations

Voyons tout d’abord les différents types d’animations de Windows Phone 7. Chacun des types d’animation est utilisé dans des cas distincts, qui seront décrits à chaque fois. Une chose importante à noter est l’utilisation dans les animations d’Easing, c’est-à-dire que les animations ne sont pas linéaires et s’accélèrent ou se décélèrent dans le temps. Toutes les animations de Windows Phone 7 utilisent l’Easing Exponential 6 (entrée ou sortie).
Note : Comme décrit dans l’article de Clarity Consulting, si vos pages sont un peu complexes, l’exponentielle 6 sera peut-être trop rapide ; utilisez dans ce cas une exponentielle 3.
Pour chaque animation il y a plusieurs cas d’utilisation, en général un pour amener du contenu et l’autre pour enlever le contenu. Ces différents cas seront également décrits ci-dessous. Clarity Consulting a de plus réalisé une vidéo qui vous permettra de voir tout de suite ce qui se cache derrière les énigmatiques noms d’animations :

Turnstile et Turnstile Feather

Description

L’animation Turnstile est l’animation la plus courante dans l’interface Windows Phone 7 : cette animation qui rappelle le mouvement les pages d’un livre qui se tournent, est utilisée quand on lance une application, ou quand on arrive dans les paramètres pour prendre deux exemples parmi tant d’autres.
Il y a d’ailleurs une grosse différence entre ces deux cas précis : quand on lance une application, le splash screen arrive en block alors que les liens des configurations arrivent en tournant de manière similaire mais dont le mouvement est légèrement décalé. On appelle la première animation « Turnstile » et la seconde animation « Turnstile Feather ». La seule différence entre ces deux types d’animation est donc que le premier s’applique à un seul contrôle, alors que le second s’applique à une liste. Le décalage entre chaque élément du Turnstile Feather est de 50 ms.
Le turnstile est une animation qui possède quatre variations :
  • On arrive sur une nouvelle page ; la page apparaît par derrière et s’arrête. C’est le Turnstile Forward in.
  • On sort de cette page pour une autre page ; la page courante disparaît par devant. C’est le Turnstile Forward out.
  • On revient de la nouvelle page sur la page d’avant ; la page précédente revient de devant et s’arrête. C’est le Turnstile Backward in.
  • On sort de l’application ; la page s’en va par derrière. C’est le Turnstile Backward out.

Spécifications

Nom Mouvement Durée Interpolation
Forward in -80 à 0 sur l’axe Y (avec centre de rotation en X à 0) 350 ms Exponentiel 6 (EaseOut)
Forward out 0 à 50 sur l’axe Y 250 ms Exponentiel 6 (EaseIn)
Backward in 50 à 0 sur l’axe Y 350 ms Exponentiel 6 (EaseOut)
Backward out 0 à -80 sur l’axe Y 250 ms Exponentiel 6 (EaseIn)

Conseils

Le Turnstile (et Turnstile Feather) est l’animation reine de Windows Phone 7 et donne un rendu magnifique, d’autant plus que les projections sont accélérées par le GPU. Elle est faite pour les animations d’entrée et de sortie d’application et pour la navigation dans les pages de l’application.
Attention cependant aux chutes de performances si vous utiliser cet effet sur des pages qui contiennent trop d’éléments, ou qui ne sont pas mise en cache sur le GPU (par exemple lors de l’utilisation de masque d’opacité).

Slide

Description

Le slide est un glissement de la page entière qui peut être lié à un fondu ou non (Slide / Slide and Fade). Il est utilisé pour symboliser la création d’un nouvel élément. Il peut être s’effectuer sur les côtés ou en haut / en bas. Deux états le caractérisent, l’apparition (slide in) et la disparition (slide out).

Spécifications

Nom Mouvement Durée Interpolation
Slide in Mouvement de 150 px dans la direction voulue 350 ms Exponentiel 6 (EaseOut)
Slide out Idem 250 ms Exponentiel 6 (EaseIn)
Slide and fade in Idem 350 ms Exponentiel 6 (EaseOut)
Slide and fade out Idem 250 ms Exponentiel 6 (EaseIn)

Conseils

Le slide est une animation qui est utilisée lors de la création d’une nouvelle donnée (exemple nouveau mail, nouveau contact, etc.) Elle est très simple et rend généralement bien. On peut également jouer sur les directions pour ajouter du sens : par exemple lors de la création d’un nouveau mail, si l’on annule la création du mail le slide s’effectue vers le bas (je jette mon mail à la poubelle) et si on envoie le mail le slide s’effectue vers le haut (j’envoie mon mail vers le server).

Continuum

Description

L’effet continuum permet de suivre la transition depuis une liste, vers une page de description de l’élément que l’on vient de sélectionner. Il est utilisé par exemple dans le Marketplace, lorsque l’on sélectionne une application et que l’on arrive sur la page descriptive de l’application.
Lorsque l’on clique sur l’élément, cet élément va avoir un mouvement courbe qui sort de l’écran (Forward out) et après la transition sur la page suivante, ce même élément va apparaître depuis l’extrémité de l’écran pour se placer en haut de l’écran, toujours suivant un mouvement courbe (Forward in). Quand on appuiera sur la touche back, la page entière disparaît (Backward out), et de retour sur la page précédente, l’élément réapparait du côté et revient à sa place dans la liste (Backward in).

Spécifications

Nom Mouvement Durée Interpolation
Forward out L’élément sélectionné se déplace de 73px vers le bas et de 225px sur le côté droit. La page glisse vers le bas de 70px et disparaît (opacité 0%) 150 ms Exponentiel 6 (EaseOut)
Forward in La page glisse vers le haut de 150 px. L’élément quant à lui arrive du coté de 130 px et descend de 70 px. 150 ms Exponentiel 6

(EaseOut)
Backward out La page effectue un glissement de 150 px et disparaît en même temps (Opacité 0%) 150 ms Exponentiel 6 (EaseIn)
Backward in L’élément revient de 70 px depuis la gauche. 150 ms Exponentiel 6 (EaseOut)

Conseils

Le continuum est parfait pour relier deux pages par un élément spécifique. Il faut juste faire en sorte que c’est cet élément qui se déplace de la première à la seconde page et inversement.

Swivel

Description

L’effet swivel est un effet qui montre l’apparition d’une fenêtre modale à l’écran. C’est une projection sur l’axe X. On peut en voir une application lors d’un appel entrant (apparition) et lorsque l’appel est terminé (disparition).

Spécifications

Nom Mouvement Durée Interpolation
Apparition -45 à 0 sur l’axe X (avec centre de rotation en Y à 0,5) 350 ms Exponentiel 6 (EaseOut)
Disparition 0 à 60 sur l’axe X 250 ms Exponentiel 6 (EaseIn)

Conseils

Les angles utilisés sont volontairement inférieurs à 90° pour donner une impression de vitesse. Pensez à mettre la visibilité à Collapsed dès que l’animation est terminée, ou votre rendu paraîtra chaotique. Cet effet est à réserver aux éléments qui apparaissent au-dessus des pages normales, qu’ils soient en plein écran ou non.

Rotate

Description

La rotation est l’effet par défaut lors d’un changement d’orientation dans le système. Il peut se faire du mode portrait au mode paysage ou du mode paysage au mode portrait.

Spécifications

Nom Mouvement Durée Interpolation
Rotation gauche (respectivement droite) 0 à -90 (respectivement -90 à 0) sur l’axe Z 500 ms Exponentiel 6 (EaseInOut)

Conseils

La rotation est l’effet à utiliser en cas de changement d’orientation. Par cohérence, vous pouvez également utiliser ces caractéristiques de durée et d’interpolation pour n’importe quelle rotation au sein de votre application.

Implémentation

Il est curieux que Microsoft n’ai pas encore proposé de code samples pour gérer les animations tout en étant cohérent avec le reste du système. Heureusement plusieurs l’ont déjà fait. C’est le cas de Clarity Consulting qui propose dans leur article une classe abstraite AnimatedBasePage qui gère les transitions. C’est également le cas de Telerik qui propose depuis peu un ensemble de contrôles pour Windows Phone.
Avec les spécifications, vous pouvez également créer ces animations, soit en XAML, soit en code et les appeler dans les différents évènements de la page. Par exemple, gérer les évènements NavigatedTo, NavigatingFrom et OnBackKeyPress vous permettra de créer dynamiquement des instances des différents storyboards et de jouer les animations.
Implémenter les animations de Windows Phone 7 peut être somme toute un peu compliqué, mais la valeur ajoutée est au rendez-vous, car cela permet à vos applications de se comporter comme le reste du système, et il faut avouer que les animations de WP7 ont vraiment un style unique !

Windows Phone 7 Silverlight Toolkit et les animations

Microsoft a justement attendu ce jour pour dévoiler la mise à jour de Novembre du WP7 Silverlight Toolkit qui contient… les classes qui vont vous aider à mettre en place les animations dans vos applications Windows Phone 7 ! Les nouvelles API ont l’air assez faciles à utiliser; il faut tout d’abord remplacer la RootFrame dans le App.xaml.cs par un TransitionFrame. Ensuite on pourra définir des transitions en XAML comme ceci :
<toolkit:TransitionService.NavigationInTransition>
 <toolkit:NavigationInTransition>
 <toolkit:NavigationInTransition.Backward>
 <toolkit:TurnstileTransition Mode="BackwardIn"/>
 </toolkit:NavigationInTransition.Backward>
 <toolkit:NavigationInTransition.Forward>
 <toolkit:TurnstileTransition Mode="ForwardIn"/>
 </toolkit:NavigationInTransition.Forward>
 </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
Plus d’informations sur le Toolkit 2ème édition se trouvent sur le blog de David Anson !
Publicités