Langage: HTML | XAML

Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque (XAML)

Applies to Windows and Windows Phone

Dans Windows Runtime, les animations peuvent améliorer votre application en la rendant plus vivante et interactive. À l’aide des animations de la bibliothèque d’animations du Windows Runtime, vous pouvez intégrer leur aspect dans votre application.

Remarque  Pour télécharger un exemple qui illustre un grand nombre des concepts abordés dans cette rubrique, voir l’Exemple d’animations de caractéristiques XAML.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

Animations de transition

Dans l’idéal, votre application doit faire appel aux animations pour améliorer l’interface utilisateur ou pour la rendre plus attrayante. Une façon de procéder consiste à appliquer des transitions animées à l’élément d’interface utilisateur pour que, lorsqu’un élément entre ou quitte la zone d’affichage ou pour tout autre changement visuel, l’animation attire l’attention de l’utilisateur sur ce changement. Par exemple, vos boutons peuvent apparaître ou disparaître de l’affichage en un fondu progressif et rapide plutôt qu’apparaître et disparaître de façon abrupte sans autre effet. Nous avons créé une série d’API vous permettant de créer des transitions d’animations cohérentes, qu’elles soient recommandées ou classiques. L’exemple présenté ici illustre comment appliquer une animation à un bouton pour le faire apparaître sur la zone d’affichage en le faisant glisser.


<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button> 

Dans ce code, nous ajoutons l’objet EntranceThemeTransition à la collection de transitions du bouton. Au moment du premier rendu du bouton, celui-ci vient glisser sur la zone d’affichage plutôt que d’apparaître simplement. Vous pouvez définir quelques propriétés sur l’objet d’animation afin d’ajuster la profondeur et le sens de son glissement, mais le but recherché est une API simple pour un scénario spécifique, plus précisément, pour faire apparaître un contrôle de façon attrayante.

Vous pouvez aussi définir des thèmes d’animation de transition dans les ressources de style de votre application, vous permettant ainsi d’appliquer l’effet uniformément. Cet exemple équivaut au précédent, à la différence qu’il est appliqué par le biais d’un Style :


<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Les exemples précédents appliquent une transition de thème à un seul contrôle. Cependant, les transitions de thème s’avèrent plus intéressantes encore si vous les appliquez à un conteneur d’objets. En procédant ainsi, tous les objets enfants du conteneur participent à la transition. Dans l’exemple suivant, un objet EntranceThemeTransition est appliqué à une grille (représentée par l’objet Grid) de rectangles.


<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Les rectangles enfants de l’objet Grid apparaissent par le biais d’une transition, l’un après l’autre et de façon harmonieuse, plutôt que tous ensemble comme ce serait le cas si vous appliquiez cette animation aux rectangles un à un.

Voici une vidéo qui illustre cette animation :

|

Les objets enfants d’un conteneur peuvent également se réagencer si un ou plusieurs de ces enfants changent de position. Dans l’exemple suivant, nous appliquons un objet RepositionThemeTransition à une grille de rectangles. Lorsque vous retirez l’un des rectangles, tous les autres se repositionnent en conséquence.


<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>


private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    { 	 
        rectangleItems.Items.RemoveAt(0);
    }		  		  		  
}

Cette vidéo illustre l’animation qui s’exécute pour les rectangles supprimés :

|

Vous pouvez appliquer plusieurs animations de transition à un même objet ou à un conteneur d’objets. Par exemple, si vous souhaitez que les rectangles de la liste s’affichent progressivement, mais aussi qu’ils s’animent quand ils changent de position, vous pouvez appliquer les objets RepositionThemeTransition et EntranceThemeTransition comme suit :



...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...	 	 

Plusieurs effets de transition permettent de créer des animations applicables à vos éléments d’interface utilisateur au fur et à mesure de leur ajout, de leur retrait, de leur réorganisation, etc. Les noms de ces API contiennent tous "ThemeTransition" :

