Grâce aux animations rapides et fluides, vos applications prennent vie. Dans Windows 8 Consumer Preview, vous pouvez constater que les animations font partie intégrante de l'expérience utilisateur. Lorsque vous ouvrez une session sur votre PC, les éléments du menu Démarrer s'animent. Lorsque vous lancez une application immersive ou que vous ouvrez le menu Démarrer, l'expérience est enrichie par le biais d'une animation fluide. Les animations permettent notamment d'indiquer à l'utilisateur le résultat d'une action spécifique. Grâce à ce retour visuel, la perception de l'utilisateur est meilleure vis-à-vis de la réactivité de l'application. Même une simple opération d'ajout ou de suppression d'un élément dans une liste peut faire l'objet d'une animation subtile, pour la rendre plus fluide, plus moderne et plus informative (regardez vers la 25e minute de l'intervention de Jensen Harris au cours de la conférence //build/ session).

Cette petite vidéo présente une interface utilisateur enrichie à l'aide d'animations fluides.


Téléchargez cette vidéo pour la regarder sur votre lecteur habituel :
MP4 haute qualité | MP4 faible qualité

Les animations jouent un rôle essentiel dans la personnalité du style Metro de Windows 8. Désormais, vous pouvez insuffler cette même personnalité au sein de vos applications !

Dans ce billet, nous abordons les sujets suivants :

  1. Courte présentation du moteur d'animation
  2. Découverte des animations grâce à la bibliothèque d'animations
  3. Animations personnalisées et mise à profit des améliorations apportées au moteur d'animation
  4. Trucs et astuces pour l'intégration d'animations à vos applications de style Metro

Animation indépendante

Une partie importante de l'expérience utilisateur de Windows 8 repose sur des animations fluides et sans saccades, mises en œuvre grâce à la fonctionnalité d'animation indépendante. Une animation indépendante est une animation qui s'exécute indépendamment du thread exécutant la logique centrale de l'interface utilisateur. Une animation dépendante est quant à elle exécutée sur le thread d'interface utilisateur. Dans Windows 8, bon nombre des éléments animés sont composés par un moteur de composition exécuté sur un thread séparé. Le travail du moteur est délesté auprès du processeur graphique par le processeur principal. En délestant les tâches de composition auprès d'un thread autre que celui sur lequel repose l'interface utilisateur, le système génère des animations sans saccades, qui ne peuvent pas être bloquées par l'application exécutée sur le thread d'interface utilisateur (exécution de code JavaScript, opérations de synchronisation, etc.). Le processeur graphique, optimisé pour générer des graphismes visuellement riches, exploite les ressources de la mémoire vidéo. L'utilisation du processeur graphique permet d'améliorer significativement les performances, en exécutant les animations de façon fluide, à une fréquence d'images constante.

Aucun code supplémentaire n'est nécessaire pour que votre animation profite de la fonctionnalité d'animation indépendante. Le système détermine lui-même à quel moment il est possible de composer l'animation de façon indépendante. Pour que les animations soient performantes et fluides au sein de vos applications, vous devez suivre les consignes relatives aux animations indépendantes, disponibles dans le Centre de développement. Ces consignes sont particulièrement utiles lorsque vous créez des animations personnalisées, un sujet sur lequel nous reviendrons dans la suite de ce billet.

Pour commencer, découvrons comment vous pouvez améliorer vos applications en utilisant les animations de style Metro disponibles dans la bibliothèque d'animations.

Bibliothèque d'animations

La bibliothèque d'animations est une suite d'animations de style Metro spécialement conçues pour exploiter la fonctionnalité d'animation indépendante de la plateforme. Ces animations sont utilisées à travers toute l'interface utilisateur de Windows et peuvent également être utilisées dans votre application de style Metro. Considérez cette bibliothèque comme une palette d'animations qui accélèrent votre travail et qui ont dès le départ été conçues pour être rapides et fluides.

En tant que développeurs d'applications nous-mêmes, nous adorons cette fonctionnalité, car nous ne perdons ainsi plus de temps à créer des animations adaptées au style Windows 8. Il suffit d'utiliser la bibliothèque d'animations pour que votre application s'intègre à l'expérience Windows.

Cette bibliothèque anime l'interface utilisateur de Windows elle-même. Ces animations sont nettes et ont chacune un but bien précis. Nous avons étudié avec attention les courbes de chronologie et d'animation, de façon à ce que l'utilisateur profite d'un retour rapide et fluide lorsqu'il interagit avec l'interface utilisateur de Windows. Par conséquent, lorsque vous concevez des animations dans votre application, nous vous recommandons de commencer par examiner la bibliothèque d'animations pour trouver celle qui vous convient le mieux.

