Padrões de animação para aplicativos da Windows Store

Interface do usuário para aplicativo da Windows Store mostrando uma transição entre páginas

Saiba como usar animações objetivas para vincular visualmente as experiências e contar uma história. As animações específicas de cenários do Windows 8 foram projetadas para transmitir informações, ajudar as pessoas a identificar expectativas e obter uma noção de confiança. Consulte as diretrizes detalhadas e os tópicos de instruções na seção Animando sua interface do usuário.

Iniciar seu aplicativo

Exiba a primeira página de seu aplicativo.

|

JavaScript: use enterPage

XAML: use EntranceThemeTransition

Veja também Animando transições com a Biblioteca de Animações

Transição entre páginas

Transição de uma página para outra do aplicativo.

|

JavaScript: use exitPage e enterPage

XAML: use EntranceThemeTransition

Veja também Animando transições com a Biblioteca de Animações

Transição entre conteúdos

Transição entre conteúdo de uma área na página.

|

JavaScript: use exitContent e enterContent

XAML: use ContentThemeTransition

Veja também Animando transições com a Biblioteca de Animações

Resposta a toques e cliques

Mostre uma resposta visual de que o usuário tocou ou clicou em um bloco.

|

JavaScript: use pointerDown e pointerUp

XAML: use PointerDownThemeAnimation e PointerUpThemeAnimation

Veja também Animando ponteiros com a Biblioteca de Animações

Mostrar controles ou interface do usuário temporária

Mostre e oculte controles ou interface do usuário temporária.

|

JavaScript: use fadeIn e fadeOut

XAML: use FadeInThemeAnimation e FadeOutThemeAnimation

Veja também Animando elementos da interface do usuário com a Biblioteca de Animações

Atualizar

Atualize conteúdo ou anime uma mudança de layout da página existente.

|

JavaScript: use crossFade

XAML: use FadeOutThemeAnimation e FadeInThemeAnimation

Veja também Animando elementos da interface do usuário com a Biblioteca de Animações

Mostrar controles ou conteúdos adicionais embutidos

Crie espaço e mostre controles ou conteúdos adicionais na interface do usuário existente.

|

JavaScript: use createExpandAnimation e createCollapseAnimation

XAML: N/A

Adicionar ou excluir itens de uma lista

Adicione ou exclua um ou mais itens de uma lista existente.

|

JavaScript: use createAddToListAnimation e createDeleteFromListAnimation

XAML: use AddDeleteThemeTransition

Veja também Animando listas e itens de lista com a Biblioteca de animação

Filtrar uma lista enquanto pesquisa

Adicione ou exclua vários itens de uma lista com rapidez enquanto pesquisa.

|

JavaScript: use createAddToSearchListAnimation e createDeleteFromSearchListAnimation

XAML: N/A

Veja também Animando listas e itens de lista com a Biblioteca de animação

Mostrar uma barra de comandos ou mensagens

Mostre ou oculte uma barra de comandos ou mensagens na borda da tela.

|

JavaScript: use showEdgeUI e hideEdgeUI

XAML: use EdgeUIThemeTransition

Veja também Animando superfícies da interface do usuário com a Biblioteca de Animações

Mostrar um painel de tarefas

Mostre e oculte um painel de tarefas ou outro contêiner grande da interface do usuário na borda da tela.

|

JavaScript: use showPanel e hidePanel

XAML: use PaneThemeTransition

Veja também Animando superfícies da interface do usuário com a Biblioteca de Animações

Mostrar interface do usuário pop-up

Mostre e oculte uma interface do usuário pop-up, como um submenu ou menu contextual.

|

JavaScript: use showPopup e hidePopup

XAML: use PopInThemeAnimation e PopOutThemeAnimation

Veja também Animando superfícies da interface do usuário com a Biblioteca de Animações

Arrastar

Arrastre itens para reorganizar uma lista.

|

JavaScript: use dragSourceStart, dragSourceEnd, dragBetweenEnter e dragBetweenLeave

XAML: use DragItemThemeAnimation, DropTargetItemThemeAnimation e DragOverThemeAnimation

Veja também Animando listas e itens de lista com a Biblioteca de animação

Selecionar um bloco com o gesto de passar o dedo

Anime um bloco para voltar à sua posição inicial depois que o usuário realizar um gesto de passar o dedo.

|

JavaScript: use swipeSelect e swipeDeselect

XAML: use SwipeBackThemeAnimation

Revelar a capacidade de passar o dedo

Anime para indicar que um bloco oferece suporte ao gesto de passar o dedo.

|

JavaScript: use swipeReveal

XAML: use SwipeHintThemeAnimation

Atualizar um bloco

Atualize todo o conteúdo de um bloco ou espie para mostrar temporariamente informações adicionais sobre o bloco.

|

JavaScript: use createPeekAnimation

XAML: N/A

Atualizar um emblema

Atualize um emblema numérico com um novo valor.

|

JavaScript: use updateBadge

XAML: N/A

Reposicionar

Reposicione a interface do usuário ou o conteúdo.

|

JavaScript: use createRepositionAnimation

XAML: use RepositionThemeTransition

Veja também Animando elementos da interface do usuário com a Biblioteca de Animações

Tópicos relacionados

Diretrizes de UX para aplicativos da Windows Store
Animando sua interface do usuário

 

 

Mostrar:
© 2014 Microsoft