Animando sua interface do usuário (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]
É possível integrar a aparência do Windows 8 em seu aplicativo da Windows Store usando o pacote de animações da Biblioteca de Animação fornecidas pelo Windows. Este artigo resume as animações e fornece exemplos de cenários típicos manipulados pela Biblioteca de Animação.
O uso da Biblioteca de Animação oferece os seguintes benefícios:
- Movimentos que se alinham aos princípios de animação de aplicativos da Windows Store
- 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
- Visuais claros para mostrar ao usuário as transições no aplicativo
Por exemplo, quando um usuário adiciona um item a uma lista, em vez de o novo item aparecer instantaneamente na lista, ele é animado no local, e os demais itens da lista são animados em suas novas posições, liberando espaço para o item adicionado. Isso torna a ação mais clara para o usuário em uma forma que as transições instantâneas não conseguem.
Observe que os controles introduzidos no Windows 8, como ListView, FlipView, Flyout e AppBar usam as animações da Biblioteca de Animação. Com esses controles no seu aplicativo, você consegue a aparência das animações de aplicativos da Windows Store sem precisar programá-los.
A Biblioteca de Animação não fornece animações para todos os cenários possíveis e, em alguns casos, você pode querer criar uma animação personalizada para representar sua marca. Pense bem sobre as divergências que você deve fazer entre os aplicativos e as animações da Biblioteca de Animação. Faça isso somente se houver um motivo bem claro, como para um momento especial da marca, ou se não existir uma animação na Biblioteca de Animação adequada ao cenário.
Para obter um código de exemplo com o uso das APIs discutidas neste tópico, veja o exemplo da biblioteca de animação HTML.
Animações disponíveis na biblioteca
As seguintes animações são fornecidas na Biblioteca de Animação. Clique no nome da animação para saber mais sobre os principais cenários de utilização, as funções usadas para executá-la e para ver um exemplo da animação.
- Transição da página: anima o conteúdo de uma página dentro e fora da exibição.
- Transição de conteúdo: anima uma parte ou conjunto de conteúdo dentro e fora da exibição.
- Fade in/out: mostra elementos ou controles transitórios.
- Fading cruzado: atualiza uma área de conteúdo.
- Ponteiro para cima/baixo: fornece feedback visual de um toque ou clique em um bloco.
- Expandir/Recolher: mostra informações embutidas adicionais.
- Reposicionar: move um elemento para uma nova posição.
- Mostrar/Ocultar pop-up: exibe a interface do usuário contextual sobre a exibição.
- Mostrar/Ocultar a Interface do usuário de borda: desloca a Interface do Usuário baseada em borda para dentro ou fora da exibição.
- Mostrar/Ocultar painel: desloca grandes painéis baseados em borda para dentro ou fora da exibição.
- Adicionar/Excluir da lista: adiciona ou excluir um item de um lista.
- Adicionar/Excluir da lista de pesquisa: adiciona ou excluir um item de um lista ao filtrar de resultados de pesquisa.
- Dinâmica: atualiza o conteúdo de um bloco.
- Atualização de notificação: atualiza uma notificação numérica.
- Iniciar/Concluir uma ação arrastar ou arrastar entre: oferece feedback visual durante uma operação de arrastar e soltar.
- Dica de passar o dedo: indica que um bloco suporta a interação com o dedo.
- Selecionar/Anular seleção com passagem do dedo: Faz a transição de um bloco para um estado selecionado pelo gesto de passar o dedo.
Transição da página
As transições de página animam o conteúdo de uma página para exibi-lo ou removê-lo da exibição. Isso inclui mostrar a primeira página do aplicativo depois da tela inicial e a transição entre as páginas do aplicativo.
O vídeo a seguir demonstra a animação que introduz a exibição de uma página de conteúdo:
O vídeo a seguir demonstra as animações que introduzem uma transição emtre duas páginas de conteúdo:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de transição de página.
Use essas APIs para executar esta animação no código JavaScript:
Transição de conteúdo
Use as animações de transição de conteúdo para mover uma parte ou um conjunto de conteúdo para dentro ou para fora da exibição atual. Não confunda as transições de conteúdo, que envolvem elementos na página, com as transições de página, que fazem as transições de páginas inteiras. Por exemplo, as animações de transição de conteúdo são usada para mostrar o conteúdo que não estava pronto para exibição quando a página carregou pela primeira vez ou ao mudar o conteúdo de uma seção de uma página.
O vídeo a seguir demonstra as animações que removem o conteúdo existente e depois trazem o novo conteúdo para a exibição:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de transição de conteúdo.
Use essas APIs para executar esta animação no código JavaScript:
Fade in/out
Use animações de fade in e fade out para mostrar ou ocultar a interface do usuário ou controles transitórios. 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.
O vídeo a seguir demonstra as animações que fazem o conteúdo aparecer e desaparecer gradualmente em uma exibição. Observe a barra de rolagem que aparece e desaparece gradualmente, na parte inferior da tela:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de fade.
Use essas APIs para executar esta animação no código JavaScript:
Fading cruzado
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.
O vídeo a seguir demonstra a animação de fading cruzado:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de fade.
JavaScript: use essas APIs para executar esta animação:
Ponteiro para cima/baixo
Use as animações de ponteiro para cima/baixo para dar 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. Quando o usuário libera o clique ou o toque, a animação do ponteiro para cima é exibida.
O vídeo a seguir demonstra as animações de ponteiro para baixo e ponteiro para cima:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações de ponteiro.
Use essas APIs para executar esta animação no código JavaScript:
Expandir/Recolher
Use a animação de expansão para adicionar espaço extra no conteúdo da exibição para mostrar informações embutidas adicionais. Por exemplo, a aparência de uma mensagem de erro resulta na movimentação de outro conteúdo na exibição para abrir espaço. A animação de recolhimento oculta esse conteúdo adicional, para mostrar menos detalhes sobre um determinado item. Normalmente, a animação de recolhimento é ativada por uma ação do usuário.
O vídeo a seguir demonstra as animações de expansão e recolhimento:
Use essas APIs para executar esta animação no código JavaScript:
Reposicionar
Use a animação de reposicionamento para mover um elemento para uma nova posição. Por exemplo, a movimentação de cabeçalhos para uma exibição panorâmica usaria a animação de reposicionamento.
O vídeo a seguir demonstra a animação de reposição:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para a animação de reposicionamento.
JavaScript: use essas APIs para executar esta animação:
Mostrar/Ocultar a interface do usuário pop-up
Use as animações para mostrar e ocultar a interface do usuário pop-up para exibir ou ocultar a interface do usuário contextual sobre a exibição atual. Por exemplo, uma interface do usuário pop-up pode mostrar informações mais detalhadas sobre um item em um elemento. Use as animações para mostrar e ocultar a interface do usuário pop-up ao mostrar um menu de contexto personalizado ou um submenu.
O vídeo a seguir demonstra as animações que mostram e ocultam uma interface do usuário pop-up:
Para saber mais sobre a UX e as diretrizes de uso, veja Diretrizes e lista de verificação para animações de interface do usuário pop-up.
Use essas APIs para executar esta animação no código JavaScript:
Mostrar/Ocultar a Interface do Usuário de borda
Use as animações de mostrar e ocultar Interface do Usuário de borda para deslizar Interfaces do Usuário pequenas e baseadas em borda para dentro e fora da exibição. Por exemplo, use essas animações ao mostrar uma barra de aplicativos personalizada na parte inferior da tela ou uma superfície de IU do usuário para erros e avisos na parte superior da tela.
O vídeo a seguir demonstra as animações que mostram e ocultam uma interface do usuário baseada em bordas:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações baseadas em borda.
Use essas APIs para executar esta animação no código JavaScript:
Mostrar/Ocultar painel
Use para mostrar e ocultar animações de painel para mostrar e ocultar um painel, que é uma Interface do Usuário grande e baseada em borda, como um teclado personalizado ou um painel de tarefas. Não confunda essas animações com mostrar e ocultar animações de Interface do Usuário de borda, que são usada com elementos pequenos de Interface do Usuário UI que usar a borda como pontos de entrada e saída.
O vídeo a seguir demonstra as animações que mostram e ocultam painéis:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações baseadas em borda.
Use essas APIs para executar esta animação no código JavaScript:
Adicionar a/excluir da lista
Use animações de adicionar a e excluir da lista ao adicionar ou excluir um item em uma lista unidimensional ou bidimensional existente. Primeiramente, a animação de adicionar à lista reposiciona itens existentes na lista para abrir espaço para os novos itens e, depois, adiciona novos itens. Se necessário, a animação de excluir da lista remove itens de uma lista e reposiciona os demais itens da lista depois que os itens excluídos são removidos.
O vídeo a seguir demonstra as animações que adicionam e removem itens de uma lista:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações de lista.
Use essas APIs para executar esta animação no código JavaScript:
Adicionar a/excluir da lista de pesquisa
Use as animações de adicionar a e excluir da lista de pesquisa quando os itens em uma lista mudam rapidamente durante uma pesquisa. Observe que as animações da lista de pesquise são mais rápidas do que as animações de lista padrão. Por exemplo, quando um usuário insere um termo de pesquisa, e a lista filtra os resultados em tempo real, os itens filtrados devem usar a animação de excluir da lista de pesquisa. Por outro lado, um usuário pode pesquisar por uma cadeia de caracteres e depois voltar para remover um caractere. Dessa forma, itens serão adicionados de volta à lista dos resultados de pesquisa. Use a animação de adicionar à lista de pesquisa para que isso seja feito.
O vídeo a seguir demonstra as animações que adicionam e removem itens de uma lista de pesquisa:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações de lista.
Use essas APIs para executar esta animação no código JavaScript:
Dinâmico
Use a animação dinâmica para atualizar um bloco quando um bloco alterna entre a exibição de imagem e texto quando a altura do bloco não é grande o suficiente para mostrar ambos ao mesmo tempo. Use essa animação também para alternar por um conjunto de imagens em um bloco.
O vídeo a seguir demonstra a animação dinâmica:
JavaScript: use essas APIs para executar esta animação:
Atualização de notificação
Use a atualização de notificação para atualizar notificações que exibem um número. Por exemplo, um aplicativo de email que mostra o número de emails não lidos pode usar a animação de atualização de notificação para atualizar este valor.
O vídeo a seguir demonstra as animações que atualizam uma notificação:
JavaScript: use essas APIs para executar esta animação:
Início/fim de ação de arrastar e inserir/deixar arrastar entre
Use animações de arrastar para oferecer feedback visual quando o usuário arrasta ou solta um item. Use a animação de início da ação de arrastar quando um usuário começa a arrastar um item. Use a animação de fim da ação de arrastar quando o usuário solta o item.
Como opção, você pode usar animações de inserir e deixar arrastar entre para mostrar ao usuário que a lista pode ser reorganizada em volta de um item solto. É útil para usuários que sabem onde o item será colocado em uma lista se for solto no local atual. As animações para inserir e deixar arrastar entre oferecem feedback visual que um item arrastado pode ser solto entre dois outros itens na lista e que estes ficarão fora do caminho.
O vídeo a seguir demonstra as animações associadas a uma operação de arrastar e soltar:
Para saber mais sobre a UX e as orientações de uso, veja Diretrizes e lista de verificação para animações de arrastar e soltar.
Use essas APIs para executar esta animação no código JavaScript:
Dica de passar o dedo
Use a animação de dica do gesto de passar o dedo 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.
O vídeo a seguir demonstra a animação da passagem de dedo:
JavaScript: use essas APIs para executar esta animação:
Selecionar/anular seleção com passagem de dedo
Use a animação de seleção por passagem de dedo quando um item já foi selecionado usando a manipulação de passar o dedo para mostrar que o bloco fez a transição para um estado selecionado e para voltar o bloco ao local onde se encontra. Use a animação de anular seleção com passagem de dedo quando há a anulação da seleção de um bloco selecionado com o gesto de passar o dedo.
O vídeo a seguir demonstra as animações de passar o dedo para marcar e desmarcar:
Use essas APIs para executar esta animação no código JavaScript:
Usando animações com controles personalizados
A tabela a seguir resume nossas recomendações de animações que você deve usar ao criar uma versão personalizada destes controles do sistema:
| Tipo de interface do usuário | Animação recomendada |
|---|---|
| Caixa de diálogo | fadeIn e fadeOut |
| Menu suspenso | showPopup e hidePopup |
| Dica de ferramenta | fadeIn e fadeOut |
| Menu de contexto | showPopup e hidePopup |
| Barra de comandos | showEdgeUI e hideEdgeUI |
| Painel de tarefas ou painel com base em borda | showPanel e hidePanel |
| Conteúdos de qualquer contêiner de interface do usuário | enterContent e exitContent |
| Para controles ou se nenhuma animação for aplicável | fadeIn e fadeOut |
Tópicos relacionados
Exemplo da biblioteca de animação em HTML