Giocatore visivo animato

Il AnimatedVisualPlayer controllo riproduce animazioni basate su vettori in un'app WinUI 3. È progettato per le animazioni Lottie, ovvero animazioni scalabili di alta qualità create in Adobe After Effects o in altre applicazioni ed esportate in formato JSON.

Usa AnimatedVisualPlayer quando hai bisogno di un controllo a livello di codice completo sulla riproduzione: riproduci, sospendi, arresta, inverti o cerca un fotogramma specifico. Per le animazioni associate alle modifiche dello stato visivo (ad esempio gli effetti al passaggio del mouse sui pulsanti), usare AnimatedIcon invece .

Prerequisiti

Per usare le animazioni Lottie con AnimatedVisualPlayer, è necessario:

  • Il pacchetto NuGet Lottie-Windows del Windows Community Toolkit
  • Un file JSON Lottie esportato da Adobe After Effects (o uno strumento compatibile)
  • Lo strumento LottieGen per convertire il file JSON in una classe C# o C++/WinRT

Lo LottieGen strumento accetta un .json file Lottie come input e genera una classe che implementa IAnimatedVisualSource. Si fa quindi riferimento a tale classe in XAML come origine dell'animazione.

Aggiungere un lettore visivo animato

Posizionare un oggetto AnimatedVisualPlayer in XAML e impostarne l'origine sulla classe Lottie generata:

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

Dove animatedvisuals è il namespace XML del namespace che contiene la classe Lottie generata.

Imposta AutoPlay="True" se vuoi che l'animazione venga avviata immediatamente al caricamento del controllo.

Controllare la riproduzione

Utilizzare i metodi PlayAsync, Pause, Resume e Stop per controllare l'animazione:

// 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 proprietà è attiva: è possibile modificarla durante la riproduzione di un'animazione. Valore di 1 gioca in avanti alla velocità normale; -1 gioca inverso.

Note

La chiamata a Pause non completa l'operazione PlayAsync. Chiamare Stop per completarlo e reimpostare il frame iniziale.

Ripetere un'animazione in ciclo

Per riprodurre un'animazione in un ciclo continuo, impostare il looped parametro su PlayAsynctrue :

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

Questo è il controllo giusto?

Usare AnimatedVisualPlayer quando è necessario:

  • Controllo completo sulla riproduzione dell'animazione (riproduzione, pausa, arresto, inverso, ricerca)
  • Animazioni a ciclo che vengono eseguite indipendentemente dallo stato del controllo
  • Animazioni che vengono riprodotte una sola volta in risposta a un evento monouso

Usare AnimatedIcon invece quando:

  • L'animazione risponde alle transizioni dello stato di visualizzazione (passaggio del mouse, pressione, stato attivo)
  • Si aggiunge un'icona a un controllo che accetta IconElement o IconElementSource

Aprire l'app Raccolta WinUI 3 e vedere AnimatedVisualPlayer in azione

Icona della raccolta WinUI 3 L'app Raccolta WinUI 3 include esempi interattivi di controlli e funzionalità WinUI. Ottenere l'app dal Microsoft Store o esplorare il codice sorgente in GitHub.
  • Last updated on