Animovaný vizuální přehrávač

Ovládací AnimatedVisualPlayer prvek přehrává vektorové animace v aplikaci WinUI 3. Je navržený pro animace Lottie – vysoce kvalitní, škálovatelné animace vytvořené v Adobe After Effects nebo jiných aplikacích a exportované do formátu JSON.

Použijte AnimatedVisualPlayer, když potřebujete úplnou programátorskou kontrolu nad přehráváním: přehrávat, pozastavit, zastavit, přehrávat pozpátku, opakovat ve smyčce nebo přejít na konkrétní snímek. U animací svázaných se změnami stavu vizuálu (například efekty přechodu na tlačítka) použijte AnimatedIcon místo toho.

Předpoklady

Pokud chcete používat animace Lottie s AnimatedVisualPlayer, potřebujete:

Nástroj LottieGen přebírá jako .json vstup soubor Lottie a generuje třídu, která implementuje IAnimatedVisualSource. Pak na tuto třídu v XAML odkazujete jako na zdroj animace.

Přidání animovaného vizuálního přehrávače

Umístěte kód AnimatedVisualPlayer XAML a nastavte jeho zdroj na vygenerovanou třídu Lottie:

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

Kde animatedvisuals je jmenný prostor XML pro jmenný prostor obsahující vaši vygenerovanou třídu Lottie.

Nastavte AutoPlay="True" , pokud chcete, aby se animace spustila okamžitě, když se ovládací prvek načte.

Ovládání přehrávání

Použijte metody PlayAsync, Pause, Resume a Stop k ovládání animace:

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

Vlastnost PlaybackRate je živá – během přehrávání animace ji můžete změnit. Hodnota 1 přehrává normální rychlostí; -1 přehrává pozpátku.

Note

Volání Pause nedokončí úlohu PlayAsync. Zavolejte Stop, chcete-li to dokončit a resetovat do počátečního snímku.

Opakovat animaci

Pokud chcete přehrát animaci v souvislé smyčce, nastavte looped parametr na PlayAsynctrue:

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

Je to správná kontrola?

Použijte AnimatedVisualPlayer , když potřebujete:

  • Úplné řízení přehrávání animací (přehrávání, pozastavení, zastavení, obrácení, hledání)
  • Opakující se animace, které běží nezávisle na stavu ovládacího prvku
  • Animace, které se přehrávají jednou v reakci na jednorázovou událost

Místo toho použijte AnimatedIcon :

  • Animace reaguje na přechody vizuálního stavu (najetí myší, stisknutí, fokus)
  • Přidáváte ikonu do ovládacího prvku, který přijímá IconElement nebo IconElementSource.

Otevřete aplikaci Galerie WinUI 3 a podívejte se na AnimatedVisualPlayer v akci.

Ikona galerie WinUI 3 Aplikace Galerie WinUI 3 obsahuje interaktivní příklady ovládacích prvků a funkcí WinUI. Získejte aplikaci z Microsoft Store nebo vyhledejte zdrojový kód na GitHub.
  • Last updated on