Animações em XAML

As animações podem aprimorar seu aplicativo adicionando movimento e interatividade. Usando as animações da biblioteca de animação do Tempo de Execução do Windows, você pode integrar a aparência do Windows ao seu aplicativo. Este tópico fornece um resumo das animações e exemplos de cenários típicos em que cada um é usado.

As animações da biblioteca de animação do Tempo de Execução do Windows fornecem estes benefícios:

• Moções que se alinham às Diretrizes para animações
• Transições rápidas e fluidas entre estados de interface do usuário que informam, mas não distraem o usuário
• Comportamento visual que indica transições dentro de um aplicativo para o usuário

Por exemplo, quando o usuário adiciona um item a uma lista, em vez de o novo item aparecer instantaneamente na lista, o novo item é animado no lugar. Os outros itens da lista são animados para suas novas posições em um curto período de tempo, abrindo espaço para o item adicionado. O comportamento de transição aqui torna a interação de controle mais aparente para o usuário.

Windows 10, versão 1607 apresenta uma nova API ConnectedAnimationService para implementar animações em que um elemento parece ser animado entre exibições durante uma navegação. Essa API tem um padrão de uso diferente das outras APIs da biblioteca de animação. O uso de ConnectedAnimationService é abordado na página de referência.

A biblioteca de animação não fornece animações para todos os cenários possíveis. Há casos em que talvez você queira criar uma animação personalizada em XAML. Para obter mais informações, consulte Animações com storyboard.

Além disso, para determinados cenários avançados, como animar um item com base na posição de rolagem de um ScrollViewer, os desenvolvedores podem querer usar a interoperação da Camada Visual para implementar animações personalizadas. Consulte Camada Visual para obter mais informações.

Tipos de animações

O sistema de animação do Tempo de Execução do Windows e a biblioteca de animação atendem ao objetivo maior de permitir que controles e outras partes da interface do usuário tenham um comportamento animado. Existem vários tipos distintos de animações.

• As transições de tema são aplicadas automaticamente quando determinadas condições são alteradas na interface do usuário, envolvendo controles ou elementos dos tipos de interface do usuário XAML do Tempo de Execução do Windows predefinidos. Essas são chamadas de transições de tema porque as animações dão suporte à aparência do Windows e definem o que todos os aplicativos fazem para cenários específicos de interface do usuário quando mudam de um modo de interação para outro. As transições de tema fazem parte da biblioteca de animação.
• Animações de tema são animações para uma ou mais propriedades de tipos de interface do usuário XAML predefinidos do Tempo de Execução do Windows. As animações de tema diferem das transições de tema porque as animações de tema têm como alvo um elemento específico e existem em estados visuais específicos dentro de um controle, enquanto as transições de tema são atribuídas a propriedades do controle que existem fora dos estados visuais e influenciam as transições entre esses estados. Muitos dos controles XAML do Tempo de Execução do Windows incluem animações de tema em storyboards que fazem parte de seu modelo de controle, com as animações disparadas por estados visuais. Contanto que você não esteja modificando os modelos, você terá essas animações de tema internas disponíveis para os controles em sua interface do usuário. No entanto, se você substituir modelos, também removerá as animações de tema de controle internas. Para recuperá-los, você deve definir um storyboard que inclua animações de tema dentro do conjunto de estados visuais do controle. Você também pode executar animações de tema de storyboards que não estão dentro de estados visuais e iniciá-las com o método Begin , mas isso é menos comum. As animações de tema fazem parte da biblioteca de animação.
• As transições visuais são aplicadas quando um controle faz a transição de um de seus estados visuais definidos para outro estado. Essas são animações personalizadas que você escreve e normalmente estão relacionadas ao modelo personalizado que você escreve para um controle e às definições de estado visual dentro desse modelo. A animação só é executada durante o tempo entre os estados, e isso normalmente é um curto período de tempo, alguns segundos no máximo. Para obter mais informações, consulte a seção "VisualTransition" de Animações com storyboard para estados visuais.
• As animações com storyboard animam o valor de uma propriedade de dependência do Tempo de Execução do Windows ao longo do tempo. Os storyboards podem ser definidos como parte de uma transição visual ou disparados em tempo de execução pelo aplicativo. Para obter mais informações, consulte Animações com storyboard. Para obter mais informações sobre propriedades de dependência e onde elas existem, consulte Visão geral das propriedades de dependência.
• As animações conectadas fornecidas pela nova API ConnectedAnimationService permitem que os desenvolvedores criem facilmente um efeito em que um elemento parece ser animado entre as exibições durante uma navegação. Essa API está disponível a partir do Windows 10, versão 1607. Consulte ConnectedAnimationService para obter mais informações.

