AnimadoVisualPlayer

O AnimatedVisualPlayer controle reproduz animações baseadas em vetor em um aplicativo WinUI 3. Ele foi projetado para animações Lottie — animações de alta qualidade e dimensionáveis, criadas no Adobe After Effects ou em outros aplicativos e exportadas para o formato JSON.

Use AnimatedVisualPlayer quando precisar de controle programático completo sobre a reprodução: reproduzir, pausar, parar, reverter, fazer loop ou procurar um quadro específico. Para animações vinculadas a alterações de estado visual (como efeitos de foco em botões), use AnimatedIcon em vez disso.

Pré-requisitos

Para usar animações Lottie com AnimatedVisualPlayer, você precisa:

  • O pacote NuGet Lottie-Windows do Windows Community Toolkit
  • Um arquivo JSON lottie exportado do Adobe After Effects (ou uma ferramenta compatível)
  • A ferramenta LottieGen para converter o arquivo JSON em uma classe C# ou C++/WinRT

A LottieGen ferramenta usa um .json arquivo Lottie como entrada e gera uma classe que implementa IAnimatedVisualSource. Em seguida, você referencia essa classe em XAML como a origem da animação.

Adicionar um player visual animado

Coloque um AnimatedVisualPlayer em XAML e defina sua origem para a classe Lottie gerada:

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

Onde animatedvisuals está o namespace XML para o namespace que contém a classe Lottie gerada.

Defina AutoPlay="True" se quiser que a animação seja iniciada imediatamente quando o controle for carregado.

Controle de reprodução

Use os métodos PlayAsync, Pause, Resume e Stop para controlar a animação:

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

A PlaybackRate propriedade está ativa – você pode alterá-la enquanto uma animação está sendo reproduzida. Um valor de 1 reproduz para frente em velocidade normal; -1 reproduz para trás.

Note

A chamada Pause não conclui a PlayAsync tarefa. Chame Stop para concluir e retornar ao quadro inicial.

Repetir uma animação

Para reproduzir uma animação em loop contínuo, defina o parâmetro looped em PlayAsync como true:

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

Esse é o controle correto?

Use AnimatedVisualPlayer quando precisar:

  • Controle total sobre a reprodução da animação (reproduzir, pausar, parar, retroceder, avançar/retroceder)
  • Animações de loop que são executadas independentemente do estado de controle
  • Animações que são reproduzidas uma vez em resposta a um evento único

Em vez disso, use AnimatedIcon quando:

  • A animação responde às transições de estado visual (passar o cursor, pressionado, focado)
  • Você está adicionando um ícone a um controle que aceita IconElement ou IconElementSource

Abra o aplicativo Galeria do WinUI 3 e veja AnimatedVisualPlayer em ação

Ícone da Galeria do WinUI 3 O aplicativo Da Galeria do WinUI 3 inclui exemplos interativos de controles e recursos do WinUI. Obtenha o aplicativo na Microsoft Store ou navegue pelo código-fonte em GitHub.
  • Last updated on