Animando interface do usuário de borda (aplicativos da Windows Store que usam JavaScript e HTML)

Use animações de interface do usuário de borda para mostrar ou ocultar a interface do usuário que tem origem na borda da tela. Ou o usuário ou o aplicativo pode inserir essa interface do usuário na exibição. A interface do usuário pode sobrepor o aplicativo ou fazer parte da superfície principal do aplicativo. Se a interface do usuário fizer parte da superfície principal do aplicativo, talvez seja necessário redimensionar o restante do aplicativo para liberar espaço para a nova interface do usuário quando ela aparecer.

Diagrama básico de um elemento de borda

Este conjunto de animações consiste nas seguintes APIs:

Há dois tipos de elementos de borda, sendo que cada um tem o próprio conjunto de APIs de animação: interface do usuário de borda e interface do usuário de painel.

O vídeo a seguir demonstra as animações que mostram e ocultam uma interface do usuário de borda:

|

O vídeo a seguir demonstra as animações que mostram e ocultam painéis:

|

  • Use animações de interface do usuário de borda com uma interface do usuário de borda menor, como a barra de comandos do aplicativo ou uma superfície de interface do usuário para erros e avisos.
  • Use animações de interface do usuário de painel com interface do usuário de borda que geralmente é maior e ocupa mais espaço na tela, como o teclado virtual.

Ilustração que mostra a diferença de tamanho entre uma interface do usuário de borda e uma interface do usuário de painel

Importante  O controle app bar fornecido pelo Windows inclui as animações de interface do usuário de borda. Se você estiver usando esse controle, não precisará fornecer essas animações.

Para usar essas animações, você precisará saber estas informações:

  • O objeto que deslizará para dentro ou para fora da tela.
  • A distância (deslocamento) que o objeto deslizará. Esta será a distância final entre a borda interna da interface do usuário e a borda da tela.

    Ilustração da medida conhecida como deslocamento

Outros recursos

Veja o Exemplo de uso das animações da Biblioteca de Animação para obter exemplos de código que demonstram o uso das APIs de animação de interface do usuário de borda.

Veja Diretrizes e lista de verificação para animações de interface do usuário de borda para obter as práticas recomendadas de design no uso dessas animações.

Tópicos relacionados

Animando sua interface do usuário
showEdgeUI
hideEdgeUI
showPanel
hidePanel

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.