Animação conectada para aplicativos do Windows

As animações conectadas permitem criar uma experiência de navegação dinâmica e atraente animando a transição de um elemento entre dois modos de exibição diferentes. Isso ajuda o usuário a manter seu contexto e fornece continuidade entre as exibições.

Em uma animação conectada, um elemento parece "continuar" entre duas exibições durante uma alteração no conteúdo da interface do usuário, voando pela tela de sua localização na exibição de origem até seu destino na nova exibição. Isso enfatiza o conteúdo comum entre as visualizações e cria um efeito bonito e dinâmico como parte de uma transição.

APIs importantes: classe ConnectedAnimation, classe ConnectedAnimationService

Exemplos

Galeria WinUI 2
	Se você tiver o aplicativo WinUI 2 Gallery instalado, clique aqui para abrir o aplicativo e ver a Animação Conectada em ação. Obtenha o aplicativo WinUI 2 Gallery (Microsoft Store) Obtenha o código-fonte (GitHub)

Neste breve vídeo, um aplicativo usa uma animação conectada para animar uma imagem de item à medida que ela "continua" a se tornar parte do cabeçalho da próxima página. O efeito ajuda a manter o contexto do usuário durante a transição.

Animação conectada e o Fluent Design System

O Sistema de Design Fluente ajuda a criar uma interface do usuário arrojada e moderna que incorpora luz, profundidade, movimento, materiais e escala. A animação conectada é um componente do Fluent Design System que adiciona movimento ao seu aplicativo. Para saber mais, confira a Visão geral do Fluent Design.

Por que animação conectada?

Ao navegar entre as páginas, é importante que o usuário entenda qual novo conteúdo está sendo apresentado após a navegação e como ele se relaciona com sua intenção ao navegar. As animações conectadas fornecem uma metáfora visual poderosa que enfatiza a relação entre duas exibições, atraindo o foco do usuário para o conteúdo compartilhado entre elas. Além disso, as animações conectadas adicionam interesse visual e aprimoram a navegação da página, o que pode ajudar a diferenciar o design de movimento do seu aplicativo.

Quando usar a animação conectada

As animações conectadas geralmente são usadas ao alterar páginas, embora possam ser aplicadas a qualquer experiência em que você esteja alterando o conteúdo em uma interface do usuário e queira que o usuário mantenha o contexto. Você deve considerar o uso de uma animação conectada em vez de um detalhamento na transição de navegação sempre que houver uma imagem ou outra parte da interface do usuário compartilhada entre as exibições de origem e destino.

Configurar animação conectada

Importante

Esse recurso requer que a versão de destino do aplicativo seja Windows 10, versão 1809 (SDK 17763) ou posterior. A propriedade Configuration não está disponível em SDKs anteriores. Você pode direcionar uma versão mínima inferior ao SDK 17763 usando código adaptável ou XAML condicional. Para obter mais informações, consulte Aplicativos adaptáveis de versão.

A partir do Windows 10, versão 1809, as animações conectadas incorporam ainda mais o design fluente, fornecendo configurações de animação adaptadas especificamente para navegação de página para frente e para trás.

Você especifica uma configuração de animação definindo a propriedade Configuration no ConnectedAnimation. (Mostraremos exemplos disso na próxima seção.)

Esta tabela descreve as configurações disponíveis. Para obter mais informações sobre os princípios de movimento aplicados nessas animações, consulte Direcionalidade e gravidade.

GravityConnectedAnimationConfiguration
Essa é a configuração padrão e é recomendada para navegação direta.
À medida que o usuário navega para frente no aplicativo (A a B), o elemento conectado parece "sair da página" fisicamente. Ao fazer isso, o elemento parece avançar no espaço-z e cai um pouco como efeito da gravidade se apoderando. Para superar os efeitos da gravidade, o elemento ganha velocidade e acelera até sua posição final. O resultado é uma animação de "escala e mergulho".

DirectConnectedAnimationConfiguration
À medida que o usuário navega para trás no aplicativo (B para A), a animação é mais direta. O elemento conectado se traduz linearmente de B para A usando uma função de atenuação de Bézier cúbica desacelerada. A funcionalidade visual regressiva retorna o usuário ao seu estado anterior o mais rápido possível, mantendo o contexto do fluxo de navegação.

