Animations en XAML

Les animations peuvent améliorer votre application en ajoutant un mouvement et une interactivité. En utilisant les animations de la bibliothèque d’animations Windows Runtime, vous pouvez intégrer l’apparence de Windows à votre application. Cette rubrique fournit un résumé des animations et des exemples de scénarios typiques où chacun est utilisé.

Les animations de la bibliothèque d’animations Windows Runtime offrent ces avantages :

• Mouvements qui s’alignent sur les instructions pour les animations
• Transitions rapides et fluides entre les états d’interface utilisateur qui informent mais ne distrairent pas l’utilisateur
• Comportement visuel qui indique les transitions au sein d’une application vers l’utilisateur

Par exemple, lorsque l’utilisateur ajoute un élément à une liste, au lieu du nouvel élément qui apparaît instantanément dans la liste, le nouvel élément s’anime en place. Les autres éléments de la liste s’animent à leurs nouvelles positions sur une courte période, ce qui rend la place pour l’élément ajouté. Le comportement de transition ici rend l’interaction de contrôle plus apparente à l’utilisateur.

Windows 10, version 1607 introduit une nouvelle API ConnectedAnimationService pour implémenter des animations où un élément semble animer entre les vues pendant une navigation. Cette API a un modèle d’utilisation différent de celui de l’autre API de bibliothèque d’animations. L’utilisation de ConnectedAnimationService est abordée dans la page de référence.

La bibliothèque d’animations ne fournit pas d’animations pour chaque scénario possible. Il existe des cas où vous souhaiterez peut-être créer une animation personnalisée en XAML. Pour plus d’informations, consultez animations storyboarded.

En outre, pour certains scénarios avancés tels que l’animation d’un élément en fonction de la position de défilement d’un ScrollViewer, les développeurs peuvent souhaiter utiliser l’interopérabilité de couche visuelle pour implémenter des animations personnalisées. Pour plus d’informations, consultez La couche visuelle.

Types d’animations

Le système d’animation Windows Runtime et la bibliothèque d’animations permettent aux contrôles et à d’autres parties de l’interface utilisateur d’avoir un comportement animé. Il existe plusieurs types d’animations distincts.

• Les transitions de thème sont appliquées automatiquement lorsque certaines conditions changent dans l’interface utilisateur, impliquant des contrôles ou des éléments provenant des types d’interface utilisateur XAML Windows Runtime prédéfinis. Ces transitions sont appelées transitions de thème, car les animations prennent en charge l’apparence de Windows et définissent ce que font toutes les applications pour des scénarios d’interface utilisateur particuliers lorsqu’elles passent d’un mode d’interaction à un autre. Les transitions de thème font partie de la bibliothèque d’animations.
• Les animations de thème sont des animations vers une ou plusieurs propriétés de types d’interface utilisateur XAML Windows Runtime prédéfinis. Les animations de thème diffèrent des transitions de thème, car les animations de thème ciblent un élément spécifique et existent dans des états visuels spécifiques au sein d’un contrôle, tandis que les transitions de thème sont affectées aux propriétés du contrôle qui existent en dehors des états visuels et influencent les transitions entre ces états. La plupart des contrôles XAML Windows Runtime incluent des animations de thème dans des storyboards qui font partie de leur modèle de contrôle, avec les animations déclenchées par des états visuels. Tant que vous ne modifiez pas les modèles, vous disposez de ces animations de thème intégrées disponibles pour les contrôles de votre interface utilisateur. Toutefois, si vous remplacez des modèles, vous supprimez également les animations de thème de contrôle intégrées. Pour les récupérer, vous devez définir un storyboard qui inclut des animations de thème dans l’ensemble d’états visuels du contrôle. Vous pouvez également exécuter des animations de thème à partir de storyboards qui ne se trouvent pas dans des états visuels et les démarrer avec la méthode Begin , mais c’est moins courant. Les animations de thème font partie de la bibliothèque d’animations.
• Les transitions visuelles sont appliquées lorsqu’un contrôle passe de l’un de ses états visuels définis à un autre état. Il s’agit d’animations personnalisées que vous écrivez et sont généralement liées au modèle personnalisé que vous écrivez pour un contrôle et les définitions d’état visuel dans ce modèle. L’animation s’exécute uniquement pendant le temps entre les états, et c’est généralement une courte durée, quelques secondes au maximum. Pour plus d’informations, consultez la section « VisualTransition » des animations storyboarded pour les états visuels.
• Les animations de tableau séquentiel animent la valeur d’une propriété de dépendance Windows Runtime au fil du temps. Les storyboards peuvent être définis dans le cadre d’une transition visuelle ou déclenchés lors de l’exécution par l’application. Pour plus d’informations, consultez animations storyboarded. Pour plus d’informations sur les propriétés de dépendance et leur emplacement, consultez la vue d’ensemble des propriétés de dépendance.
• Les animations connectées fournies par la nouvelle API ConnectedAnimationService permettent aux développeurs de créer facilement un effet où un élément semble animer entre les vues pendant une navigation. Cette API est disponible à partir de Windows 10 version 1607. Pour plus d’informations, consultez ConnectedAnimationService.