Animações disponíveis na biblioteca

As animações a seguir são fornecidas na biblioteca de animação. Clique no nome de uma animação para saber mais sobre seus principais cenários de uso, como defini-los e ver um exemplo da animação.

• Transição de página: anima transições de página em um quadro.
• Transição de conteúdo e entrada: anima uma parte ou conjunto de conteúdo para dentro ou para fora da exibição.
• Fade in/out e crossfade: mostra elementos ou controles transitórios ou atualiza uma área de conteúdo.
• Ponteiro para cima/para baixo: fornece feedback visual de um toque ou clique em um bloco.
• Reposicionar: Move um elemento para uma nova posição.
• Mostrar/ocultar pop-up: exibe a interface do usuário contextual na parte superior da exibição.
• Mostrar/ocultar interface do usuário de borda: desliza a interface do usuário baseada em borda, incluindo uma interface do usuário grande, como um painel, para dentro ou para fora da exibição.
• Alterações de item de lista: adiciona ou exclui um item de uma lista ou reordena os itens.
• Arrastar/soltar: fornece feedback visual durante uma operação de arrastar e soltar.

Transição de página

Use transições de página para animar a navegação em um aplicativo. Como quase todos os aplicativos usam algum tipo de navegação, as animações de transição de página são o tipo mais comum de animação de tema usado pelos aplicativos. Consulte NavigationThemeTransition para obter mais informações sobre as APIs de transição de página.

Transição de conteúdo e transição de entrada

Use animações de transição de conteúdo (ContentThemeTransition) para mover uma parte ou um conjunto de conteúdo para dentro ou para fora do modo de exibição atual. Por exemplo, as animações de transição de conteúdo mostram o conteúdo que não estava pronto para ser exibido quando a página foi carregada pela primeira vez ou quando o conteúdo é alterado em uma seção de uma página.

EntranceThemeTransition representa um movimento que pode ser aplicado ao conteúdo quando uma página ou uma grande seção da interface do usuário é carregada pela primeira vez. Assim, a primeira aparição do conteúdo pode oferecer feedback diferente do que uma alteração no conteúdo. EntranceThemeTransition é equivalente a um NavigationThemeTransition com os parâmetros padrão, mas pode ser usado fora de um Frame.

Fade in/out e crossfade

Use animações de fade in e fade out para mostrar ou ocultar a interface do usuário ou os controles transitórios. Em XAML, eles são representados como FadeInThemeAnimation e FadeOutThemeAnimation. Um exemplo está em uma barra de aplicativos na qual novos controles podem aparecer devido à interação do usuário. Outro exemplo é uma barra de rolagem transitória ou um indicador de movimento panorâmico que desaparece depois que nenhuma entrada do usuário é detectada por algum tempo. Os aplicativos também devem usar o fade in animation ao fazer a transição de um item de espaço reservado para o item final à medida que o conteúdo é carregado dinamicamente.

Use uma animação de crossfade para suavizar a transição quando o estado de um item estiver mudando; por exemplo, quando o aplicativo atualiza o conteúdo atual de uma exibição. A biblioteca de animação XAML não fornece uma animação de crossfade dedicada (sem equivalente para crossFade), mas você pode obter o mesmo resultado usando FadeInThemeAnimation e FadeOutThemeAnimation com tempo sobreposto.

Ponteiro para cima/para baixo

