Idioma: HTML | XAML

Animando sua interface do usuário (XAML)

Applies to Windows and Windows Phone

Você pode integrar a aparência do Windows em seu aplicativo usando a biblioteca de animações discutida neste tópico. Este tópico resume as animações e fornece exemplos de cenários típicos nos quais cada uma é usada.

Os controles do Tempo de Execução do Windows para XAML incluem determinados tipos de animações como comportamentos internos que vêm de uma biblioteca de animações. Os controles, como o controle ListView, o FlipView, o Flyout e o AppBar usam essas animações como um comportamento inserido. Usando esses controles em seu aplicativo, você pode obter a aparência animada sem precisar programá-lo.

As animações da biblioteca de animação do Windows Runtime oferecem os seguintes benefícios:

  • Movimentos que se alinham aos princípios de animação
  • Transições rápidas e flexíveis entre os estados da interface do usuário, as quais informam, mas não distraem o usuário
  • Comportamento visual que indica transições dentro de um aplicativo para o usuário

Por exemplo, quando o usuário adiciona um item a uma lista, em vez do novo item aparecer instantaneamente na lista, ele aparece como uma animação no local. Os outros itens da lista aparecem como animação nas novas posições por um período curto, dando espaço para o item adicionado. Esse comportamento de transição torna a interação do controle mais aparente para o usuário.

A biblioteca de animações não fornece animações para todos os cenários possíveis. Há casos em que convém criar uma animação personalizada em XAML. Para saber mais, veja Animações com storyboard.

Para obter um código de exemplo usando as APIs discutidas neste tópico, veja o exemplo de animação XAM, o exemplo de animações de personalidade XAML ou o Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca.

Tipos de animações

O sistema de animações do Tempo de Execução do Windows e a biblioteca de animações cumprem o objetivo maior de habilitar controles e outras partes da interface do usuário para que tenham um comportamento animado. Há vários tipos distintos de animações.

  • As transições de tema são aplicadas automaticamente quando certas condições mudam na interface do usuário envolvendo controles ou elementos dos tipos de interface do usuário XAML predefinidas no Windows Runtime. Elas são chamadas de transições de tema porque as animações oferecem suporte a aparência do Windows e definem o que todos os aplicativos fazem em determinados cenários da interface do usuário quando mudam de um modo de interação para outro. As transições de tema fazem parte da biblioteca de animações.
  • As animações de tema são animações de uma ou mais propriedades de tipos de interface do usuário XAML do Tempo de Execução do Windows. As animações de tema são diferentes das transições de tema porque as animações de tema apontam para um elemento específico e existem em estados visuais específicos, enquanto que as transições de tema são atribuídas a propriedades do controle que existem fora dos estados visuais e influenciam as transições entre esses estados. Muitos dos controles XAML do Windows Runtime incluem animações de tema dentro dos storyboards que fazem parte do modelo do controle, com as animações ativadas pelos estados visuais. Contanto que você não esteja modificando os modelos, terá essas animações de tema inseridas disponíveis para os controles na interface do usuário. No entanto, se você substituir os modelos, estará removendo as animações de tema do controle inserido também. Para recuperá-las, você deve definir um storyboard que inclua animações de tema dentro do conjunto do controle dos estados visuais. Você também pode executar as animações de tema de storyboards que não estejam dentro dos estados visuais e iniciá-las com o método Begin, mas isso é menos comum. As transições de tema fazem parte da biblioteca de animações.
  • As transições visuais são aplicadas quando um controle faz transição entre um de seus estados visuais definidos e outro estado. Elas são animações personalizadas que você escreve e normalmente estão relacionadas ao modelo personalizado que você escreve para um controle e as definições de estados visuais nesse modelo. A animação só é executada durante o tempo entre os estados, que normalmente é um curto período de tempo, sendo no máximo alguns segundos. Para saber mais, veja a seção "Transição visual" das animações com storyboard para estados visuais.
  • As animações com storyboard são aplicadas quando são iniciadas especificamente pelo código do aplicativo ou por código proveniente de um componente como um controle que você incluiu. As animações de storyboard podem mudar o valor de qualquer propriedade de dependência do Windows Runtime com o tempo. As animações de storyboard não se limitam aos cenários da interface do usuário; na realidade, pode ser útil pensar nelas como uma técnica de máquina de estado, caso esteja familiarizado com esse conceito. Uma animação com storyboard não fica limitada ao tempo de transição entre os estados visuais; ela pode ser executada a qualquer momento independentemente de um estado de controle mudar e a animação pode ser executada continuamente. Para saber mais, veja Animações com storyboard. Para saber mais sobre as propriedades de dependência e onde elas existem, veja Visão geral das propriedades de dependência.