Que vous utilisiez du code HTML ou XAML, la bibliothèque d'animations vous permet de trouver les animations adéquates et de faire en sorte que votre interface utilisateur soit rapide et fluide. Examinons quelques exemples.

Exemple JavaScript

La bibliothèque JavaScript/HTML Personality se compose d'animations et de transitions CSS3. Ces animations sont utilisées pour la navigation dans les applications, les transitions entre différents contenus et les contrôles Windows 8.

L'animation EnterPage est une animation simple, mais très convaincante. Utilisez-la pour afficher du contenu pour la première fois ou pour les transitions entre les différentes pages d'une application en cours d'exécution.

Cet exemple montre comment utiliser cette API simple dans votre application.

HTML

<html>
<body>
<div id="input">
Some content here
</div>
<button onclick="runAnimation()", Run animation&lt;/button>
</body>
</html>

CSS

<style>
#input
{
background-color:blue;
}
</style>

JavaScript

<script>       
function runAnimation(){
enterPage = WinJS.UI.Animation.enterPage(input);
}
</script>

Exemple XAML

En XAML, la bibliothèque d'animations regroupe deux concepts : les transitions de thème et les animations de thème.

Les transitions de thème sont généralement utilisées pour animer des éléments visuels à l'écran pendant leur chargement, leur déchargement ou leur déplacement. Le système de disposition XAML déclenche ces animations intégrées en réponse aux changements de disposition de la page.

Ces déclencheurs incluent notamment les actions suivantes :

  1. Ajout d'un UIElement à la page ou à l'arborescence d'éléments visuels.
  2. Suppression d'un UIElement de la page ou de l'arborescence d'éléments visuels.
  3. Mise à jour des propriétés de disposition d'un UIElement existant sur la page ou dans l'arborescence d'éléments visuels, provoquant un changement de position ou de taille.

Une transition de thème spécifique peut répondre à tout ou partie des déclencheurs de disposition. La transition EntranceThemeTransition répond au déclencheur numéro un et anime les UIElements à mesure qu'ils sont ajoutés à la page ou à l'arborescence d'éléments visuels. Dans l'exemple suivant, tous les éléments enfants de l'élément Grid sont animés à l'aide de la transition EntranceThemeTransition.

<Grid>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>

<!-- Grid's children go here -->
</Grid>

Les animations de thème sont des animations intégrées généralement exécutées suite à une intervention de l'utilisateur. Vous devez les déclencher pour les exécuter. Pour exécuter une animation de thème, la solution la plus simple consiste à appeler la méthode Begin sur la classe Storyboard. Si vous connaissez déjà la classe VisualStateManager (VSM), sachez que vous pouvez insérer une animation de thème dans l'état visuel d'un contrôle. Cet exemple montre comment déclencher une animation de thème à l'aide de la méthode Begin :

XAML

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Grid.Resources>
<Storyboard x:Name="downAnimation">
<TapDownThemeAnimation TargetName="rectangle"/>
</Storyboard>
<Storyboard x:Name="upAnimation">
<TapUpThemeAnimation TargetName="rectangle"/>
</Storyboard>
</Grid.Resources>

<Rectangle x:Name="rectangle"
PointerPressed="Rectangle_PointerPressed"
PointerReleased="rectangle_PointerReleased"/>
</Grid>

Code


private void Rectangle_PointerPressed(object sender, PointerEventArgs e)
{
downAnimation.Begin();
}

private void rectangle_PointerReleased(object sender, PointerEventArgs e)
{
upAnimation.Begin();
}

Animations personnalisées

Malgré sa puissance, la bibliothèque d'animations ne peut pas couvrir tous les scénarios. Ainsi, vous pouvez créer vos propres animations personnalisées, exécutées de façon indépendante par le système (pour obtenir des conseils sur la création de vos propres animations, voir Mise en œuvre d'animations). Vous devez faire preuve d'une grande attention lors de la conception de votre animation, de façon à ce qu'elle ne soit pas exécutée sur le thread d'interface utilisateur.

Vous pouvez quand même utiliser des animations dépendantes dans votre application. Pour les animations personnalisées, nous vous encourageons à suivre les consignes relatives aux animations indépendantes. Cependant, si votre scénario nécessite des animations qui ne peuvent pas être animées de façon indépendante, l'animation peut quand même être exécutée de façon dépendante.

Cet exemple montre comment utiliser une animation indépendante 3D non affine qui ne se trouve pas dans la bibliothèque d'animations.

JavaScript

