Animação conectada para aplicativos do Windows

As animações conectadas permitem que você crie uma experiência de navegação dinâmica e convincente pela animação da transição de um elemento entre duas exibições diferentes. Isso ajuda o usuário a manter o contexto e oferece continuidade entre os modos de exibição.

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 no novo modo de exibição. Isso enfatiza o conteúdo comum entre as exibições e cria um efeito bonito e dinâmico como parte de uma transição.

APIs importantes: classe ConnectedAnimation, classe ConnectedAnimationService

Exemplos

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

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

Animação conectada e o Sistema de Design Fluent

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

Por que animação conectada?

Ao navegar entre páginas, é importante para o usuário entender qual novo conteúdo está sendo apresentado após a navegação e como isso se relaciona com sua intenção ao navegar. As animações conectadas fornecem uma metáfora visual poderosa que enfatiza a relação entre dois modos de exibição, chamando a atenção do usuário para o conteúdo compartilhado entre eles. Além disso, animações conectadas adicionam brilho e interesse visual à 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 na troca de páginas, embora possam ser aplicadas em qualquer experiência onde ocorra troca de conteúdo na interface de usuário e o usuário deva manter o contexto. Você deve considerar usar uma animação conectada em vez de um furo na transição da navegação sempre que há uma imagem ou outra parte da interface de usuário compartilhada entre as exibições de origem e destino.

Configurar animação conectada

Importante

Esse recurso exige 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 de Windows 10, versão 1809, 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 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 avançada.
À medida que o usuário navega para frente no aplicativo (A para B), o elemento conectado parece fisicamente "efetuar pull da página". Ao fazer isso, o elemento parece seguir em frente no espaço z e cai um pouco como um efeito da gravidade tomando conta. Para superar os efeitos da gravidade, o elemento ganha velocidade e acelera em sua posição final. O resultado é uma animação de "escala e queda".

DirectConnectedAnimationConfiguration
À medida que o usuário navega para trás no aplicativo (B para A), a animação é mais direta. O elemento conectado converte linearmente de B para A usando uma função de easing bezier cúbica desacelerada. A acessibilidade visual com versões anteriores retorna o usuário ao estado anterior o mais rápido possível, mantendo o contexto do fluxo de navegação.

BasicConnectedAnimationConfiguration
Essa é a animação padrão (e somente) 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.

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

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

Como implementar a animação conectada

Configurar 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 correta chamando ConnectedAnimationService.GetAnimation com a chave exclusiva que você forneceu 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 a navegação de encaminhamento 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 Configuration , 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 inativa

Para navegação traseira (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 a hora 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 porque 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 irá descartar a animação e qualquer tentativa subsequente de TryStart falhará.

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

Muitas vezes, você vai querer 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ê tem 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 o 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, o TryStartConnectedAnimationAsync irá esperar para iniciar a animação até que o recipiente do 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 de animação conectado, animando em conjunto com o elemento de animação conectado à medida que se move pela tela. As animações coordenadas podem adicionar maior interesse visual a uma transição e chamar mais a atenção do usuário para o contexto compartilhado entre as exibições de origem e destino. Nessas imagens, a interface de usuário da legenda para o item está animando através de uma animação conectada.

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 coordenada. 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 onde um elemento é compartilhado entre as páginas de origem e de destino.
• Use GravityConnectedAnimationConfiguration para navegação direta.
• Use DirectConnectedAnimationConfiguration para navegação traseira.
• 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 carregar previamente as informações necessárias para executar a transição antecipadamente, ou utilizar uma imagem de baixa resolução no lugar enquanto uma imagem de alta resolução é carregada na exibição de destino.
• Use SuppressNavigationTransitionInfo para impedir uma animação de transição em um Frame 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 as transições de navegação.

Artigos relacionados

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition