Animações da interface de usuário baseadas em bordas

  • Artigo

Animações de borda mostram ou ocultam a interface do usuário que tem origem na borda da tela. As ações de mostrar e ocultar podem ser iniciadas pelo usuário ou pelo aplicativo. 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 do app, talvez seja necessário redimensionar o restante do app para acomodá-la.

APIs importantes: classe EdgeUIThemeTransition

O que fazer e o que não fazer

  • Use as animações de interface do usuário de borda para mostrar ou ocultar uma barra de erros ou de mensagens personalizada que não se estende muito pela tela.

  • Use as animações de painel para mostrar a interface do usuário que desliza em uma distância significativa na tela, por exemplo, um painel de tarefas ou um teclado virtual personalizado.

  • Deslize a interface do usuário para dentro da mesma borda em que ela será anexada.

  • Deslize a interface do usuário para fora da mesma borda da qual ela surgiu.

  • Se o conteúdo do aplicativo precisar ser redimensionado em resposta ao deslizamento da interface do usuário para dentro ou para fora, use as animações de fade para o redimensionamento.

    • Se a interface do usuário estiver deslizando para dentro, use uma animação de fade depois da animação de painel ou de interface do usuário de borda.
    • Se a interface do usuário estiver deslizando para fora, use uma animação de fade ao mesmo tempo em que a animação de painel ou de interface do usuário de borda.

  • Não aplique essas animações às notificações. As notificações não devem ser posicionadas na interface do usuário de borda.

  • Não aplique as animações de painel ou de interface do usuário de borda em qualquer controle ou contêiner de interface do usuário que não esteja na borda da tela. Essas animações são usadas apenas para mostrar, redimensionar e descartar a interface do usuário nas bordas da tela. Para mover outros tipos de interface do usuário, use as animações de reposicionamento.

    Ilustra quando usar as animações de painel ou de interface do usuário de borda e quando usar o reposicionamento.

Para desenvolvedores