BasicConnectedAnimationConfiguration
Essa é a animação padrão (e única) usada em versões anteriores ao Windows 10, versão 1809 (SDK 17763).

Configuração do ConnectedAnimationService

A classe ConnectedAnimationService tem duas propriedades que se aplicam às animações individuais em vez do serviço geral.

• Duração padrão
• Função DefaultEasingFunction

Para obter os vários efeitos, algumas configurações ignoram essas propriedades em ConnectedAnimationService e usam seus próprios valores, conforme descrito nesta tabela.

Configuração	Respeita DefaultDuration?	Respeita DefaultEasingFunction?
Gravidade	Sim	Sim* *A tradução básica de A para B usa essa função de atenuação, mas o "mergulho da gravidade" tem sua própria função de atenuação.
Direto	Nenhum Anima mais de 150ms.	Nenhum Usa a função de atenuação Desacelerar.
Basic	Sim	Sim

Como implementar animação conectada

A configuração de uma animação conectada envolve duas etapas:

1. Prepare um objeto de animação na página de origem, que indica ao sistema que o elemento de origem participará da animação conectada.
2. Inicie a animação na página de destino, passando uma referência ao elemento de destino.

Ao navegar da página de origem, chame ConnectedAnimationService.GetForCurrentView para obter uma instância de ConnectedAnimationService. Para preparar uma animação, chame PrepareToAnimate nessa instância e passe uma chave exclusiva e o elemento de interface do usuário que você deseja usar na transição. A chave exclusiva permite recuperar a animação posteriormente na página de destino.

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

Quando a navegação ocorrer, inicie a animação na página de destino. Para iniciar a animação, chame ConnectedAnimation.TryStart. Você pode recuperar a instância de animação correta chamando ConnectedAnimationService.GetAnimation com a chave exclusiva fornecida ao criar a animação.

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

Navegação direta

Este exemplo mostra como usar ConnectedAnimationService para criar uma transição para navegação direta entre duas páginas (Page_A para Page_B).

A configuração de animação recomendada para navegação direta é GravityConnectedAnimationConfiguration. Esse é o padrão, portanto, você não precisa definir a propriedade Configuration , a menos que queira especificar uma configuração diferente.

Configure a animação na página de origem.

<!-- Page_A.xaml -->

<Image x:Name="SourceImage"
       HorizontalAlignment="Left" VerticalAlignment="Top"
       Width="200" Height="200"
       Stretch="Fill"
       Source="Assets/StoreLogo.png"
       PointerPressed="SourceImage_PointerPressed"/>

// Page_A.xaml.cs

private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    // Navigate to detail page.
    // Suppress the default animation to avoid conflict with the connected animation.
    Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    ConnectedAnimationService.GetForCurrentView()
        .PrepareToAnimate("forwardAnimation", SourceImage);
    // You don't need to explicitly set the Configuration property because
    // the recommended Gravity configuration is default.
    // For custom animation, use:
    // animation.Configuration = new BasicConnectedAnimationConfiguration();
}

Inicie a animação na página de destino.

<!-- Page_B.xaml -->

<Image x:Name="DestinationImage"
       Width="400" Height="400"
       Stretch="Fill"
       Source="Assets/StoreLogo.png" />

// Page_B.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
    if (animation != null)
    {
        animation.TryStart(DestinationImage);
    }
}

Navegação traseira

Para navegação regressiva (Page_B a Page_A), siga as mesmas etapas, mas as páginas de origem e destino são invertidas.

Quando o usuário navega de volta, ele espera que o aplicativo seja retornado ao estado anterior o mais rápido possível. Portanto, a configuração recomendada é DirectConnectedAnimationConfiguration. Essa animação é mais rápida, mais direta e usa a atenuação de desaceleração.

Configure a animação na página de origem.

// Page_B.xaml.cs

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    if (e.NavigationMode == NavigationMode.Back)
    {
        ConnectedAnimation animation = 
            ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);

        // Use the recommended configuration for back animation.
        animation.Configuration = new DirectConnectedAnimationConfiguration();
    }
}

Inicie a animação na página de destino.

// Page_A.xaml.cs

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    ConnectedAnimation animation =
        ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
    if (animation != null)
    {
        animation.TryStart(SourceImage);
    }
}

