AnimatedVisualPlayer

Le contrôle AnimatedVisualPlayer affiche des animations vectorielles dans une application WinUI 3. Il est conçu pour les animations Lottie : animations évolutives de haute qualité créées dans Adobe After Effects ou d’autres applications et exportées au format JSON.

Utilisez AnimatedVisualPlayer lorsque vous avez besoin d’un contrôle programmatique complet de la lecture : lire, mettre en pause, arrêter, inverser la lecture, boucler ou accéder à une image spécifique. Pour les animations liées aux modifications d’état visuel (comme les effets de pointage sur les boutons), utilisez AnimatedIcon à la place.

Prerequisites

Pour utiliser des animations Lottie avec AnimatedVisualPlayer, vous avez besoin des éléments suivants :

L’outil LottieGen prend un .json fichier Lottie comme entrée et génère une classe qui implémente IAnimatedVisualSource. Vous référencez ensuite cette classe en XAML comme source d’animation.

Ajouter un lecteur visuel animé

Placez un AnimatedVisualPlayer dans XAML et définissez sa source sur la classe Lottie générée :

<AnimatedVisualPlayer x:Name="Player" AutoPlay="False">
    <animatedvisuals:LottieLogo1/>
</AnimatedVisualPlayer>

Où animatedvisuals est l’espace de noms XML correspondant à l’espace de noms qui contient votre classe Lottie générée.

Définissez AutoPlay="True" si vous souhaitez que l’animation démarre immédiatement lorsque le contrôle se charge.

Contrôler la lecture

Utilisez les méthodes PlayAsync, Pause, Resume et Stop pour contrôler l’animation :

// Play the animation forward
Player.PlaybackRate = 1;
await Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: false);

// Pause and resume
Player.Pause();
Player.Resume();

// Stop and reset to the first frame
Player.Stop();

// Play in reverse
Player.PlaybackRate = -1;
await Player.PlayAsync(fromProgress: 1, toProgress: 0, looped: false);

La PlaybackRate propriété est active : vous pouvez la modifier pendant la lecture d’une animation. Une valeur de 1 lance la lecture vers l’avant à vitesse normale ; -1 lance la lecture en sens inverse.

Note

L’appel de Pause ne termine pas la tâche PlayAsync. Appelez Stop pour le terminer et revenir à l'image initiale.

Boucler une animation

Pour faire jouer une animation en boucle continue, définissez le paramètre looped de PlayAsync sur true :

await Player.PlayAsync(fromProgress: 0, toProgress: 1, looped: true);

Est-ce le contrôle approprié ?

Utilisez AnimatedVisualPlayer quand vous avez besoin des éléments suivants :

  • Contrôle total de la lecture d’animation (lecture, pause, arrêt, inverse, recherche)
  • Animations en boucle qui s’exécutent indépendamment de l’état du contrôle
  • Animations qui s’exécutent une fois en réponse à un événement à usage unique

Utilisez AnimatedIcon à la place lorsque :

  • L’animation réagit aux transitions entre états visuels (survol, appui, focus)
  • Vous ajoutez une icône à un contrôle qui accepte IconElement ou IconElementSource

Ouvrez l’application Galerie WinUI 3 et consultez AnimatedVisualPlayer en action

Icône galerie WinUI 3 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.
  • Last updated on