APIDescription
AddDeleteThemeTransition Fournit le comportement de la transition animée pour les cas où les contrôles déclenchent l’ajout ou la suppression d’enfants ou de contenu. Généralement, le contrôle correspond à un conteneur d’éléments.
ContentThemeTransition Fournit le comportement de la transition animée pour les cas où le contenu d’un contrôle change. Vous pouvez l’appliquer en plus de l’objet AddDeleteThemeTransition.
EdgeUIThemeTransition Fournit le comportement de la transition animée pour la transition d’une (petite) interface utilisateur latérale.
EntranceThemeTransition Fournit le comportement de la transition animée lorsque les contrôles apparaissent pour la première fois.
PaneThemeTransition Fournit le comportement de la transition animée pour la transition d’une interface utilisateur de panneau (grande interface utilisateur latérale).
PopupThemeTransition Fournit le comportement de la transition animée qui s’applique aux composants contextuels des contrôles (par exemple, une interface utilisateur semblable à une info-bulle sur un objet) à mesure qu’ils apparaissent.
ReorderThemeTransition Fournit le comportement de la transition animée pour les cas où les éléments des contrôles list-view changent d’ordre. Généralement, cela se produit suite à une opération de glissement. Les différents contrôles et thèmes peuvent présenter des caractéristiques d’animation diverses.
RepositionThemeTransition Fournit le comportement de la transition animée lorsque les contrôles changent de position.

 

Animations de thème

Les animations de transition sont simples à appliquer. Vous pouvez cependant être amené à nécessiter un contrôle plus fin sur la synchronisation et sur l’ordre de vos effets d’animation. Vous pouvez ainsi faire appel à des animations de thème pour permettre cela tout en utilisant un thème Windows cohérent avec le comportement de votre animation. Les animations de thème requièrent également moins de balisage que les animations personnalisées. Nous utilisons ici l’objet FadeOutThemeAnimation pour faire disparaître progressivement un rectangle de la zone d’affichage.


<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>


// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

Contrairement aux animations de transition, une animation de thème n’a pas de déclencheur intégré (la transition) qui l’exécute automatiquement. Vous devez utiliser un objet Storyboard pour contenir une animation thématique quand vous la définissez en XAML. Vous pouvez aussi changer le comportement par défaut de l’animation. Par exemple, il vous est possible de ralentir la disparition progressive en augmentant la valeur de temps Duration de l’objet FadeOutThemeAnimation.

Remarque  Pour illustrer les techniques d’animation de base, nous utilisons du code d’application pour lancer l’animation en appelant des méthodes de Storyboard. Vous pouvez contrôler la façon dont les animations d’objet Storyboard s’exécutent à l’aide des méthodes Begin, Stop, Pause et Resume Storyboard. Toutefois, ça n’est pas comme cela qu’on inclut normalement des animations de la bibliothèque dans des applications. En général, on intègre plutôt les animations de la bibliothèque dans les modèles et styles XAML appliqués aux contrôles ou aux éléments. L’apprentissage des modèles et des états visuels est un peu plus compliqué. Vous trouverez cependant une description de l’utilisation des animations de la bibliothèque dans les états visuels dans la rubrique Animations dans une table de montage séquentiel pour les états visuels.

Vous pouvez appliquer plusieurs autres animations de thème à vos éléments d’interface utilisateur pour créer des effets d’animation. Les noms de ces API contiennent tous "ThemeAnimation" :