Use as animações PointerUpThemeAnimation e PointerDownThemeAnimation para fornecer comentários ao usuário para um toque ou clique bem-sucedido em um bloco. Por exemplo, quando um usuário clica ou toca para baixo em um bloco, a animação do ponteiro para baixo é reproduzida. Depois que o clique ou toque for liberado, a animação do ponteiro para cima será reproduzida.

Reposicionar

Use as animações de reposicionamento (RepositionThemeAnimation ou RepositionThemeTransition) para mover um elemento para uma nova posição. Por exemplo, mover os cabeçalhos em um controle de itens usa a animação de reposicionamento.

Mostrar/ocultar pop-up

Use PopInThemeAnimation e PopOutThemeAnimation ao mostrar e ocultar um Pop-up ou uma interface do usuário contextual semelhante na parte superior da exibição atual. PopupThemeTransition é uma transição de tema que é um feedback útil se você quiser ignorar um pop-up.

Mostrar/ocultar interface do usuário de borda

Use a animação EdgeUIThemeTransition para deslizar a interface do usuário pequena e baseada em borda para dentro e para fora da exibição. Por exemplo, use essas animações ao mostrar uma barra de aplicativos personalizada na parte superior ou inferior da tela ou uma superfície de interface do usuário para erros e avisos na parte superior da tela.

Use a animação PaneThemeTransition para mostrar e ocultar um painel ou painel. Isso é para uma interface do usuário grande baseada em borda, como um teclado personalizado ou um painel de tarefas.

Listar alterações de itens

Use a animação AddDeleteThemeTransition para adicionar comportamento animado ao adicionar ou excluir um item em uma lista existente. Para adicionar, a transição primeiro reposicionará os itens existentes na lista para liberar espaço para os novos itens e, em seguida, adicionará os novos itens. Para exclusão, a transição remove itens de uma lista e, se necessário, reposiciona os itens restantes da lista depois que os itens excluídos forem removidos.

Há também um ReorderThemeTransition separado que você aplica se um item mudar de posição em uma lista. Isso é animado de forma diferente de excluir um item e adicioná-lo em um novo local com as animações de exclusão/adição associadas.

Observe que essas animações estão incluídas nos modelos ListView e GridView padrão, portanto, você não precisa adicionar manualmente essas animações se já estiver usando esses controles.

Arrastar/soltar

Use as animações de arrastar (DragItemThemeAnimation, DragOverThemeAnimation) e soltar a animação (DropTargetItemThemeAnimation) para fornecer comentários visuais quando o usuário arrastar ou soltar um item.

Quando ativas, as animações mostram ao usuário que a lista pode ser reorganizada em torno de um item solto. É útil que os usuários saibam onde o item será colocado em uma lista se ele for solto no local atual. As animações fornecem feedback visual de que um item que está sendo arrastado pode ser solto entre dois outros itens na lista e que esses itens sairão do caminho.

Usando animações com controles personalizados

A tabela a seguir resume nossas recomendações para qual animação você deve usar ao criar uma versão personalizada desses controles do Tempo de Execução do Windows:

Exemplos de animação de transição

O ideal é que seu aplicativo use animações para aprimorar 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 para que, quando algo entrar ou sair da tela ou for alterado, a animação chame a atenção do usuário para a alteração. Por exemplo, seus botões podem aparecer e desaparecer rapidamente da vista, em vez de apenas aparecer e desaparecer. Criamos várias APIs que podem ser usadas para criar transições de animação recomendadas ou típicas que sejam consistentes. O exemplo aqui mostra como aplicar uma animação a um botão para que ele deslize rapidamente para a exibição.

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

Neste código, adicionamos o objeto EntranceThemeTransition à coleção de transição do botão. Agora, quando o botão é renderizado pela primeira vez, ele desliza rapidamente para a exibição, em vez de apenas aparecer. Você pode definir algumas propriedades no objeto de animação para ajustar a distância que ele desliza e de qual direção, mas na verdade é uma API simples para um cenário específico, ou seja, para fazer uma entrada atraente.