Pour les applications JavaScript, vous pouvez accéder à la fonctionnalité d'animation indépendante pour les animations personnalisées, par le biais de la syntaxe CSS3 Animation et Transition, récemment introduite dans la plateforme Web Microsoft d'IE10. Les animations indépendantes prennent uniquement en charge les propriétés qui ne nécessitent pas de changement au niveau de la disposition ou du rendu. Par conséquent, la fonctionnalité d'animation indépendante pour les applications JavaScript s'applique uniquement aux animations/transitions CSS qui ciblent des transformations ou des propriétés Opacity CSS3 2D et 3D. Les animations des autres propriétés CSS sont exécutées de façon dépendante sur le thread d'interface utilisateur.

Exemple d'animation personnalisée HTML

L'exemple ci-dessous illustre un retournement 3D CSS simple.

HTML

<html>
<head>
<title>Html animations CSS3</title>
</head>
<body>
<div id="parent">
<div id="box" onclick="className='move'" >Click me for CSS Change!</div>
</div>
</body>
</html>

CSS

<style>
body
{
background-color:gray;
}
#box
{
position: relative;
background-color:green;
width:300px;
height:300px
}

#box.move
{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 1s;
-ms-transition-timing-function: ease-in;
-ms-transform: rotateY(-180deg);
-ms-transform-origin: 50% 50%;
}

#parent{-ms-perspective: 600px;}
</style>

XAML

Dans le cas des applications XAML, un sous-ensemble spécifique de propriété est pris en charge de façon indépendante (pour en savoir plus, consultez le Centre de développement de Windows 8). Ces propriétés incluent notamment le positionnement des zones de dessin, l'opacité, les transformations de rendu, les projections, le découpage et la couleur.

L'animation d'une propriété autre que celles figurant dans la liste ci-dessus génère une animation dépendante. Par conséquent, l'animation est exécutée sur le thread d'interface utilisateur et risque d'être saccadée. Pour favoriser le développement d'interfaces utilisateur rapides et fluides, XAML exécute uniquement des animations indépendantes, sauf si vous activez de façon explicite des animations dépendantes. Pour exécuter une animation dépendante, vous pouvez utiliser la propriété EnableDependentAnimation sur la classe Timeline. Vous disposez également d'une propriété statique globale AllowDependentAnimations, à laquelle vous pouvez attribuer la valeur false afin de désactiver toutes les animations dépendantes dans votre application.

Exemple d'animation personnalisée XAML

L'exemple suivant montre comment animer les propriétés de la classe PlaneProjection que le système exécute de façon indépendante. Les concepts et la syntaxe de l'animation sont identiques à ceux des autres technologies XAML, mais ils ont été améliorés dans Windows 8 pour être exécutés indépendamment, de façon à améliorer les niveaux de performances des applications.

<Grid>
<Grid.Resources>
<Storyboard x:Name="customAnimation">
<DoubleAnimation Storyboard.TargetProperty="RotationY" Storyboard.TargetName="projection"
Duration="0:0:1" To="-180" />
</Storyboard>
</Grid.Resources>

<Grid Background="Red" Height="400" Width="600" PointerPressed="Grid_PointerPressed">
<Grid.Projection>
<PlaneProjection x:Name="projection"/>
</Grid.Projection>

<!-- Grid's children go here -->

</Grid>
</Grid>
 
private void Grid_PointerPressed(object sender, PointerEventArgs e)
{
customAnimation.Begin();
}

Meilleures pratiques en matière d'animations indépendantes

Comme avec tous les systèmes, les animations indépendantes présentent un certain nombre de limitations. Ces limitations diffèrent selon la plateforme utilisée (HTML ou XAML). Vous obtenez en général des animations indépendantes, sauf dans les cas suivants :

  1. Propriété d'animation influant sur la disposition : ces propriétés (CSS Width, par exemple) déclenchent une modification de la disposition et ne sont pas prises en charge de façon indépendante.
  2. L'état de l'élément d'animation ne respecte pas les consignes en matière d'animations indépendantes : les animations indépendantes qui ne respectent pas les consignes (voir Mise en œuvre des animations) ne sont pas prises en charge par le système.
  3. Ressources système insuffisantes : si le système ne possède pas de suffisamment de ressources (mémoire vidéo, par exemple), l'animation bascule sur une composition dépendante.

Voici quelques consignes relatives aux animations indépendantes.

JavaScript

  1. Évitez les animations infinies : lorsque vous utilisez des animations indépendantes, le processeur graphique alloue de la mémoire vidéo. En CSS, vous pouvez spécifier –ms-iteration-count: infinite. Si vous définissez cette valeur, l'animation spécifiée ne s'arrête jamais. Par conséquent, votre application conserve la mémoire vidéo de l'élément d'animation, jusqu'à ce que vous arrêtiez l'animation. Pour arrêter une animation infinie, vous pouvez supprimer la valeur –ms-animation-name ou modifier comme suit la propriété display de l'élément d'animation : display: none.
  2. Ne modifiez pas la propriété CSS Visibility : lorsque vous attribuez la valeur visibility: hidden à un élément d'animation indépendant, puis que vous lui attribuez ensuite la valeur visibility: visible, cet élément n'est plus indépendant. L'animation se poursuit, mais elle est désormais composée sur le thread d'interface utilisateur.
  3. Placez les éléments d'animation indépendante sur le dessus : comme les compositions indépendantes utilisent votre processeur graphique, la capacité de votre système à composer de façon indépendante est limitée. Si votre animation indépendante se trouve derrière d'autres éléments d'interface utilisateur, ces éléments d'interface situés au-dessus seront également composés de façon indépendante. Par conséquent, vous consommez inutilement de la mémoire vidéo. Pour éviter ce problème, veillez à ce que toutes les animations indépendantes soient exécutées par-dessus les autres éléments d'interface utilisateur. Si votre animation indépendante est située très bas dans la pile, elle risque d'être exécutée sous forme d'animation dépendante.

    Pour placer vos animations indépendantes sur le dessus, plusieurs possibilités s'offrent à vous :

    • Vous pouvez affecter à vos éléments d'animation indépendante une valeur z-index élevée.
    • Vous pouvez utiliser des valeurs z-index non négatives pour animer les éléments de façon indépendante.
    • Vous pouvez faire en sorte que votre animation indépendante ne chevauche pas d'autres éléments.
  4. N'utilisez pas de surfaces trop grandes, ni trop d'animations indépendantes : tout comme vous devez placer votre animation indépendante sur le dessus, tenez compte de la taille de votre élément d'animation et du nombre d'animations simultanées. Les animations indépendantes sont limitées par le processeur graphique du système. Si vous dépassez cette limite, vos animations basculent sur le thread d'interface utilisateur dépendant. Si vous remarquez des saccades dans vos animations, vous pouvez utiliser l'API IsIndependentlyComposed pour interroger votre élément.
  5. Utilisez l'API IsIndependentlyComposed : vous pouvez utiliser cette API pour déterminer si un élément HTML est composé indépendamment du thread d'interface utilisateur. Cette propriété renvoie la valeur true pour les éléments d'animation indépendants, pour les sous-éléments de défilement et les éléments qui se chevauchent et pour les éléments animés de façon indépendante.

XAML

  1. Dimensionnez les éléments pour les animations Height et Width : l'animation des propriétés Height et/ou Width d'un UIElement produit une animation dépendante, car ces propriétés nécessitent des changements de disposition qui peuvent uniquement être exécutés sur le thread d'interface utilisateur. Pour animer de façon similaire Height ou Width, vous pouvez animer la propriété Scale du contrôle. Les transformations ScaleTransform sont animées de façon indépendante. Cette approche offre une fréquence d'images plus stable.
  2. N'animez pas le contenu mis en cache : si vous définissez la propriété CacheMode (UIElement.CacheMode) d'un élément sur la valeur BitmapCache, toutes les animations de la sous-arborescence d'éléments visuels sont exécutées de façon dépendante. Cela est dû au fait que nous devons recréer l'intégralité du cache à chaque image. La solution est simple : il suffit de ne pas animer le contenu mis en cache.
  3. N'utilisez pas d'animations infinies pour les contrôles Progress : les contrôles ProgressRing et ProgressBar possèdent des animations infinies dont l'exécution peut se poursuivre même si le contrôle n'est pas visible sur la page, ce qui peut empêcher le processeur de passer en mode d'économie d'énergie ou d'inactivité. Nous vous recommandons d'affecter la valeur false aux propriétés ProgressRing.IsActive et ProgressBar.IsIndeterminate lorsque vous n'affichez pas les contrôles concernés.

Pour conclure

Nous sommes ravis de constater à quel point la fonctionnalité d'animation indépendante permet de créer des expériences utilisateur rapides et fluides pour les applications Windows 8. Nous espérons que la bibliothèque d'animations et la prise en charge des animations personnalisées exécutées indépendamment du thread d'interface utilisateur vous seront utiles pour créer des expériences utilisateur convaincantes dans vos applications de style Metro pour Windows 8.

-- Angelina Gambo et Hamid Mahmood
    Chefs de projet, Windows