Animando interface do usuário de borda (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
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. Essas animações geralmente são usadas em controles personalizados; os controles existentes, como AppBar têm animações de biblioteca para interfaces do usuário de borda inseridas e para obter o comportamento animado, bastará incluir esses controles na interface do usuário.
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.
.png "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 as animações de interface do usuário de borda com interfaces do usuário de borda menores, se a sua intenção for animar um controle personalizado com comportamento semelhante à AppBar ou parecido. Você também poderá definir uma superfície/área da interface do usuário para erros e avisos que vêm das ações do seu aplicativo. Se você estiver abordando esse cenário, não se esqueça de ler as Diretrizes para submenus; as interface do usuário de borda podem não ser apropriadas para o seu cenário.
- 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 janela do aplicativo, como o teclado virtual.
.png "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.
.png "Ilustração da medida conhecida como deslocamento")
Animações baseadas em borda no comportamento de controle do Tempo de Execução do Windows
A forma recomendada para incluir interfaces do usuário de borda é adicionando uma AppBar, que aplicará automaticamente todas as transições apropriadas e comportamento de interação para você. Para obter mais informações, consulte Adicionando barras de aplicativos.
Objetos de submenu (Flyout, Menu ou SettingsFlyout) também possuem animações internas, mas não são propriamente interface do usuário de borda. Os submenus estão associados ao contexto que os fez serem exibidos, não à borda da janela do aplicativo. Você pode usar os submenus da interface do usuário que são chamados de um AppBar, mas, novamente, isso não é puramente interface do usuário de borda. Para saber mais, veja Adicionando submenus e Animando a interface do usuário pop-up.
Outros recursos
Para obter exemplos de código que demonstram o uso de APIs de animação de interface do usuário de borda, consulte o Exemplo de biblioteca de animação HTML.
Para obter práticas recomendadas no uso dessas animações, consulte Diretrizes e lista de verificação para animações de interface do usuário de borda.