Você também pode definir temas de animação de transição nos recursos de estilo do seu aplicativo, permitindo que você aplique o efeito uniformemente. Este exemplo é equivalente ao anterior, só que é 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, no entanto, as transições de tema são ainda mais interessantes quando você as aplica a um contêiner de objetos. Quando você faz isso, todos os objetos filho do contêiner participam da transição. No exemplo a seguir, um EntranceThemeTransition é aplicado 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 filhos da Grade fazem a transição para a exibição um após o outro de uma maneira visualmente agradável, em vez de todos de uma vez, como seria o caso se você aplicasse essa animação aos retângulos individualmente.

Aqui está uma demonstração desta animação:

Os objetos filho de um contêiner também podem refluir quando um ou mais desses filhos mudam de posição. No exemplo a seguir, aplicamos um RepositionThemeTransition a uma grade de retângulos. Quando você remove um dos retângulos, todos os outros retângulos refluem para sua nova posição.

<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);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

Você pode aplicar várias animações de transição a um único objeto ou contêiner de objetos. Por exemplo, se você quiser que a lista de retângulos seja animada na exibição e também animada quando eles mudarem de posição, poderá aplicar RepositionThemeTransition e EntranceThemeTransition da seguinte forma:

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

Há vários efeitos de transição para criar animações em seus elementos de interface do usuário à medida que eles são adicionados, removidos, reordenados e assim por diante. Todos os nomes dessas APIs contêm "ThemeTransition":

Exemplos de animação de tema

As animações de transição são simples de aplicar. Mas você pode querer ter um pouco mais de controle sobre o tempo e a ordem de seus efeitos de animação. Você pode usar animações de tema para habilitar mais controle enquanto ainda usa um tema consistente para o comportamento da animação. As animações de tema também exigem menos marcação do que as animações personalizadas. Aqui, usamos o FadeOutThemeAnimation para fazer um retângulo desaparecer da exibição.

<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();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::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 (a transição) que a executa automaticamente. Você deve usar um Storyboard para conter uma animação de tema ao defini-la em XAML. Você também pode alterar o comportamento padrão da animação. Por exemplo, você pode diminuir o fade-out aumentando o valor de tempo de duração no FadeOutThemeAnimation.

Observação Para mostrar técnicas básicas de animação, estamos usando o código do aplicativo para iniciar a animação chamando 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 Storyboard. No entanto, normalmente não é assim que você inclui animações de biblioteca em aplicativos. Em vez disso, você geralmente integra as animações da biblioteca aos estilos e modelos XAML aplicados a controles ou elementos. Aprender sobre modelos e estados visuais é um pouco mais complicado. Mas abordamos como você usaria 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 da interface do usuário para criar efeitos de animação. Todos os nomes dessas APIs contêm "ThemeAnimation":

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 objetos animando um ou mais de seus valores de propriedade. Por exemplo, você pode animar a largura de um retângulo, o ângulo de um RotateTransform ou o valor de cor de um botão. Chamamos esse tipo de animação personalizada de animação com storyboard, para distingui-la das animações de biblioteca que o Tempo de Execução do Windows já fornece como um tipo de animação pré-configurado. Para animações com storyboard, você usa uma animação que pode alterar valores de um tipo específico (por exemplo , DoubleAnimation para animar um Double) e coloca essa animação em um Storyboard para controlá-la.

Para ser animada, a propriedade que você está animando deve ser uma propriedade de dependência. Para obter mais informações sobre propriedades de dependência, consulte Visão geral das propriedades de dependência. Para obter mais informações sobre como criar animações de storyboard personalizadas, incluindo como direcioná-las e controlá-las, consulte Animações com storyboard.

A maior área de definição da interface do usuário do aplicativo em XAML em que você definirá animações de storyboard personalizadas é se você estiver definindo estados visuais para controles em XAML. Você fará isso porque está criando uma nova classe de controle ou porque está modelando novamente um controle existente que tem estados visuais em seu modelo de controle. Para obter mais informações, consulte Animações com storyboard para estados visuais.