Animações disponíveis na biblioteca

As seguintes animações são fornecidas na biblioteca de animações. Clique no nome da animação para aprender mais sobre o uso principal dos cenários, como definí-las e para ver um exemplo da animação.

Observação  As animações expand, peek, badge e search list fornecidas pela biblioteca de animação JavaScript não estão disponíveis para XAML.

Comportamento do Windows 8

Para o Windows 8, as transições de tema XAML e vários outros comportamentos animados automáticos na biblioteca de animações não honraram uma determinada configuração de Facilidade de Acesso do Microsoft Windows que permite aos usuários desligar "animações desnecessárias".

A partir do Windows 8.1, as transições de tema, as animações de tema e as transições visuais honram a configuração Desativar todas as animações desnecessárias (quando possível) em Facilidade de Acesso. As animações não serão executadas e as mudanças de estado de controle ou as mudanças visuais são instantâneas.

Se você migrar o código do aplicativo do Windows 8 para o Windows 8.1, convém testar os comportamentos de animação com a configuração Desativar todas as animações desnecessárias (quando possível) habilitada. Como algumas dessas animações são controladas por storyboards e como às vezes é possível encadear animações personalizadas para que se iniciem após a conclusão das transições visuais ou das animações de tema, a configuração Desativar todas as animações desnecessárias (quando possível) poderá afetar os tempos das animações. Além disso, se você implementou algo como VisualTransition em um estado visual, e não como uma animação com storyboard, convém mudar para que se torne uma verdadeira animação personalizada, de maneira que a configuração Desativar todas as animações desnecessárias (quando possível) não a desabilite.

Os aplicativos que foram compilados para o Windows 8, mas estavam sendo executados no Windows 8.1 continuam a usar o comportamento do Windows 8 para animações de tema e transições visuais. Entretanto, essas transições são desabilitadas pela configuração no Windows 8.1, mesmo se um aplicativo não for recompilado.

Transições de conteúdo e entrada

Use as animações de transição de conteúdo (ContentThemeTransition) para mover uma parte ou um conjunto de conteúdo para dentro ou para fora da exibição atual. Por exemplo, as animações de transição de conteúdo mostram o conteúdo que não estava pronto para exibição quando a página carregou pela primeira vez, ou quando o conteúdo muda em uma seção de uma página.

A biblioteca de animação XAML não tem um conceito de uma animação que se aplica à página inteira quando a página é carregada, mas ela tem uma transição separada (EntranceThemeTransition) que pode se aplicar ao conteúdo quando a página que contém o conteúdo é carregada pela primeira vez e essa parte tem o conteúdo renderizado. Dessa forma, a primeira aparência do conteúdo pode oferecer um feedback diferente da alteração do conteúdo.

Para saber mais, veja Animando conteúdo e transições de entrada.

Fade in, fade out e fading cruzado

Use animações de fade in e fade out para mostrar ou ocultar a interface do usuário ou controles transitórios. Em XAML, elas são representadas como FadeInThemeAnimation e FadeOutThemeAnimation. Um exemplo é uma barra de aplicativos na qual novos controles podem aparecer devido à manipulação do usuário. Outro exemplo seria uma barra de rolagem ou indicador panorâmico transitório que desaparece lentamente (fade out) depois que não é detectada nenhuma entrada do usuário por algum tempo. O aplicativos também devem usar a animação de fade in ao fazerem a transição de um item de espaço reservado até o item final conforme o conteúdo é carregado dinamicamente.

Use uma animação de fading cruzado para suavizar a transição quando o estado de um item está mudando; por exemplo, aquando o aplicativo atualiza o conteúdo atual de uma exibição. A biblioteca de animação XAML não fornece uma animação dedicada de fading cruzado (não equivalente para crossFade), mas você pode obter o mesmo resultado usando FadeInThemeAnimation e FadeOutThemeAnimation com tempo sobreposto.

Para saber mais, veja Fades de animação.

Ponteiro para cima/baixo

Use as animações PointerUpThemeAnimation e PointerDownThemeAnimation para oferecer ao usuário o feedback por um toque ou clique com êxito em um bloco. Por exemplo, quando um usuário clica ou toca em um bloco, a animação do ponteiro para baixo é reproduzida. Depois da liberação do clique ou do toque, a animação do ponteiro para cima é exibida.

