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 duas exibições diferentes. Isso ajuda o usuário a manter o 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 no modo de exibição de origem até seu destino no novo modo de exibição. Isso enfatiza o conteúdo comum entre os modos de exibição e cria um efeito dinâmico e bonito como parte de uma transição.

O aplicativo Galeria da WinUI 3 inclui exemplos interativos da maioria dos controles, recursos e funcionalidades da WinUI 3. Obtenha o aplicativo na Microsoft Store ou obtenha o código-fonte no GitHub

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

Animação conectada e o sistema de design fluente

O Fluent Design System ajuda você a criar uma interface do usuário moderna e em negrito que incorpora luz, profundidade, movimento, material e escala. A animação conectada é um componente do Fluent Design System que adiciona movimento ao seu aplicativo. Para saber mais, consulte Design para aplicativos do Windows.

Por que a animação conectada?

Ao navegar entre 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 poderosa metáfora visual que enfatiza a relação entre duas visualizações, direcionando o foco do usuário para o conteúdo compartilhado entre elas. Além disso, animações conectadas adicionam interesse visual e polimento à navegação de página que podem ajudar a diferenciar o design de movimento do seu aplicativo.

Quando usar animação conectada

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 uma simulação 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 de destino.

Configurar animação conectada

As animações conectadas incorporam ainda mais o design fluente, fornecendo configurações de animação personalizadas especificamente para navegação de página para frente e para trás.

Especifique uma configuração de animação definindo a propriedade Configuração 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.

Configuração de ConnectedAnimationService

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

• DefaultDuration
• 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.

Como implementar a 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 para o 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 nesta 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 certa 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 de encaminhamento

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

A configuração de animação recomendada para navegação avançada é GravityConnectedAnimationConfiguration. Esse é o padrão, portanto, você não precisa definir a propriedade Configuração , a menos que deseje 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 de volta

Para navegação invertida (Page_B para 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 flexibilização desacelerada.

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 perturbadora. Se você preparar uma animação e não iniciá-la dentro de 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 contenha 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 um modo de exibição de detalhes, use TryStartConnectedAnimationAsync. Se você tiver carregado a fonte de dados para o ListView, TryStartConnectedAnimationAsync aguardará para iniciar a animação até que o contêiner de item correspondente tenha sido 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 de animação conectado, animando em conjunto com o elemento de animação conectado à medida que se move pela tela. Animações coordenadas podem adicionar mais interesse visual a uma transição e atrair ainda mais a atenção do usuário para o contexto compartilhado entre as exibições de origem e de destino. Nessas imagens, a interface do usuário da 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 serão "swoop" ao lado do elemento conectado para que os elementos permaneçam verdadeiramente coordenados.

Use a sobrecarga de dois parâmetros do 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 });
     }
}

Recommendations

• 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 avançada.
• Use DirectConnectedAnimationConfiguration para navegação de retorno.
• Não aguarde solicitações de rede ou outras operações assíncronas de longa execução entre preparar e iniciar 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 no modo de exibição de destino.
• Use SuppressNavigationTransitionInfo para impedir uma animação de transição em um Quadro se você estiver usando ConnectedAnimationService, já que 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.

UWP e WinUI 2

Artigos relacionados

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition