Idioma: HTML | XAML

Início rápido: animando sua interface do usuário usando animações da biblioteca (XAML)

Applies to Windows and Windows Phone

As animações no Tempo de Execução do Windows podem melhorar seu aplicativo ao adicionar movimentos e interatividade. Usando as animações da biblioteca de animações do Tempo de Execução do Windows, você pode integrar a aparência delas a seu aplicativo.

Observação  Para baixar a amostra que exibe muitos dos conceitos abordados neste tópico, veja o exemplo de animações de personalidade XAML.

Mapa: Como este tópico está relacionado aos outros? Veja:

Animações de transições

O ideal é que seu aplicativo use animações para melhorar a interface do usuário ou torná-la mais atraente sem incomodar os usuários. Uma maneira de fazer isso é aplicar transições animadas à interface do usuário de modo que, quando algum elemento entrar na tela ou sair, ou mudar de algum outro jeito, a animação chame a atenção do usuário para a mudança. Por exemplo, seus botões podem esmaecer, em vez de simplesmente aparecer e desaparecer. Nós criamos diversas APIs que podem ser usadas para fazer transições de animação típicas ou recomendadas consistentes. Este exemplo mostra como aplicar uma animação a um botão para que ele deslize suavemente para a exibição.


<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button> 

Nesse código, nós adicionamos o objeto EntranceThemeTransition à coleção de transições do botão. Agora, quando o botão é renderizado pela primeira vez, ele desliza suavemente para a exibição, em vez de simplesmente aparecer. Você pode definir algumas propriedades no objeto de animação para ajustar o quanto ele desliza e de qual direção, mas o objetivo real é oferecer uma API simples para um cenário específico, ou seja, para criar uma entrada chamativa.

Você também pode definir temas de animação de transição nos recursos de estilo do aplicativo. Assim, é possível aplicar o efeito de maneira uniforme. Este exemplo equivale ao anterior, mas é aplicado usando um Style:


<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Os exemplos anteriores aplicam uma transição de tema a um controle individual. Porém, as transições de tema são ainda mais interessantes quando aplicadas a um contêiner de objetos. Quando você faz isso, todos os objetos filho do contêiner fazem parte da transição. No exemplo a seguir, uma EntranceThemeTransition é aplicada a uma Grid de retângulos.


<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Os retângulos filho da Grid entram na exibição um após o outro, de maneira visualmente agradável, em vez de todos de uma vez, como ocorreria se você aplicasse essa animação individualmente aos retângulos.

Este vídeo demonstra essa animação:

|

Os objetos filho de um contêiner também podem fluir novamente quando um ou mais dos filhos muda de posição. No exemplo a seguir, aplicamos uma RepositionThemeTransition a uma grade de retângulos. Quando você remove um dos retângulos, todos os outros refluem para suas novas posições.


<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>


private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    { 	 
        rectangleItems.Items.RemoveAt(0);
    }		  		  		  
}

Este vídeo demonstra a animação executada para remover os retângulos:

|

Você pode aplicar várias animações de transição a um único objeto ou contêiner de objetos. Por exemplo, se quiser que a lista de retângulos seja animada para a exibição e também quando mudam de posição, aplique RepositionThemeTransition e EntranceThemeTransition, assim:



...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...	 	 

Há vários efeitos de transição para criar animações nos elementos de sua interface do usuário conforme eles são adicionados, removidos, reorganizados, e assim por diante. Os nomes de todas essas APIs contêm "ThemeTransition":

APIDescrição
AddDeleteThemeTransition Fornece o comportamento de transição animada para quando controles adicionam ou excluem filhos ou conteúdo. Normalmente, o costuma é um contêiner de itens.
ContentThemeTransition Fornece o comportamento de transição animada para quando o conteúdo de um controle muda. Você pode aplicá-la junto com AddDeleteThemeTransition.
EdgeUIThemeTransition Fornece o comportamento de transição animada para uma (pequena) transição de interface do usuário de borda.
EntranceThemeTransition Fornece o comportamento de transição animada para quando os controles aparecem pela primeira vez.
PaneThemeTransition Fornece o comportamento de transição animada para um painel (interface do usuário de borda grande) de transição de interface do usuário.
PopupThemeTransition Fornece o comportamento de transição animada que é aplicado aos componentes pop-in dos controles (por exemplo, interface do usuário de dica de ferramenta em um objeto) à medida que aparecem.
ReorderThemeTransition Fornece o comportamento de transição animada para quando os itens de controles de lista-exibição mudam de ordem. Normalmente, isso ocorre como resultado de uma operação de arrastar-e-soltar. Diferentes controles e temas podem ter características variáveis para as animações.
RepositionThemeTransition Fornece o comportamento de transição animada para quando os controles mudam de posição.

 

Animações de tema

As animações de transição são simples de aplicar. Mas você pode ter um pouco mais de controle sobre o tempo e a ordem dos efeitos de animação. Você pode usar animações de tema para ter mais controle sobre o comportamento da animação ao usar um tema consistente. As animações de tema também necessitam de menos marcação do que as animações comuns. Aqui, usamos a FadeOutThemeAnimation para fazer um retângulo desaparecer esmaecendo.


<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>


// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

Ao contrário das animações de transição, uma animação de tema não tem um gatilho interno (transição) que a executa automaticamente. Você deve usar um Storyboard para conter uma animação de tema ao definí-la no XAML. Também é possível mudar o comportamento padrão da animação. Por exemplo, você pode tornar o esmaecimento mais lento, aumentando o valor da Duration de FadeOutThemeAnimation.

