Í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 Adobe AfterEffects e renderizadas com a biblioteca Lottie-Windows para usar como ícone animado na sua aplicação WinUI 3. 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 desencadeada por uma transição visual de estado, e estiver a reproduzir em loop, 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

• Por favor, consulte as orientações de UX para Ícones para Windows Apps para garantir que os seus ícones cumprem os 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

A aplicação WinUI 3 Gallery inclui exemplos interativos de controlos e funcionalidades WinUI. Descarrega a aplicação na Microsoft Store ou navega pelo código-fonte no 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.

• O AnimatedBackVisualSource é uma classe criada com a ferramenta de linha de comandos LottieGen.
• O FallbackIconSource é usado quando as animações não podem ser reproduzidas, como em versões 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 GameSettingsIcon personalizado no exemplo anterior, execute um ficheiro JSON Lottie (com marcadores) através da ferramenta Windows LottieGen para gerar o código de animação como uma classe C#.

Depois de executares o teu ficheiro Lottie no LottieGen, podes adicionar a classe de saída CodeGen ao teu projecto. 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 podem 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");
}

Artigos relacionados

• Ícones em aplicações Windows
• Motion para aplicações Windows