APIDescription
DragItemThemeAnimation Représente l’animation préconfigurée qui s’applique aux éléments déplacés par glissement.
DragOverThemeAnimation Représente l’animation préconfigurée qui s’applique aux éléments figurant sous un élément déplacé par glissement.
DropTargetItemThemeAnimation Animation préconfigurée qui s’applique à des éléments pouvant représenter des cibles de dépôt.
FadeInThemeAnimation Animation d’opacité préconfigurée qui s’applique aux contrôles au moment où ils apparaissent pour la première fois.
FadeOutThemeAnimation Animation d’opacité préconfigurée qui s’applique aux contrôles quand ils sont supprimés ou masqués de l’interface utilisateur.
PointerDownThemeAnimation Animation préconfigurée pour l’action de l’utilisateur où il appuie ou clique sur un élément.
PointerUpThemeAnimation Animation préconfigurée pour l’action de l’utilisateur qui s’exécute quand l’utilisateur appuie sur un élément et que l’action est déclenchée.
PopInThemeAnimation Animation préconfigurée qui s’applique à des composants contextuels de contrôles au fur et à mesure qu’ils apparaissent. Cette animation allie opacité et translation.
PopOutThemeAnimation Animation préconfigurée qui s’applique à des composants contextuels de contrôles au fur et à mesure de leur fermeture ou de leur suppression. Cette animation allie opacité et translation.
RepositionThemeAnimation Animation préconfigurée pour un objet au fur et à mesure de son repositionnement.
SplitCloseThemeAnimation Animation préconfigurée qui masque un élément d’interface utilisateur cible par le biais d’une animation fractionnée.
SplitOpenThemeAnimation Animation préconfigurée qui dévoile un élément d’interface utilisateur cible par le biais d’une animation fractionnée
SwipeBackThemeAnimation Animation préconfigurée qui s’applique aux contrôles lorsqu’un élément revient en glissant à son emplacement dans la disposition après une interaction de balayage.
SwipeHintThemeAnimation Animation préconfigurée qui indique qu’un mouvement de balayage est maintenant possible.

 

Animations intégrées pour les contrôles

Il existe des animations intégrées à certains des contrôles Windows Runtime, dans le cadre de leur logique de contrôle et des modèles XAML par défaut. Nous vous recommandons de vous familiariser avec ces derniers afin de pouvoir les utiliser pour vos animations dans l’interface utilisateur.

Voici la liste de certains contrôles possédant des animations intégrées :

Remarque  Cette liste n’est pas exhaustive. Pour plus d’informations, voir les rubriques « Animation ... » dans cette même zone ou les rubriques « Styles et modèles » pour les contrôles spécifiques.

Créer vos propres animations

Au cas où les animations de thème ne répondent pas à vos besoins, vous pouvez créer vos propres animations. Vous animez des objets en animant les valeurs d’une ou de plusieurs de leurs propriétés. Par exemple, vous pouvez animer la largeur d’un rectangle, l’angle d’un RotateTransform ou la valeur de la couleur d’un bouton. Ce type d’animation personnalisée porte le nom d’animation de table de montage séquentiel, pour le distinguer des animations de la bibliothèque déjà fournies par Windows Runtime comme type d’animation préconfiguré. Pour les animations de table de montage séquentiel, vous utilisez une animation qui peut changer les valeurs d’un type particulier (par exemple DoubleAnimation pour animer un Double) et placer cette animation dans un Storyboard pour la contrôler.

Afin d’être animée, la propriété que vous animez doit être une propriété de dépendance. Pour plus d’informations sur les propriétés de dépendance, voir Vue d’ensemble des propriétés de dépendance. Pour plus d’informations sur la création d’animations personnalisées dans une table de montage, notamment la façon de la cibler et de les contrôler, voir Animations dans une table de montage.

Le scénario de définition d’interface utilisateur d’application le plus courant où vous définirez des animations dans une table de montage séquentiel personnalisées concerne la définition d’états visuels pour des contrôles en XAML. Cette opération sera nécessaire si vous créez une classe de contrôle ou si vous remodélisez un contrôle existant qui possède des états visuels dans son modèle de contrôle. Pour plus d’informations, voir Animations dans une table de montage séquentiel pour les états visuels. Ces animations ne sont généralement pas du tout des transitions graduelles. Elles se produisent instantanément et constituent davantage une technique permettant de définir un ensemble de changements de propriétés pour un état. Elles n’appliquent pas nécessairement un comportement animé visuellement à une interface utilisateur bien que, comme vous le verrez, les états visuels des contrôles incluent souvent les animations de la bibliothèque proprement dites. Dans ce cas, les animations thématiques appliquent bien un changement au fil du temps, quoique généralement sur une courte durée.

Rubriques associées

Feuille de route pour la création d’applications en C# ou VB
Syntaxe du chemin de propriété
Vue d’ensemble des propriétés de dépendance
Animations dans une table de montage
Animations dans une table de montage séquentiel pour les états visuels
Animations par images clés et animations de fonctions d’accélération
Storyboard
Storyboard.TargetProperty

 

 

Afficher:
© 2014 Microsoft