Entre o momento em que a animação é configurada e quando ela é iniciada, o elemento de origem aparece congelado acima de outra interface do usuário no aplicativo. Isso permite que você execute qualquer outra animação de transição simultaneamente. Por esse motivo, você não deve esperar mais de ~250 milissegundos entre as duas etapas, pois a presença do elemento de origem pode se tornar uma distração. Se você preparar uma animação e não iniciá-la em três segundos, o sistema descartará a animação e todas as chamadas subsequentes para TryStart falharão.

Animação conectada em experiências de lista e grade

Muitas vezes, você desejará criar uma animação conectada de ou para um controle de lista ou grade. Você pode usar os dois métodos em ListView e GridView, PrepareConnectedAnimation e TryStartConnectedAnimationAsync, para simplificar esse processo.

Por exemplo, digamos que você tenha um ListView que contém um elemento com o nome "PortraitEllipse" em seu modelo de dados.

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Para preparar uma animação conectada com a elipse correspondente a um determinado item de lista, chame o método PrepareConnectedAnimation com uma chave exclusiva, o item e o nome "PortraitEllipse".

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

Para iniciar uma animação com esse elemento como destino, como ao navegar de volta de uma exibição de detalhes, use TryStartConnectedAnimationAsync. Se você acabou de carregar a fonte de dados para o ListView, TryStartConnectedAnimationAsync aguardará para iniciar a animação até que o contêiner de item correspondente seja criado.

private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
    ContactsItem item = GetPersistedItem(); // Get persisted item
    if (item != null)
    {
        ContactsListView.ScrollIntoView(item);
        ConnectedAnimation animation =
            ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
        if (animation != null)
        {
            await ContactsListView.TryStartConnectedAnimationAsync(
                animation, item, "PortraitEllipse");
        }
    }
}

Animação coordenada

Uma animação coordenada é um tipo especial de animação de entrada em que um elemento aparece junto com o destino da animação conectada, animando em conjunto com o elemento de animação conectado à medida que ele se move pela tela. As animações coordenadas podem adicionar mais interesse visual a uma transição e chamar ainda mais a atenção do usuário para o contexto compartilhado entre as exibições de origem e destino. Nessas imagens, a interface do usuário de legenda do item é animada usando uma animação coordenada.

Quando uma animação coordenada usa a configuração de gravidade, a gravidade é aplicada ao elemento de animação conectado e aos elementos coordenados. Os elementos coordenados "mergulharão" ao lado do elemento conectado para que os elementos permaneçam verdadeiramente coordenados.

Use a sobrecarga de dois parâmetros de TryStart para adicionar elementos coordenados a uma animação conectada. Este exemplo demonstra uma animação coordenada de um layout de grade chamado "DescriptionRoot" que entra em conjunto com um elemento de animação conectado chamado "CoverImage".

<!-- DestinationPage.xaml -->
<Grid>
    <Image x:Name="CoverImage" />
    <Grid x:Name="DescriptionRoot" />
</Grid>

// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
    var animationService = ConnectedAnimationService.GetForCurrentView();
    var animation = animationService.GetAnimation("coverImage");

    if (animation != null)
    {
        // Don’t need to capture the return value as we are not scheduling any subsequent
        // animations
        animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
     }
}

O que fazer e o que não fazer

• Use uma animação conectada em transições de página em que um elemento é compartilhado entre as páginas de origem e de destino.
• Use GravityConnectedAnimationConfiguration para navegação direta.
• Use DirectConnectedAnimationConfiguration para navegação regressiva.
• Não espere por solicitações de rede ou outras operações assíncronas de longa execução entre a preparação e o início de uma animação conectada. Talvez seja necessário pré-carregar as informações necessárias para executar a transição com antecedência ou usar uma imagem de espaço reservado de baixa resolução enquanto uma imagem de alta resolução é carregada na exibição de destino.
• Use SuppressNavigationTransitionInfo para evitar uma animação de transição em um Frame se você estiver usando ConnectedAnimationService, pois as animações conectadas não devem ser usadas simultaneamente com as transições de navegação padrão. Consulte NavigationThemeTransition para obter mais informações sobre como usar transições de navegação.

Artigos relacionados

ConnectedAnimation

ConnectedAnimationService

Transição do Tema de Navegação