Diretrizes para animações de fade

Applies to Windows and Windows Phone

Use animações de fade para trazer itens para uma exibição ou retirá-los de uma exibição. Há três tipos de animações de fade: fade in, fade out e fading cruzado.

O que fazer e o que não fazer

  • Quando ocorrerem no aplicativo transições entre elementos não relacionados ou com uso intenso de texto, use uma ação de fade out seguida de uma ação de fade in, em vez de um fading cruzado. Isso permite que o objeto de saída desapareça completamente antes de o objeto de entrada ficar visível. O fading cruzado de muito texto, em particular, não é recomendável.
  • Use a animação de fading cruzado para fazer a transição entre elementos de diferentes tamanhos ou para atualizar uma grande área. No meio da animação, tanto os elementos de entrada quanto os de saída serão semitransparentes e que o plano de fundo estará visível ao usuário. Observe que as linguagens de programação usadas com XAML (eXtensible Application Markup Language) não contêm uma animação de fading cruzado dedicada. Nessas linguagens, é possível obter o efeito usando as animações de fade in e de fade out com tempo sobreposto.
  • Faça fade in do(s) elemento(s) de entrada sobre os elementos de saída se o tamanho dos elementos permanecer constante e se você quiser que o usuário perceba que está olhando o mesmo item. Você pode fazer fade in no item de entrada sobre o item de saída. Em seguida, quando o fade in estiver concluído, o item de saída pode ser simplesmente removido. Evidentemente, essa é uma opção viável somente quando o item de saída está completamente coberto pelo item de entrada. Esse método também impede que o plano de fundo fique visível durante a transição.
  • Não use animações de fade para adicionar ou excluir itens em uma lista. Use as animações de lista criadas especificamente para essa finalidade.
  • Não use animações de fade para mudar todo o conteúdo de uma página. Use as animações de transição de página criadas especificamente para essa finalidade.

Tópicos relacionados

Para designers
Diretrizes para adicionar e excluir
Diretrizes para animações de transações de conteúdo
Diretrizes para animações de arrastar
Diretrizes para animações de interface do usuário baseada em bordas
Diretrizes para animações de transações de página
Diretrizes para animações de clique de ponteiro
Diretrizes para animações de reposição
Diretrizes para animações de interface do usuário pop-up
Diretrizes para animações de passagem do dedo
Para desenvolvedores (HTML)
Exemplo da biblioteca de animação em HTML
Animando sua interface do usuário
Animando fades
fadeIn
fadeOut
crossFade
Para desenvolvedores (XAML)
Animando sua interface do usuário
Animando fades
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
FadeInThemeAnimation
FadeOutThemeAnimation

 

 

Mostrar:
© 2014 Microsoft