Partilhar via

Animações em XAML

As animações podem melhorar seu aplicativo adicionando movimento e interatividade. Usando as animações da biblioteca de animações 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.

Sugestão

Os controlos do Windows Runtime para XAML incluem certos tipos de animações como comportamentos incorporados que vêm de uma biblioteca de animações. Usando esses controles em seu aplicativo, você pode obter a aparência animada sem ter que programá-lo sozinho.

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

  • Movimentos que se alinham às Diretrizes de para animações
  • Transições rápidas e fluidas entre estados da 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 utilizador adiciona um item a uma lista, o novo item, ao invés de aparecer instantaneamente, é animado até à sua posição. Os outros itens da lista são animados para suas novas posições durante 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.

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

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

Além disso, para certos 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 Visual Layer para implementar animações personalizadas. Consulte Visual Layer 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ções servem ao objetivo maior de permitir que os controles e outras partes da interface do usuário tenham um comportamento animado. Existem vários tipos distintos de animações.

  • Transições de tema são aplicadas automaticamente quando determinadas condições mudam na UI, envolvendo controlos ou elementos dos tipos de UI XAML predefinidos do Windows Runtime. Essas são denominadas transições de tema porque as animações oferecem 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ções.
  • As animações de tema são animações para uma ou mais propriedades de tipos de UI XAML predefinidos do Windows Runtime. As animações de tema diferem das transições de tema porque as animações de tema visam 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 controlos XAML do Windows Runtime incluem animações de tema em storyboards que fazem parte do seu template de controlo, estando as animações acionadas 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 a partir de storyboards que não estão dentro dos estados visuais e iniciá-los com o método Begin, mas isso é menos comum. As animações temáticas fazem parte da biblioteca de animações.
  • Transições visuais são aplicadas quando um controle transita 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 estados, e isso normalmente é um curto período de tempo, alguns segundos no máximo. Para 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 Windows Runtime ao longo do tempo. Os storyboards podem ser definidos como parte de uma transição visual ou acionados em tempo de execução pelo aplicativo. Para mais informações, veja Animações com storyboards. Para saber mais sobre propriedades de dependência e onde elas existem, veja 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 animar entre modos de exibição durante uma navegação. Esta 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ções. 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

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 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 seção grande da interface do usuário é carregada pela primeira vez. Assim, a primeira aparência do conteúdo pode oferecer um 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 umFrame.

Desvanecimento de entrada/saída e cruzamento de desvanecimento

Use animações de fade in e fade out para mostrar ou ocultar a interface do usuário ou 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 reorientação que é apagado depois de não ser detetada qualquer entrada do utilizador por algum tempo. As aplicações também devem usar a animação de fade in ao fazerem 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 um modo de exibição. A biblioteca de animações XAML não fornece uma animação de crossfade dedicada, 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 dar feedback ao utilizador relativamente a um toque ou clique bem-sucedido num bloco. Por exemplo, quando um utilizador clica ou toca numa tile, a animação de pressão do ponteiro é reproduzida. Assim que o clique ou toque for solto, será reproduzida a animação do ponteiro para cima.

Reposicionamento

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

Mostrar / ocultar pop-up

Use o PopInThemeAnimation e o PopOutThemeAnimation quando mostrar e ocultar um Popup ou uma interface de utilizador contextual semelhante no topo da vista atual. PopupThemeTransition é uma transição de tema que fornece um feedback útil se se pretender fechar um pop-up.

Mostrar/ocultar interface de utilizador da borda

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

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

Alterações de itens de lista

Use a animação AddDeleteThemeTransition para adicionar um comportamento animado quando adicionar ou eliminar um item numa lista existente. Para adicionar, a transição primeiro reposicionará os itens existentes na lista para abrir espaço para os novos itens e, em seguida, adicionará os novos itens. Para excluir, 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 se 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 padrão de ListView e de GridView , portanto, não precisa adicionar manualmente essas animações se já estiver a utilizar esses controles.

Arrastar/soltar

Utilize as animações de arrastar (DragItemThemeAnimation, DragOverThemeAnimation) e de soltar (DropTargetItemThemeAnimation) para dar feedback visual quando o utilizador arrasta ou solta um item.

Quando ativa, as animações mostram ao usuário que a lista pode ser reorganizada em torno de um item descartado. É útil para os usuários saber onde o item será colocado em uma lista se ele for deixado no local atual. As animações dão 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:

Tipo de interface do usuário Animação recomendada
Caixa de diálogo FadeInThemeAnimation e FadeOutThemeAnimation
Menu Desdobrável PopInThemeAnimation e PopOutThemeAnimation
Dica de ferramenta FadeInThemeAnimation e FadeOutThemeAnimation
Menu de contexto PopInThemeAnimation e PopOutThemeAnimation
Barra de comandos EdgeUIThemeTransition
Painel de tarefas ou painel baseado em borda PaneThemeTransition
Conteúdo de qualquer contêiner de interface do usuário ContentThemeTransition
Para controlos ou se não se aplicar nenhuma outra animação FadeInThemeAnimation e FadeOutThemeAnimation

Exemplos de animação de transição

Idealmente, seu aplicativo usa animações para aprimorar a interface do usuário ou torná-la mais atraente sem incomodar seus 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 mudar de outra forma, a animação chame a atenção do usuário para a alteração. Por exemplo, os seus botões podem surgir e desaparecer gradualmente em vez de apenas aparecerem e desaparecerem. Criamos várias APIs que podem ser usadas para criar transições de animação recomendadas ou típicas que são 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 visualizaçã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 que direção, mas na verdade é para ser 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 Grelha surgem na visualização um após o outro de forma visualmente agradável, em vez de todos de uma só vez, como seria o caso se esta animação fosse aplicada aos retângulos individualmente.

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