Animations disponibles dans la bibliothèque

Les animations suivantes sont fournies dans la bibliothèque d’animations. Cliquez sur le nom d’une animation pour en savoir plus sur leurs principaux scénarios d’utilisation, comment les définir et voir un exemple de l’animation.

• Transition de page : anime les transitions de page dans un cadre.
• Transition de contenu et d’entrée : anime un élément ou un ensemble de contenu dans ou hors vue.
• Fondu en panne et crossfade : affiche des éléments ou des contrôles temporaires, ou actualise une zone de contenu.
• Pointeur vers le haut/bas : donne un retour visuel d’un appui ou cliquez sur une vignette.
• Repositionner : déplace un élément dans une nouvelle position.
• Afficher/masquer la fenêtre contextuelle : affiche l’interface utilisateur contextuelle en haut de l’affichage.
• Afficher/masquer l’interface utilisateur de bord : diapositives basées sur la périphérie, y compris l’interface utilisateur volumineuse, telle qu’un panneau, dans ou hors vue.
• Modifications apportées aux éléments de liste : ajoute ou supprime un élément d’une liste ou réorganise les éléments.
• Glisser-déplacer : fournit des commentaires visuels lors d’une opération de glisser-déplacer.

Transition de page

Utilisez des transitions de page pour animer la navigation au sein d’une application. Étant donné que presque toutes les applications utilisent un type de navigation, les animations de transition de page sont le type d’animation de thème le plus courant utilisé par les applications. Pour plus d’informations sur les API de transition de page, consultez NavigationThemeTransition.

Transition de contenu et transition d’entrée

Utilisez des animations de transition de contenu (ContentThemeTransition) pour déplacer un élément ou un ensemble de contenu vers ou hors de l’affichage actuel. Par exemple, les animations de transition de contenu affichent le contenu qui n’était pas prêt à s’afficher lors du premier chargement de la page, ou lorsque le contenu change sur une section d’une page.

EntranceThemeTransition représente un mouvement qui peut s’appliquer au contenu lorsqu’une page ou une grande section de l’interface utilisateur est chargée pour la première fois. Ainsi, la première apparence du contenu peut offrir des commentaires différents d’une modification du contenu. EntranceThemeTransition équivaut à une navigationThemeTransition avec les paramètres par défaut, mais peut être utilisée en dehors d’un frame.

Fondu en/sortie et crossfade

Utilisez les animations fondues et fondues pour afficher ou masquer l’interface utilisateur ou les contrôles temporaires. En XAML, elles sont représentées en tant que FadeInThemeAnimation et FadeOutThemeAnimation. Voici un exemple dans une barre d’application dans laquelle de nouveaux contrôles peuvent apparaître en raison d’une interaction utilisateur. Un autre exemple est une barre de défilement temporaire ou un indicateur panoramique qui est éteint après qu’aucune entrée utilisateur n’a été détectée pendant un certain temps. Les applications doivent également utiliser le fondu dans l’animation lorsqu’elles passent d’un élément d’espace réservé à l’élément final en tant que contenu se charge dynamiquement.

Utilisez une animation crossfade pour faciliter la transition lorsque l’état d’un élément change ; par exemple, lorsque l’application actualise le contenu actuel d’une vue. La bibliothèque d’animations XAML ne fournit pas d’animation crossfade dédiée (sans équivalent pour crossFade), mais vous pouvez obtenir le même résultat à l’aide de FadeInThemeAnimation et FadeOutThemeAnimation avec un minutage superposé.

Pointeur vers le haut/vers le bas

Utilisez les animations PointerUpThemeAnimation et PointerDownThemeAnimation pour donner à l’utilisateur des commentaires sur un appui réussi ou cliquez sur une vignette. Par exemple, lorsqu’un utilisateur clique ou appuie sur une vignette, l’animation pointeur vers le bas est lue. Une fois le clic ou l’appui libéré, l’animation pointeur vers le haut est lue.

