Ícone Animado

Um controle AnimatedIcon reproduz imagens animadas em resposta à interação do usuário e às alterações de estado visual.

Os ícones animados podem chamar a atenção para um componente da interface do usuário, como o botão seguinte em um tutorial, ou simplesmente refletir a ação associada ao ícone de uma maneira divertida e interessante.

Animações personalizadas podem ser criadas com o Adobe AfterEffects e renderizadas com a biblioteca Lottie-Windows para usar como um ícone animado em seu aplicativo WinUI. Para obter mais detalhes, consulte Usar Lottie para criar conteúdos animados para um Ícone Animado mais adiante neste artigo.

O exemplo a seguir mostra um ícone de pesquisa animado básico que foi criado no Adobe AfterEffects e renderizado por meio do Lottie.

Será este o controlo correto?

Use o controle AnimatedIcon quando o ícone de um controle precisar ser animado em resposta à interação do usuário com o controle, como quando um usuário passa o mouse sobre um botão ou clica nele.

Não use um AnimatedIcon se a animação não for acionada por uma transição de estado visual e for reproduzida em um loop, reproduzida apenas uma vez ou puder ser pausada. Em vez disso, use AnimatedVisualPlayer.

Não use AnimatedIcon para nada além de um ícone, ou onde o controle não suporta uma propriedade IconElement ou IconElementSource. Em vez disso, use AnimatedVisualPlayer.

Quando um ícone animado não for necessário, use FontIcon, SymbolIcon ou BitmapIcon .

Diferenças entre AnimatedIcon e AnimatedVisualPlayer

AnimatedIcon é um IconElement, que pode ser utilizado em qualquer lugar onde seja necessário um elemento ou IconElement (como NavigationViewItem.Icon), e é controlado através de uma propriedade de estado.

AnimatedVisualPlayer é um player de animação mais geral, que é controlado através de métodos como Play e Pause, e pode ser usado em qualquer lugar em um aplicativo.

Use Lottie para criar conteúdo animado para um AnimatedIcon

A definição de uma animação para um AnimatedIcon começa da mesma forma que o processo para definir uma animação para um AnimatedVisualPlayer. Você deve criar ou obter o arquivo Lottie para o ícone que deseja adicionar e executar esse arquivo através do LottieGen. LottieGen gera código para uma classe C++/WinRT que você pode instanciar e usar com um AnimatedIcon.

Você também pode definir marcadores na definição de animação para indicar posições de tempo de reprodução. Em seguida, você pode definir o estado AnimatedIcon para esses marcadores. Por exemplo, se tiver uma posição de reprodução no ficheiro Lottie marcado como "PointerOver", pode definir o estado AnimatedIcon como "PointerOver" e mover a animação para essa posição de reprodução.

Definir uma propriedade de cor em sua animação Lottie chamada "Primeiro plano" permite que você defina a cor usando a propriedade AnimatedIcon.Foreground.

Recommendations

• Consulte as diretrizes de experiência do usuário para ícones para aplicativos do Windows para garantir que seus ícones correspondam aos princípios de design.
• Limite o número de ícones animados em uma única tela ou visualização. Anime apenas ícones para chamar a atenção do usuário para onde ele precisa executar uma ação ou quando está executando uma ação.

Criar um ícone animado

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Adicionar um AnimatedIcon a um botão

O exemplo a seguir demonstra um botão de voltar que exibe um ícone de voltar animado no evento PointerEntered.

• A AnimatedBackVisualSource é uma classe criada com a ferramenta de linha de comando LottieGen .
• O FallbackIconSource é usado quando animações não podem ser reproduzidas, como em versões mais antigas do Windows que não suportam animações Lottie.
• Se o usuário desativar as animações em suas configurações do sistema, AnimatedIcon exibirá o quadro final da transição de estado em que os controles estavam.

<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");
}

Adicionar um AnimatedIcon a NavigationViewItem

O controle NavigationViewItem define automaticamente estados comuns em um AnimatedIcon com base no estado do controle, se esses marcadores forem definidos na animação Lottie.

Por exemplo, o exemplo a seguir mostra como definir uma animação personalizada (GameSettingsIcon) que foi gerada pela ferramenta 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>

O NavigationViewItem define automaticamente os seguintes estados no AnimatedIcon:

• Normal
• PointerOver
• Pressionado
• Selecionados
• Pressionado-Selecionado
• CursorSobreSelecionado

