Icône Animée

Une commande AnimatedIcon joue des 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.

Vous pouvez créer des animations personnalisées avec Adobe AfterEffects et rendues avec la bibliothèque Lottie-Windows à utiliser comme icône animée dans votre application WinUI 3. Pour plus d’informations, consultez Utiliser Lottie pour créer du contenu animé pour un AnimationIcon 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 d’icone animée si l’animation n’est pas déclenchée par une transition d’état visuel, et qu'elle se joue en boucle, ne se joue 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’une icône animée n’est pas obligatoire, utilisez FontIcon, SymbolIcon ou BitmapIcon à la place.

Différences entre AnimatedIcon et AnimatedVisualPlayer

AnimatedIcon est un IconElement, qui peut être utilisé n’importe où un élément ou IconElement est requis (par exemple , NavigationViewItem.Icon) et est contrôlé par le biais d’une propriété State.

AnimatedVisualPlayer est un lecteur d’animation plus général, contrôlé par des méthodes telles que 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 pour 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 temporelles 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.

Recommendations

• Consultez les instructions de l’expérience utilisateur pour Icons pour Windows Apps pour vous assurer que vos icônes correspondent aux 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.

Créer une icône animée

L’application Galerie WinUI 3 inclut des exemples interactifs de contrôles et de fonctionnalités WinUI. Obtenez l’application à partir du Microsoft Store ou parcourez le code source sur GitHub.

Ajouter un AnimatedIcon à un bouton

L'exemple suivant montre un bouton de retour qui affiche une icône de retour animée lors d'un événement PointerEntered.

• Le AnimatedBackVisualSource est une classe créée avec l’outil en ligne de commande LottieGen.
• FallbackIconSource est utilisé lorsque les animations ne peuvent pas être lues, comme sur les 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 NavigationViewItem définit automatiquement les états suivants sur l'AnimatedIcon :

• Normale
• Survol du pointeur
• Activé
• Sélectionné
• PresséSélectionné
• PointeurSursélectionné

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 l'GameSettingsIcon personnalisé dans l’exemple précédent, exécutez un fichier JSON Lottie (avec des marqueurs) via l’outil Windows LottieGen pour 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 project. Pour plus d’informations, consultez le didacticiel LottieGen .

La définition d'une nouvelle valeur pour l’état de l'AnimatedIcon détermine également une position de lecture dans l’animation Lottie pour la transition de l'état précédent vers le nouvel état. Ces positions de lecture sont également identifiées grâce à des marqueurs du 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
• Survol du pointeur
• 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 des états. Par exemple, si vous définissez un marqueur « NormalToPointerOver », le passage de l’état de l'AnimatedIcon de « Normal » à « PointerOver » provoquera son déplacement vers la position de lecture correspondante de ce marqueur.
• Ajout de « _Start » ou « _End » au nom d'un marqueur. Par exemple, en définissant les marqueurs « NormalToPointerOver_Start » et « NormalToPointerOver_End » et en changeant l’état de l’AnimatedIcon de « Normal » à « PointerOver », il se déplacera vers la position de lecture du marqueur _Start, puis s'animera jusqu’à atteindre la position du marqueur _End.

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

• Vérifiez les marqueurs « [PreviousState]To[NewState]_Start » et « [PreviousState]To[NewState]_End » du fichier fourni. Si les deux sont trouvés, jouer 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, effectuer une coupe franche vers la position de lecture « [PreviousState]To[NewState]_End ».
• Si « [PreviousState]To[NewState]_End » est introuvable, mais que « [PreviousState]To[NewState]_Start » existe, alors effectuer 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 transition directe vers la position de lecture « [PreviousState]To[NewState] ».
• Vérifier si les marqueurs IAnimatedVisualSource2 fournis contiennent le marqueur « [NewState] ». Si c'est le cas, passer directement à la position de lecture « [NewState] ».
• Vérifier si les marqueurs IAnimatedVisualSource2 fournis contiennent un marqueur se terminant par « To[NewState]_End ». Si un marqueur est trouvé avec cette terminaison, couper nettement jusqu'à la position de lecture du premier marqueur trouvé avec la terminaison appropriée.
• Vérifier si « [NewState] » peut être interprété comme un nombre flottant. Si c’est le cas, l'animation commence à partir de la position actuelle jusqu'à la valeur flottante analysée.
• Réaliser une coupure brutale à 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 AnimatedIcon 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 .

FallbackIconSource sera utilisé plutôt que l'animation lorsque les animations ne peuvent pas être lues, comme sur les 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

• Icons dans les applications Windows
• Motion pour les applications Windows