AnimatedIcon

Un contrôle AnimatedIcon lit les images animées en réponse à l’interaction de l’utilisateur et aux changements de l’état visuel.

Les icônes animées peuvent attirer l’attention sur un composant de l’interface utilisateur, comme le bouton Suivant dans un didacticiel, ou simplement refléter l’action associée à l’icône de manière ludique et intéressante.

Les animations personnalisées peuvent être créées avec Adobe AfterEffects et rendues avec la bibliothèque Lottie-Windows en vue de les utiliser comme des icônes animées dans votre application WinUI. Pour en savoir plus, veuillez consulter Utiliser Lottie pour créer du contenu animé destiné à un AnimatedIcon plus loin dans cet article.

L’exemple suivant montre une icône de recherche animée de base qui a été créée dans Adobe AfterEffects et rendue via Lottie.

Est-ce le contrôle approprié ?

Utilisez le contrôle AnimatedIcon lorsque l’icône d’un contrôle doit s’animer en réponse à l'interaction de l'utilisateur avec le contrôle, par exemple lorsqu’un utilisateur pointe le curseur sur un bouton ou clique dessus.

N’utilisez pas AnimatedIcon si l’animation n’est pas déclenchée par la transition d'un état visuel, et se lit en boucle, ne se lit qu’une seule fois ou peut être mise en pause. Dans ces cas, utilisez plutôt AnimatedVisualPlayer.

N’utilisez pas AnimatedIcon pour autre chose qu’une icône, ou lorsque le contrôle ne prend pas en charge une propriété IconElement ou IconElementSource. Dans ces cas, utilisez plutôt AnimatedVisualPlayer.

Lorsqu’il n’est pas nécessaire de créer une icône animée, utilisez plutôt FontIcon, SymbolIcon ou BitmapIcon.

Différences entre AnimatedIcon et AnimatedVisualPlayer

AnimatedIcon est un IconElement, qui peut être utilisé chaque fois qu'un élément ou IconElement est nécessaire (par exemple, NavigationViewItem.Icon) et qu'il est contrôlé via une propriété État.

AnimatedVisualPlayer est un lecteur d’animation plus général, contrôlé par des méthodes comme Play et Pause, et peut être utilisé n’importe où dans une application.

Utiliser Lottie pour créer du contenu animé destiné à un AnimatedIcon

Le processus de définition d’une animation pour un AnimatedIcon commence de la même façon que pour un AnimatedVisualPlayer. Vous devez créer, ou obtenir, le fichier Lottie correspondant à l’icône que vous souhaitez ajouter, et exécuter ce fichier via LottieGen. LottieGen génère du code pour une classe C++/WinRT que vous pouvez ensuite instancier et utiliser avec un AnimatedIcon.

Vous pouvez également établir des marqueurs lors de la définition de l’animation pour indiquer des positions de temps de lecture. Vous pouvez ensuite définir l’état AnimatedIcon sur ces marqueurs. Par exemple, si vous avez une position de lecture dans le fichier Lottie marqué « PointerOver », vous pouvez définir l’état AnimatedIcon sur « PointerOver » et déplacer l’animation vers cette position de lecture.

La définition d’une propriété de couleur dans votre animation Lottie nommée « Foreground » vous permet de définir la couleur à l’aide de la propriété AnimatedIcon.Foreground.

Recommandations

• Veuillez consulter les recommandations en matière d’expérience utilisateur Icônes pour les applications Windows afin de vous assurer que vos icônes respectent les principes de conception.
• Limitez le nombre d’icônes animées sur un même écran ou affichage. N'animez des icônes que pour attirer l’attention de l’utilisateur sur un endroit où il doit agir ou lorsqu’il effectue une action.

UWP et WinUI 2

AnimatedIcon pour les applications UWP nécessite WinUI 2. Pour plus d’informations, notamment des instructions d’installation, consultez WinUI 2. Les API de ce contrôle existent dans l’espace de noms Microsoft.UI.Xaml.Controls.

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Consultez Bien démarrer avec WinUI 2 pour plus d’informations.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

Créer une icône animée

L’application WinUI 3 Gallery comprend des exemples interactifs de la plupart des contrôles et des fonctionnalités WinUI 3. Procurez-vous l’application sur le Microsoft Store ou le code source sur GitHub.

Ajouter un AnimatedIcon à un bouton