Observação  Com o objetivo de mostrar as técnicas básicas de animação, estamos usando o código de aplicativo para iniciar a animação por meio da chamada aos métodos de Storyboard. Você pode controlar como as animações do Storyboard são executadas usando os métodos Begin, Stop, Pause, e Resume do Storyboard. No entanto, geralmente não é assim que você inclui as animações de biblioteca em aplicativos. Em vez disso, o comum é você integrar as animações de biblioteca dos estilos e modelos XAML aplicados aos controles ou elementos. Aprender sobre modelos e estados visuais é um pouco mais complicado. Entretanto, nós abordamos como usar animações de biblioteca em estados visuais como parte do tópico Animações com storyboard para estados visuais.

Você pode aplicar várias outras animações de tema aos elementos de interface do usuário para criar efeitos de animação. Os nomes de todas essas APIs contêm "ThemeAnimation":

APIDescrição
DragItemThemeAnimation Representa a animação pré-configurada que se aplica aos elementos dos itens que estão sendo arrastados.
DragOverThemeAnimation Representa a animação pré-configurada que se aplica aos elementos abaixo de um elemento que está sendo arrastado.
DropTargetItemThemeAnimation A animação pré-configurada que se aplica a possíveis elementos de destino ignorado.
FadeInThemeAnimation A animação de opacidade pré-configurada que se aplica a controles quando eles aparecem pela primeira vez.
FadeOutThemeAnimation A animação de opacidade pré-configurada que se aplica a controles quando eles são removidos da interface do usuário ou ocultos.
PointerDownThemeAnimation A animação pré-configurada para ações do usuário ao tocar ou clicar em um item ou elemento.
PointerUpThemeAnimation A animação pré-configurada de ação de usuário executada depois que o usuário toca em um item ou elemento e a ação é liberada.
PopInThemeAnimation A animação pré-configurada que se aplica a componentes pop-in de controles conforme eles aparecem. Essa animação combina opacidade e translação.
PopOutThemeAnimation A animação pré-configurada que se aplica a componentes pop-in de controles conforme eles são fechados ou removidos. Essa animação combina opacidade e translação.
RepositionThemeAnimation A animação pré-configurada para um objeto quando ele é reposicionado.
SplitCloseThemeAnimation A animação pré-configurada que oculta uma interface do usuário de destino usando uma animação de divisão.
SplitOpenThemeAnimation A animação pré-configurada que revela uma interface do usuário de destino usando uma animação de divisão.
SwipeBackThemeAnimation A animação pré-configurada que se aplica a controles quando um elemento desliza de volta ao slot do layout após uma interação de passar o dedo.
SwipeHintThemeAnimation A animação pré-configurada que indica que um gesto de passar o dedo é possível agora.

 

Animações internas para controles

Alguns controles do Tempo de Execução do Windows têm animações internas como parte da lógica de controle e modelos XAML padrão. Recomendamos que você se acostume com esses controles para que possa usá-los nas animações de sua interface do usuário.

Veja uma lista de alguns controles com animações inseridas:

Observação  Essa lista não está completa. Para obter mais informações, veja os tópicos de "Animação ..." nessa mesma área ou os tópicos de "estilos e modelos" para controles específicos.

Crie suas próprias animações

Quando as animações de tema não são suficientes para suas necessidades, você pode criar suas próprias animações. Você anima os objetos por meio de um ou mais dos valores de suas propriedades. Por exemplo, é possível animar a largura de um retângulo, o ângulo de um RotateTransform ou o valor de cor de um botão. Esse tipo de animação personalizada é chamada de animação de storyboard para distingui-la das animações de biblioteca que o Tempo de Execução do Windows já fornece como tipo de animação pré-configurado. Para as animações de storyboard, use uma animação que possa alterar os valores de um tipo em particular (por exemplo, DoubleAnimation para animar um Double) e coloque essa animação dentro de um Storyboard para controlá-la.

Para ficar animada, a propriedade que você está animando deve ser uma propriedade de dependência. Para saber mais sobre as propriedades de dependência, veja Visão geral das propriedades de dependência. Para saber mais sobre a criação de animações com storyboard personalizadas (incluindo como transformá-las em destino e controlá-las), veja Animações com storyboard.

A maior área do aplicativo de definição da interface do usuário do XAML, onde você definirá animações de storyboard personalizadas se estiver definindo estados visuais para controles no XAML. Você fará isso porque está criando uma nova classe de controle ou porque está remodelando um controle existente que tem estados visuais no seu modelo de controle. Para saber mais, veja Animações de storyboard para estados visuais. Normalmente, essas animações não são transições ao longo do tempo. Elas ocorrem simultaneamente e são mais uma técnica para definir um conjunto de alterações de propriedade de um estado. Elas não aplicam necessariamente um comportamento animado visualmente a uma interface do usuário, apesar de que você verá que os estados visuais dos controles normalmente incluem as próprias animações da biblioteca. Neste caso, as animações de tema aplicam uma mudança com o tempo, apesar de geralmente ser de curta duração.

Tópicos relacionados

Mapa para criar aplicativos em C# ou VB
Sintaxe de Property-path
Visão geral das propriedades de dependência
Animações com storyboard
Animações com storyboard para estados visuais
Animações de quadro chave e animações com função de easing
Storyboard
Storyboard.TargetProperty

 

 

Mostrar:
© 2015 Microsoft