Se GameSettingsIcon tiver um marcador definido para "NormalToPointerOver", o ícone será animado até que o ponteiro se mova sobre o NavigationViewItem. Consulte a seção a seguir para obter mais informações sobre como criar marcadores.

Definir marcadores AnimatedIcon

Para criar o personalizado GameSettingsIcon no exemplo anterior, execute um arquivo JSON Lottie (com marcadores) através da ferramenta Windows LottieGen para gerar o código de animação como uma classe C#.

Depois de executar seu arquivo Lottie através do LottieGen, você pode adicionar a classe de saída CodeGen ao seu projeto. Consulte o tutorial LottieGen para obter mais informações.

Definir o estado do AnimatedIcon para um novo valor também ajusta uma posição de reprodução na animação Lottie para a transição do estado antigo para o novo estado. Essas posições de reprodução também são identificadas com marcadores no arquivo Lottie. Marcadores específicos para o início ou o fim da transição também podem ser definidos.

Por exemplo, o controlo AutoSuggestBox usa um AnimatedIcon que anima com os seguintes estados:

• Normal
• PointerOver
• Pressionado

Você pode definir marcadores em seu arquivo Lottie com esses nomes de estado. Você também pode definir marcadores da seguinte maneira:

• Insira "Para" entre os nomes dos estados. Por exemplo, se definires um marcador "NormalToPointerOver", alterar o estado do ícone animado de "Normal" para "PointerOver" fará com que este se mova para a posição de reprodução desse marcador.
• Acrescentar "_Start" ou "_End" a um nome de marcador. Por exemplo, ao definir os marcadores "NormalToPointerOver_Start" e "NormalToPointerOver_End" e mudar o estado do AnimatedIcon de "Normal" para "PointerOver", ele irá saltar para a posição de reprodução do marcador _Start e depois animar até a posição de reprodução _End.

O algoritmo exato usado para mapear alterações de estado do AnimatedIcon para posições de marcador durante a reprodução:

• Verifique os marcadores do arquivo fornecido para os marcadores "[PreviousState]To[NewState]_Start" e "[PreviousState]To[NewState]_End". Se ambos forem encontrados, reproduza a animação de "[PreviousState]To[NewState]_Start" para "[PreviousState]To[NewState]_End".
• Se "[PreviousState]To[NewState]_Start" não for encontrado, mas "[PreviousState]To[NewState]_End" for encontrado, então faça uma transição direta para a posição de reprodução "[PreviousState]To[NewState]_End".
• Se "[PreviousState]To[NewState]_End" não for encontrado, mas "[PreviousState]To[NewState]_Start" for encontrado, então avance diretamente para a posição de reprodução de "[PreviousState]To[NewState]_Start".
• Verifique se os marcadores fornecidos do IAnimatedVisualSource2 correspondem ao marcador "[PreviousState]To[NewState]". Se for encontrado, faça um corte abrupto na posição de reprodução "[PreviousState]To[NewState]".
• Verifique os marcadores fornecidos por IAnimatedVisualSource2 para o marcador "[NewState]". Se for encontrado, então faça um corte seco para a posição de reprodução "[NewState]".
• Verifique se os marcadores IAnimatedVisualSource2 fornecidos têm algum marcador que termine com "To[NewState]_End". Se for encontrado algum marcador que tenha esse final, corte duro para o primeiro marcador encontrado com a posição de reprodução do final apropriado.
• Verifique se "[NewState]" é convertido para um valor float. Se isso acontecer, animado da posição atual para o flutuador analisado.
• Transição abrupta para a posição de reprodução 0.0.

O exemplo a seguir mostra o formato de marcador em um arquivo JSON Lottie. Consulte as diretrizes do AnimatedIcon para obter mais detalhes.

"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}]

Adicionando um AnimatedIcon independente

O exemplo a seguir é um botão no qual o usuário clica para Aceitar um prompt.

A MyAcceptAnimation classe é criada com a ferramenta LottieGen .

O FallbackIconSource será usado em vez da animação quando as animações não puderem ser reproduzidas, como em versões mais antigas do Windows que não suportam animações Lottie.

Se o usuário final desativar as animações em suas configurações do sistema, o AnimatedIcon exibirá o quadro final da transição de estado em que os controles estavam.

<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");
}

UWP e WinUI 2

O AnimatedIcon para aplicativos UWP requer WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem no namespace Microsoft.UI.Xaml.Controls.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:AnimatedIcon />

Artigos relacionados

• Ícones em aplicativos do Windows
• Animação para aplicações do Windows