Para saber mais, veja Animando ações de ponteiro.

Reposicionar

Use as animações de reposicionamento (RepositionThemeAnimation ou RepositionThemeTransition) para mover um elemento para uma nova posição. Por exemplo, a movimentação de cabeçalhos em um controle de itens de cabeçalho usaria a animação de reposicionamento.

Para saber mais, veja Animando reposições.

Mostrar/ocultar pop-up

Use PopInThemeAnimation e PopOutThemeAnimation quando mostrar ou ocultar uma Popup ou uma interface do usuário contextual semelhante na parte superior da exibição atual. PopupThemeTransition é uma transição de tema que oferece feedback útil se você quiser usar o efeito de light dismiss em uma pop-up.

Para saber mais, veja Animando sua interface do usuário

Mostrar/ocultar a interface do usuário de borda

Use a animação EdgeUIThemeTransition para deslizar pequenas interfaces do usuário de borda para dentro e fora da exibição. Por exemplo, use essas animações ao mostrar uma barra de aplicativos personalizada na parte superior ou inferior da tela, ou uma superfície de interface do usuário para erros e avisos na parte superior da tela.

Use a animação PaneThemeTransition para mostrar e ocultar um painel. Isso é usado em interface do usuário de borda grandes, como um teclado personalizado ou um painel de tarefa.

Para saber mais, veja Animando interface do usuário de borda

Alterações em itens de lista

Use a animação AddDeleteThemeTransition para adicionar um comportamento animado ao adicionar ou excluir um item em uma lista existente. Para adicionar, a transição vai primeiro reposicionar os itens existentes na lista para abrir espaço para os novos itens e, depois, adicionar novos itens. Para excluir, a transição removerá itens de uma lista e, se necessário, reposicionará os demais itens da lista depois que os itens excluídos forem removidos.

Também há um ReorderThemeTransition separado que você aplica se um item mudar de posição em uma lista. Isso é animado de forma diferente do que excluir um item e adicioná-lo em um novo local com as animações de adição/exclusão associadas.

Para saber mais, veja Animando alterações em itens de lista .

Arrastar e soltar

Use as animações de arrastar (DragItemThemeAnimation, DragOverThemeAnimation) e a animação de soltar (DropTargetItemThemeAnimation) para oferecer feedback visual quando o usuário arrasta ou solta um item.

Quando ativas, as animações mostram ao usuário que a lista pode ser reorganizada ao redor de um item solto. Isso é útil para usuários que sabem onde o item será colocado em uma lista se for solto no local atual. As animações oferecem feedback visual que um item arrastado pode ser solto entre dois outros itens na lista e que estes ficarão fora do caminho.

Para saber mais, veja Animando sequências de arrastar e soltar

Gestos de passar o dedo

Use a animação SwipeHintThemeAnimation para mostrar que um bloco permite essa interação. Os usuários podem passar o dedo para baixo para selecionar um bloco. Se um usuário não souber se pode passar o dedo em um bloco, um gesto de pressionar e segurar o bloco reproduzirá a animação de dica do gesto de passar o dedo, para sugerir que o usuário interaja passando o dedo no bloco.

Use a animação SwipeBackThemeAnimation para mostrar que o bloco foi selecionado e para retornar o bloco ao seu local original.

Para saber mais, veja Animando gestos de passar o dedo

Usando animações com controles personalizados

A tabela a seguir resume as recomendações de animações que você deve usar ao criar uma versão personalizada destes controles do Windows Runtime:

Tipo de interface do usuárioAnimação recomendada
Caixa de diálogo FadeInThemeAnimation e FadeOutThemeAnimation
Submenu PopInThemeAnimation e PopOutThemeAnimation
Dica de ferramenta FadeInThemeAnimation e FadeOutThemeAnimation
Menu de contexto PopInThemeAnimation e PopOutThemeAnimation
Barra de comandos EdgeUIThemeTransition
Painel de tarefas ou painel com base em borda PaneThemeTransition
Conteúdos de qualquer contêiner de interface do usuário ContentThemeTransition
Para controles ou se nenhuma animação for aplicável FadeInThemeAnimation e FadeOutThemeAnimation

 

Tópicos relacionados

Mapa de aplicativos do Tempo de Execução do Windows em C# ou Visual Basic
Exemplo de animações de personalidade XAML
Exemplo da biblioteca de animação em HTML
Namespace Windows.UI.Xaml.Media.Animation

 

 

Mostrar:
© 2014 Microsoft