L’exemple suivant montre un bouton Retour qui affiche une icône animée de retour sur un événement PointerEntered .

• Le AnimatedBackVisualSource est une classe créée avec l’outil en ligne de commande LottieGen.
• Le FallbackIconSource est utilisé lorsque les animations ne peuvent pas être lues, comme dans le cas des versions antérieures de Windows qui ne prennent pas en charge les animations Lottie.
• Si l’utilisateur désactive les animations dans ses paramètres système, AnimatedIcon affiche l'image finale de la transition d’état dans laquelle le contrôle se trouvait.

<Button PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <AnimatedIcon x:Name='BackAnimatedIcon'>
        <AnimatedIcon.Source>
            <animatedvisuals:AnimatedBackVisualSource/>
        </AnimatedIcon.Source>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Back'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.BackAnimatedIcon, "Normal");
}

Ajouter un AnimatedIcon à NavigationViewItem

Le contrôle NavigationViewItem définit automatiquement des états courants sur un AnimatedIcon sur la base de l’état du contrôle, à condition que ces marqueurs soient définis dans l’animation Lottie.

L’exemple suivant montre comment définir une animation personnalisée (GameSettingsIcon) générée par l’outil LottieGen :

<NavigationView.MenuItems>
    <NavigationViewItem Content = "Game Settings">
        <NavigationViewItem.Icon>
            <AnimatedIcon x:Name='GameSettingsIcon'>
                <AnimatedIcon.Source>
                    <animatedvisuals:AnimatedSettingsVisualSource/>
                </AnimatedIcon.Source>
                <AnimatedIcon.FallbackIconSource>
                    <FontIconSource FontFamily="Segoe MDL2 Assets" Glyph="&#xE713;"/>
                </AnimatedIcon.FallbackIconSource>
            </AnimatedIcon>
        </NavigationViewItem.Icon>
    </NavigationViewItem>
</NavigationView.MenuItems>

Le contrôle NavigationViewItem définit automatiquement les états suivants sur l'AnimatedIcon :

• Normale
• PointerOver
• Activé
• Volumes sélectionnés
• PressedSelected
• PointerOverSelected

Si GameSettingsIcon possède un marqueur défini pour « NormalToPointerOver », l’icône sera animée jusqu’à ce que le pointeur se déplace sur NavigationViewItem. Pour en savoir plus sur la création de marqueurs, reportez-vous à la section suivante.

Définir des marqueurs AnimatedIcon

Pour créer la GameSettingsIcon personnalisée de l’exemple précédent, exécutez un fichier JSON Lottie (avec des marqueurs) via l’outil LottieGen Windows afin de générer le code d’animation en tant que classe C#.

Une fois que vous avez exécuté votre fichier Lottie via LottieGen, vous pouvez ajouter la classe de sortie CodeGen à votre projet. Pour en savoir plus, consultez le didacticiel LottieGen.

La définition d'une nouvelle valeur pour l’état de l'AnimatedIcon définit également une position de lecture dans l’animation Lottie pour la transition de l’ancien vers le nouvel état. Ces positions de lecture sont également identifiées par des marqueurs dans le fichier Lottie. Il est également possible de définir des marqueurs spécifiques pour le début ou la fin de la transition.

Par exemple, le contrôle AutoSuggestBox utilise un AnimationIcon qui s’anime avec les états suivants :

• Normale
• PointerOver
• Activé

Dans votre fichier Lottie, vous pouvez définir des marqueurs portant ces noms d’état. Vous pouvez également définir des marqueurs de la manière suivante :

• Insertion de « To » entre les noms d’état. Par exemple, si vous définissez un marqueur « NormalToPointerOver », le passage de l’état de l'AnimatedIcon de « Normal » à « PointerOver » entraîne son déplacement vers la position de lecture de ce marqueur.
• Ajout de « _Start » ou « _End » au nom d'un marqueur. Par exemple, la définition des marqueurs « NormalToPointerOver_Start » et « NormalToPointerOver_End » et le passage de l’état de l'AnimatedIcon de « Normal » à « PointerOver » conduisent celui-ci à se déplacer jusqu'à la position de lecture du marqueur _Start, puis à lire l'animation jusqu'à la position de lecture du marqueur _End.

L’algorithme exact utilisé pour mapper l’état de l'AnimatedIcon change aux positions de lecture des marqueurs :