Repositionner

Utilisez les animations de repositionnement (RepositionThemeAnimation ou RepositionThemeTransition) pour déplacer un élément vers une nouvelle position. Par exemple, le déplacement des en-têtes dans un contrôle d’éléments utilise l’animation de repositionnement.

Afficher/masquer la fenêtre contextuelle

Utilisez PopInThemeAnimation et PopOutThemeAnimation lorsque vous affichez et masquez une interface utilisateur contextuelle contextuelle ou similaire en haut de l’affichage actuel. PopupThemeTransition est une transition de thème qui est utile si vous souhaitez faire disparaître une fenêtre contextuelle.

Afficher/masquer l’interface utilisateur edge

Utilisez l’animation EdgeUIThemeTransition pour faire glisser une interface utilisateur petite et basée sur les bords vers et hors vue. Par exemple, utilisez ces animations lorsque vous affichez une barre d’application personnalisée en haut ou en bas de l’écran ou une surface d’interface utilisateur pour les erreurs et les avertissements en haut de l’écran.

Utilisez l’animation PaneThemeTransition pour afficher et masquer un volet ou un panneau. Il s’agit d’une interface utilisateur basée sur des périphéries volumineuses, comme un clavier personnalisé ou un volet Office.

Modifications apportées aux éléments de liste

Utilisez l’animation AddDeleteThemeTransition pour ajouter un comportement animé lorsque vous ajoutez ou supprimez un élément dans une liste existante. Pour ajouter, la transition repositionne d’abord les éléments existants dans la liste pour créer de l’espace pour les nouveaux éléments, puis ajouter les nouveaux éléments. Pour suppression, la transition supprime les éléments d’une liste et, si nécessaire, repositionne les éléments de liste restants une fois les éléments supprimés.

Il existe également une reorderThemeTransition distincte que vous appliquez si un élément change de position dans une liste. Cela est animé différemment de la suppression d’un élément et de son ajout dans un nouvel emplacement avec les animations de suppression/ajout associées.

Notez que ces animations sont incluses dans les modèles ListView et GridView par défaut. Vous n’avez donc pas besoin d’ajouter manuellement ces animations si vous utilisez déjà ces contrôles.

Glisser-déplacer

Utilisez les animations de glisser (DragItemThemeAnimation, DragOverThemeAnimation) et l’animation de déplacement (DropTargetItemThemeAnimation) pour envoyer des commentaires visuels lorsque l’utilisateur fait glisser ou supprime un élément.

Lorsqu’elles sont actives, les animations indiquent à l’utilisateur que la liste peut être réorganisé autour d’un élément supprimé. Il est utile aux utilisateurs de savoir où l’élément sera placé dans une liste s’il est supprimé à l’emplacement actuel. Les animations fournissent des commentaires visuels indiquant qu’un élément déplacé peut être supprimé entre deux autres éléments de la liste et que ces éléments seront déplacés hors de la route.

Utilisation d’animations avec des contrôles personnalisés

Le tableau suivant récapitule nos recommandations pour lesquelles vous devez utiliser l’animation lorsque vous créez une version personnalisée de ces contrôles Windows Runtime :

Exemples d’animation de transition

Dans l’idéal, votre application utilise des animations pour améliorer l’interface utilisateur ou pour la rendre plus attrayante sans gêner vos utilisateurs. Pour ce faire, vous pouvez appliquer des transitions animées à l’interface utilisateur afin que lorsque quelque chose entre ou quitte l’écran ou change, l’animation attire l’attention de l’utilisateur sur la modification. Par exemple, vos boutons peuvent rapidement s’évanouir en mode hors vue plutôt que d’apparaître et disparaître. Nous avons créé un certain nombre d’API qui peuvent être utilisées pour créer des transitions d’animation recommandées ou classiques cohérentes. L’exemple ci-dessous montre comment appliquer une animation à un bouton afin qu’elle glisse rapidement en mode affichage.

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

Dans ce code, nous ajoutons l’objet EntranceThemeTransition à la collection de transition du bouton. Maintenant, lorsque le bouton est rendu pour la première fois, il glisse rapidement dans l’affichage plutôt que simplement apparaître. Vous pouvez définir quelques propriétés sur l’objet d’animation afin d’ajuster la distance à laquelle il glisse et à partir de quelle direction, mais il est vraiment destiné à être une API simple pour un scénario spécifique, c’est-à-dire pour faire une entrée attrayante.

