Animandos fades
Idioma: HTML | XAML

Animações de fade (XAML)

[ 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 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. Cada animação foi projetada para um cenário diferente. A biblioteca de animação XAML implementa essas animações usando FadeInThemeAnimation e FadeOutThemeAnimation.

Fade in

Use a animação de fade in para inserir um item ou conjunto de itens. Um exemplo da animação de fade in pode ser visto na barra de aplicativos, em que novos controles podem aparecer como resultado da interação do usuário. Você também deve fazer fade in na animação para causar uma transição entre um item de espaço reservado para um item real à medida que o conteúdo é carregado dinamicamente ou para mostrar uma dica de ferramenta ou um controle de caixa de diálogo.

Observação  

Observe que a dica de ferramenta e os controles de caixa de diálogo do Windows incluem as animações de fade in e fade out.

Fade out

Use a animação de fade out para remover um item ou conjunto de itens da exibição. Um exemplo das animações de fade out pode ser visto em controles transitórios como a barra de rolagem ou o indicador de movimento panorâmico, que passam por fade out depois que um período de tempo é decorrido e não há entrada do usuário detectada.

Fading cruzado

Use as animações de fade in e fade out simultaneamente para executar uma substituição local de um item existente por um item de entrada. A animação faz fade nos itens existentes à medida que faz fade dos itens substitutos para o mesmo lugar.

Animações de fade no comportamento de controle do Tempo de Execução do Windows padrão

Outros recursos

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

Para ver um exemplo que usa HTML em vez de XAML, consulte Como usar o exemplo de animações da Biblioteca de Animação.

Tópicos relacionados

Animando sua interface do usuário
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
FadeInThemeAnimation
FadeOutThemeAnimation
Exemplo de animações de personalidade XAML

 

 

Mostrar:
© 2017 Microsoft