Animação mostrando o retângulo filho surgindo em cena

Os objetos filho de um contêiner também podem refluir quando uma ou mais dessas crianças mudam de posição. No exemplo a seguir, aplicamos um RepositionThemeTransition a uma grelha 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);
    }                         
}

Você pode aplicar várias animações de transição a um único objeto ou contêiner de objetos. Por exemplo, se pretenderes que a lista de retângulos se torne visível através de animação e também seja animada quando mudar de posição, podes aplicar o RepositionThemeTransition e o EntranceThemeTransition assim:

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

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

API Description
TransiçãoDeTemaDeNavegação Fornece uma animação de personalidade do Windows para navegação de página em um Frame.
AdicionarExcluirTransiçãoDeTema Fornece o comportamento de transição animada para quando os controles adicionam ou excluem filhos ou conteúdo. Normalmente, o controlo é um contentor de itens.
ContentThemeTransition Fornece o comportamento de transição animada para quando o conteúdo de um controle está mudando. Você pode aplicar isso além de AddDeleteThemeTransition.
EdgeUIThemeTransition Fornece o comportamento de transição animada para uma transição de interface do usuário de borda (pequena).
EntradaTemaTransição Fornece o comportamento de transição animado para quando os controles aparecem pela primeira vez.
PaneThemeTransition Fornece o comportamento de transição animada para uma transição de interface do usuário de painel (interface do usuário de borda grande).
TransiçãoDeTemaPopup Fornece o comportamento de transição animada que se aplica aos componentes pop-in dos controlos (por exemplo, uma UI semelhante a um tooltip num objeto) à medida que aparecem.
ReorderThemeTransition Fornece o comportamento de transição animada para quando os controles de exibição de lista alteram a ordem dos itens. Normalmente, isso acontece como resultado de uma operação de arrastar e soltar. Diferentes controles e temas podem ter características variadas para as animações.
ReposicionamentoTemaTransição Fornece o comportamento de transição animado para quando os controles mudam de posição.

Exemplos de animação temática

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 dos seus efeitos de animação. Você pode usar animações de tema para permitir mais controle enquanto ainda usa um tema consistente para como sua animação se comporta. As animações de tema também exigem menos marcação do que as animações personalizadas. Aqui, usamos o FadeOutThemeAnimation para fazer com que um retângulo desapareça da vista.

<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 (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 a velocidade do fade-out aumentando o valor Duração tempo 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 do Storyboard. Você pode controlar como as animações do Storyboard são executadas usando os métodos Begin, Stop, Pause e ResumeStoryboard . No entanto, normalmente não é assim que você inclui animações de biblioteca em aplicativos. Em vez disso, você geralmente integra as animações de biblioteca nos estilos e modelos XAML aplicados a controles ou elementos. Aprender sobre templates e estados visuais é um pouco mais complexo. Mas abordamos como se usariam as animações de biblioteca em estados visuais como parte do tópico animações storybordadas 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 API contêm "ThemeAnimation":

API Description
DragItemThemeAnimation Representa a animação pré-configurada que se aplica aos elementos do item 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 de queda.
FadeInThemeAnimation A animação de opacidade pré-configurada que se aplica aos controles quando eles aparecem pela primeira vez.
FadeOutThemeAnimation A animação de opacidade pré-configurada que se aplica aos controles quando eles são removidos da interface do usuário ou ocultos.
PointerDownThemeAnimation A animação pré-configurada para a ação do usuário que toca ou clica em um item ou elemento.
PointerUpThemeAnimation A animação pré-configurada para a ação do usuário que é executada depois que um usuário toca em um item ou elemento e a ação é liberada.
PopInThemeAnimation A animação pré-configurada que se aplica aos componentes pop-in dos controles à medida que eles aparecem. Esta animação combina opacidade e tradução.
PopOutThemeAnimation A animação pré-configurada que se aplica aos componentes pop-in dos controles à medida que são fechados ou removidos. Esta animação combina opacidade e tradução.
RepositionThemeAnimation A animação pré-configurada para um objeto à medida que ele é reposicionado.
AnimaçãoFecharTemaDividido A animação pré-configurada que oculta uma interface de utilizador de destino usando um estilo de animação semelhante ao de abrir e fechar de um ComboBox .
SplitOpenThemeAnimation A animação pré-configurada revela uma interface do utilizador de destino através de uma animação ao estilo de um abrir e fechar de uma ComboBox.
DrillInThemeAnimation Representa uma animação pré-configurada que é executada quando um usuário navega para frente em uma hierarquia lógica, como de uma página de listagem para uma página de detalhes.
DrillOutThemeAnimation Representa uma animação pré-configurada que é executada quando um usuário navega para trás em uma hierarquia lógica, como de uma página de detalhes para uma página de listagem.

Crie as 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. Pode animar objetos ao animar um ou mais dos valores das suas propriedades. 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 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é-configurada. Para animações com Storyboard, utiliza-se uma animação que pode alterar valores de um tipo específico (por exemplo, DoubleAnimation para animar um Double) e coloca-se essa animação dentro de um Storyboard para controlá-la.

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

A área mais importante para definir a interface do usuário da aplicação em XAML, onde se definem animações personalizadas com storyboard, é ao definir estados visuais para controlos em XAML. Você fará isso porque está criando uma nova classe de controle ou porque está remodelando um controle existente que tem estados visuais em seu modelo de controle. Para saber mais, veja Animações com storyboard para estados visuais.

  • Last updated on