Vous pouvez également définir des thèmes d’animation de transition dans les ressources de style de votre application, ce qui vous permet d’appliquer l’effet uniformément. Cet exemple équivaut au précédent, mais il est appliqué à l’aide 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 contrôle individuel. Toutefois, les transitions de thème sont encore plus intéressantes lorsque vous les appliquez à un conteneur d’objets. Lorsque vous effectuez cette opération, tous les objets enfants du conteneur prennent part à la transition. Dans l’exemple suivant, une entréeThemeTransition est appliquée à une grille 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 la grille passent en vue un après l’autre d’une manière visuelle agréable plutôt que tout à la fois comme cela serait le cas si vous avez appliqué cette animation individuellement aux rectangles.

Voici une démonstration de cette animation :

Les objets enfants d’un conteneur peuvent également recréer lorsqu’un ou plusieurs de ces enfants changent de position. Dans l’exemple suivant, nous appliquons un RepositionThemeTransition à une grille de rectangles. Lorsque vous supprimez l’un des rectangles, tous les autres rectangles passent à nouveau à leur nouvelle position.

<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);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

Vous pouvez appliquer plusieurs animations de transition à un seul objet ou conteneur d’objets. Par exemple, si vous souhaitez que la liste des rectangles s’anime dans l’affichage et s’anime également lorsqu’ils changent de position, vous pouvez appliquer RepositionThemeTransition et EntranceThemeTransition comme suit :

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

Il existe plusieurs effets de transition pour créer des animations sur vos éléments d’interface utilisateur à mesure qu’ils sont ajoutés, supprimés, réorganisé, et ainsi de suite. Les noms de ces API contiennent tous « ThemeTransition » :

Exemples d’animation de thème

Les animations de transition sont simples à appliquer. Mais vous pouvez avoir un peu plus de contrôle sur le minutage et l’ordre de vos effets d’animation. Vous pouvez utiliser des animations de thème pour activer davantage de contrôle tout en utilisant un thème cohérent pour le comportement de votre animation. Les animations de thème nécessitent également moins de balisage que les animations personnalisées. Ici, nous utilisons FadeOutThemeAnimation pour faire disparaître un rectangle hors vue.

<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();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::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 storyboard pour contenir une animation de thème lorsque vous la définissez en XAML. Vous pouvez également modifier le comportement par défaut de l’animation. Par exemple, vous pouvez ralentir le fondu en augmentant la valeur durée sur FadeOutThemeAnimation.

Remarque Pour afficher les techniques d’animation de base, nous utilisons du code d’application pour démarrer l’animation en appelant des méthodes de Storyboard. Vous pouvez contrôler la façon dont les animations storyboard s’exécutent à l’aide des méthodes Begin, Stop, Pause et Resume Storyboard. Toutefois, ce n’est généralement pas la façon dont vous incluez des animations de bibliothèque dans les applications. Au lieu de cela, vous intégrez généralement les animations de bibliothèque dans les styles et modèles XAML appliqués aux contrôles ou aux éléments. En savoir plus sur les modèles et les états visuels est un peu plus impliqué. Mais nous allons aborder la façon dont vous utiliseriez des animations de bibliothèque dans des états visuels dans le cadre des animations storyboarded pour la rubrique é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 » :

Créer vos propres animations

Lorsque les animations de thème ne sont pas suffisantes pour vos besoins, vous pouvez créer vos propres animations. Vous animez des objets en ananimant une ou plusieurs de leurs valeurs de propriété. Par exemple, vous pouvez animer la largeur d’un rectangle, l’angle d’un RotateTransform ou la valeur de couleur d’un bouton. Nous termeons ce type d’animation personnalisée une animation de table séquentiel, pour la distinguer des animations de bibliothèque que Windows Runtime fournit déjà en tant que type d’animation préconfiguré. Pour les animations storyboarded, vous utilisez une animation qui peut modifier les valeurs d’un type particulier (par exemple, DoubleAnimation pour animer un double) et placer cette animation dans un Storyboard pour la contrôler.

Pour être animé, 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, consultez la vue d’ensemble des propriétés de dépendance. Pour plus d’informations sur la création d’animations storyboard personnalisées, notamment sur la façon de cibler et de les contrôler, consultez les animations storyboarded.

La plus grande zone de définition de l’interface utilisateur de l’application en XAML où vous allez définir des animations storyboard personnalisées est si vous définissez des états visuels pour les contrôles en XAML. Vous effectuerez cette opération soit parce que vous créez une classe de contrôle, soit parce que vous re-templatez un contrôle existant qui a des états visuels dans son modèle de contrôle. Pour plus d’informations, consultez les animations storyboarded pour les états visuels.