• Vérifier les marqueurs « [PreviousState]To[NewState]_Start » et « [PreviousState]To[NewState]_End » du fichier fourni. Si les deux existent, lire l’animation de « [PreviousState]To[NewState]_Start » à « [PreviousState]To[NewState]_End ».
• Si « [PreviousState]To[NewState]_Start » est introuvable, mais que « [PreviousState]To[NewState]_End » existe, réaliser une coupe franche vers la position de lecture « [PreviousState]To[NewState]_End ».
• Si « [PreviousState]To[NewState]_End » est introuvable, mais que « [PreviousState]To[NewState]_Strat » existe, réaliser une coupe franche vers la position de lecture « [PreviousState]To[NewState]_Start ».
• Vérifier si les marqueurs IAnimatedVisualSource2 fournis contiennent le marqueur « [PreviousState]To[NewState] ». Si c'est le cas, réaliser une coupe franche vers la position de lecture « [PreviousState]To[NewState] ».
• Vérifier si les marqueurs IAnimatedVisualSource2 fournis contiennent le marqueur « [NewState] ». Si c'est le cas, réaliser une coupe franche vers la position de lecture « [NewState] ».
• Vérifier si les marqueurs IAnimatedVisualSource2 fournis contiennent un marqueur se terminant par « To[NewState]_End ». Si c'est le cas, réaliser une coupe franche jusqu'au premier marqueur trouvé dont la position de lecture contient la terminaison appropriée.
• Vérifier si « [NewState] » est analysé jusqu'à un nombre flottant. Si c’est le cas, l'animation est lue entre la position actuelle et le nombre flottant analysé.
• Réaliser une coupe franche à la position de lecture 0.0.

L’exemple suivant montre le format des marqueurs dans un fichier JSON Lottie. Pour en savoir plus, consultez les recommandations en matière d’AnimatedIcon.

"markers":[{"tm":0,"cm":"NormalToPointerOver_Start","dr":0},{"tm":9,"cm":"NormalToPointerOver_End","dr":0},

{"tm":10,"cm":"NormalToPressed_Start","dr":0},{"tm":19,"cm":"NormalToPressed_End","dr":0},

{"tm":20,"cm":"PointerOverToNormal_Start","dr":0},{"tm":29,"cm":"PointerOverToNormal_End","dr":0},

{"tm":30,"cm":"PointerOverToPressed_Start","dr":0},{"tm":39,"cm":"PointerOverToPressed_End","dr":0},

{"tm":40,"cm":"PressedToNormal_Start","dr":0},{"tm":49,"cm":"PressedToNormal_End","dr":0},

{"tm":50,"cm":"PressedToPointerOver_Start","dr":0},{"tm":69,"cm":"PressedToPointerOver_End","dr":0},

{"tm":90,"cm":"PressedToNormal_Start","dr":0},{"tm":99,"cm":"PressedToNormal_End","dr":0},

{"tm":100,"cm":"PressedToPointerOver_Start","dr":0},{"tm":101,"cm":"PressedToPointerOver_End","dr":0}]

Ajout d’un AnomatedIcon autonome

L’exemple suivant correspond à un bouton sur lequel l’utilisateur clique pour accepter une invite.

La MyAcceptAnimation classe est créée avec l’outil LottieGen.

Le FallbackIconSource est utilisé plutôt que l’animation lorsque les animations ne peuvent pas être lues, comme dans le cas des versions antérieures de Windows qui ne prennent pas en charge les animations Lottie.

Si l’utilisateur final désactive les animations dans ses paramètres système, AnimatedIcon affiche l'image finale de la transition d’état dans laquelle le contrôle se trouvait.

<Button PointerEntered="HandlePointerEntered" PointerExited="HandlePointerExited">
    <AnimatedIcon x:Name='AnimatedIcon1'>
        <local:MyAcceptAnimation/>
        <AnimatedIcon.FallbackIconSource>
            <SymbolIconSource Symbol='Accept'/>
        </AnimatedIcon.FallbackIconSource>
    </AnimatedIcon>
</Button>

private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.AnimatedIcon1, "PointerOver");
}

private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
    AnimatedIcon.SetState(this.StackPaAnimatedIcon1nel1, "Normal");
}

Articles connexes

• Icônes dans les applications Windows
• Mouvement pour les applications Windows