Animação conectada para aplicativos do WindowsConnected animation for Windows apps

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.Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views. Isso ajuda o usuário a manter o contexto e oferece continuidade entre os modos de exibição.This helps the user maintain their context and provides continuity between the views.

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, trocando pela tela de seu local na exibição da fonte até seu destino na nova exibição.In a connected animation, an element appears to "continue" between two views during a change in UI content, flying across the screen from its location in the source view to its destination in the new view. Isso enfatiza o conteúdo comum entre as exibições e cria um efeito bonito e dinâmico como parte de uma transição.This emphasizes the common content between the views and creates a beautiful and dynamic effect as part of a transition.

APIs importantes: classe ConnectedAnimation, classe ConnectedAnimationServiceImportant APIs: ConnectedAnimation class, ConnectedAnimationService class

ExemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Se você tiver o aplicativo da Galeria de controles XAML instalado, clique aqui para abrir o aplicativo e ver a animação conectada em ação.If you have the XAML Controls Gallery app installed, click here to open the app and see Connected Animation in action.

Neste vídeo rápido, um aplicativo usa uma animação conectada para animar uma imagem de item enquanto ele "continua" para se tornar parte do cabeçalho da próxima página.In this short video, an app uses a connected animation to animate an item image as it "continues" to become part of the header of the next page. O efeito ajuda a manter o contexto de usuário entre a transição.The effect helps maintain user context across the transition.

Animação Conectada

Resumo do vídeoVideo summary

Animação conectada e o Sistema de Design FluentConnected animation and the 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.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Animação conectada é um componente do Sistema de Design Fluent que acrescenta movimento ao seu aplicativo.Connected animation is a Fluent Design System component that adds motion to your app. Para saber mais, confira a Visão geral do Fluent Design.To learn more, see the Fluent Design overview.

Por que animação conectada?Why connected animation?

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.When navigating between pages, it’s important for the user to understand what new content is being presented after the navigation and how it relates to their intent when navigating. 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.Connected animations provide a powerful visual metaphor that emphasizes the relationship between two views by drawing the user’s focus to the content shared between them. 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.Additionally, connected animations add visual interest and polish to page navigation that can help differentiate the motion design of your app.

Quando usar a animação conectadaWhen to use connected animation

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.Connected animations are generally used when changing pages, though they can be applied to any experience where you are changing content in a UI and want the user to maintain context. 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.You should consider using a connected animation instead of a drill in navigation transition whenever there is an image or other piece of UI shared between the source and destination views.

Configurar animação conectadaConfigure connected animation

Importante

Esse recurso requer que a versão de destino do aplicativo seja Windows 10, versão 1809 (SDK 17763) ou posterior.This feature requires that your app's Target version be Windows 10, version 1809 (SDK 17763) or later. A propriedade de configuração não está disponível em SDKs anteriores.The Configuration property is not available in earlier SDKs. Você pode direcionar uma versão mínima inferior ao SDK 17763 usando código adaptável ou XAML condicional.You can target a Minimum version lower than SDK 17763 using adaptive code or conditional XAML. Para obter mais informações, consulte versões adaptáveis de aplicativos.For more info, see Version adaptive apps.

A partir do Windows 10, versão 1809, animações conectadas ainda mais incorporam design fluente fornecendo configurações de animação personalizadas especificamente para navegação de página para frente e para trás.Starting in Windows 10, version 1809, connected animations further embody Fluent design by providing animation configurations tailored specifically for forward and backwards page navigation.

Você especifica uma configuração de animação definindo a propriedade de configuração no ConnectedAnimation.You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. (Mostraremos exemplos disso na próxima seção.)(We’ll show examples of this in the next section.)

Esta tabela descreve as configurações disponíveis.This table describes the available configurations. Para obter mais informações sobre os princípios de movimento aplicados nessas animações, consulte direcionalidade e gravidade.For more information about the motion principles applied in these animations, see Directionality and gravity.

GravityConnectedAnimationConfigurationGravityConnectedAnimationConfiguration
Essa é a configuração padrão e é recomendada para navegação progressiva.This is the default configuration, and is recommended for forward navigation.
À medida que o usuário navega para frente no aplicativo (A para B), o elemento conectado parece "retirar a página fisicamente".As the user navigates forward in the app (A to B), the connected element appears to physically “pull off the page”. Ao fazer isso, o elemento parece avançar em z-Space e deixa um pouco como um efeito de gravidade assumindo a suspensão.In doing so, the element appears to move forward in z-space and drops a bit as an effect of gravity taking hold. Para superar os efeitos da gravidade, o elemento ganha velocidade e acelera sua posição final.To overcome the effects of gravity, the element gains velocity and accelerates into its final position. O resultado é uma animação de "escala e DIP".The result is a “scale and dip” animation.
DirectConnectedAnimationConfigurationDirectConnectedAnimationConfiguration
À medida que o usuário navega para trás no aplicativo (B para A), a animação é mais direta.As the user navigates backwards in the app (B to A), the animation is more direct. O elemento conectado linearmente se traduz de B para um usando uma função de atenuação de Bezier cubica de desaceleração.The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. A unificação visual com versões anteriores retorna o usuário para seu estado anterior o mais rápido possível e, ao mesmo tempo, mantém o contexto do fluxo de navegação.The backwards visual affordance returns the user to their previous state as fast as possible while still maintaining the context of the navigation flow.
BasicConnectedAnimationConfigurationBasicConnectedAnimationConfiguration
Essa é a animação padrão (e somente) usada em versões anteriores ao Windows 10, versão 1809 (SDK 17763).This is the default (and only) animation used in versions prior to Windows 10, version 1809 (SDK 17763).

Configuração do ConnectedAnimationServiceConnectedAnimationService configuration

A classe ConnectedAnimationService tem duas propriedades que se aplicam às animações individuais em vez do serviço geral.The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

Para obter os vários efeitos, algumas configurações ignoram essas propriedades em ConnectedAnimationService e usam seus próprios valores, conforme descrito nesta tabela.To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

ConfiguraçãoConfiguration Respeita defaultduration?Respects DefaultDuration? Respeita DefaultEasingFunction?Respects DefaultEasingFunction?
GravidadeGravity SimYes Sim*Yes*
*A conversão básica de a para B usa essa função de atenuação, mas o "dip de gravidade" tem sua própria função de atenuação.*The basic translation from A to B uses this easing function, but the "gravity dip" has its own easing function.
DiretoDirect NãoNo
Anima sobre 150ms.Animates over 150ms.
NãoNo
Usa a função de atenuação de desaceleração.Uses the Decelerate easing function.
BásicoBasic SimYes SimYes

Como implementar uma animação conectadaHow to implement connected animation

Configurar uma animação conectada envolve duas etapas:Setting up a connected animation involves two steps:

  1. Prepare um objeto de animação na página de origem, que indica ao sistema que o elemento de origem participará na animação conectada.Prepare an animation object on the source page, which indicates to the system that the source element will participate in the connected animation.
  2. Inicie a animação na página destino, passando uma referência para o elemento de destino.Start the animation on the destination page, passing a reference to the destination element.

Ao navegar da página de origem, chame ConnectedAnimationService. GetForCurrentView para obter uma instância de ConnectedAnimationService.When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of 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.To prepare an animation, call PrepareToAnimate on this instance, and pass in a unique key and the UI element you want to use in the transition. A chave exclusiva permite recuperar a animação posteriormente na página destino.The unique key lets you retrieve the animation later on the destination page.

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

Quando ocorrer a navegação, inicie a animação na página destino.When the navigation occurs, start the animation in the destination page. Para iniciar a animação, chame ConnectedAnimation.TryStart.To start the animation, call 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.You can retrieve the right animation instance by calling ConnectedAnimationService.GetAnimation with the unique key you provided when creating the animation.

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

Navegação progressivaForward navigation

Este exemplo mostra como usar ConnectedAnimationService para criar uma transição para navegação progressiva entre duas páginas (Page_A para Page_B).This example shows how to use ConnectedAnimationService to create a transition for forward navigation between two pages (Page_A to Page_B).

A configuração de animação recomendada para navegação progressiva é GravityConnectedAnimationConfiguration.The recommended animation configuration for forward navigation is GravityConnectedAnimationConfiguration. Esse é o padrão, portanto, você não precisa definir a propriedade de configuração , a menos que queira especificar uma configuração diferente.This is the default, so you don't need to set the Configuration property unless you want to specify a different configuration.

Configure a animação na página de origem.Set up the animation in the source page.

<!-- 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 destino.Start the animation in the destination page.

<!-- 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 regressivaBack navigation

Para navegação regressiva (Page_B para Page_A), siga as mesmas etapas, mas as páginas de origem e de destino são invertidas.For back navigation (Page_B to Page_A), you follow the same steps, but the source and destination pages are reversed.

Quando o usuário navega de volta, ele espera que o aplicativo seja devolvido ao estado anterior assim que possível.When the user navigates back, they expect the app to be returned to the previous state as soon as possible. Portanto, a configuração recomendada é DirectConnectedAnimationConfiguration.Therefore, the recommended configuration is DirectConnectedAnimationConfiguration. Essa animação é mais rápida e direta e usa a atenuação de desaceleração.This animation is quicker, more direct, and uses the decelerate easing.

Configure a animação na página de origem.Set up the animation in the source page.

// 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 destino.Start the animation in the destination page.

// 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.Between the time that the animation is set up and when it's started, the source element appears frozen above other UI in the app. Isso permite que você execute qualquer outra animação de transição simultaneamente.This lets you perform any other transition animations simultaneously. 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.For this reason, you shouldn't wait more than ~250 milliseconds in between the two steps because the presence of the source element may become distracting. 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á.If you prepare an animation and do not start it within three seconds, the system will dispose of the animation and any subsequent calls to TryStart will fail.

Animação conectada em experiências de lista e de gradeConnected animation in list and grid experiences

Muitas vezes, você vai querer criar uma animação conectada de ou para um controle de lista ou grade.Often, you will want to create a connected animation from or to a list or grid control. Você pode usar os dois métodos em ListView e GridView, PrepareConnectedAnimation e TryStartConnectedAnimationAsync, para simplificar esse processo.You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

Por exemplo, digamos que você tem um ListView que contém um elemento com o nome "PortraitEllipse" em seu modelo de dados.For example, say you have a ListView that contains an element with the name "PortraitEllipse" in its data template.

<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".To prepare a connected animation with the ellipse corresponding to a given list item, call the PrepareConnectedAnimation method with a unique key, the item, and the name "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 um modo de exibição de detalhes, use TryStartConnectedAnimationAsync.To start an animation with this element as the destination, such as when navigating back from a detail view, 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.If you have just loaded the data source for the ListView, TryStartConnectedAnimationAsync will wait to start the animation until the corresponding item container has been created.

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 coordenadaCoordinated animation

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, animação em tandem com o elemento de animação conectado à medida que ele se move pela tela.A coordinated animation is a special type of entrance animation where an element appears along with the connected animation target, animating in tandem with the connected animation element as it moves across the screen. 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.Coordinated animations can add more visual interest to a transition and further draw the user’s attention to the context that is shared between the source and destination views. Nessas imagens, a interface de usuário da legenda para o item está animando através de uma animação conectada.In these images, the caption UI for the item is animating using a coordinated animation.

Quando uma animação coordenada usa a configuração de gravidade, a gravidade é aplicada ao elemento de animação conectado e aos elementos coordenados.When a coordinated animation uses the gravity configuration, gravity is applied to both the connected animation element and the coordinated elements. Os elementos coordenados serão "vezs" junto com o elemento conectado para que os elementos permaneçam realmente coordenados.The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

Use a sobrecarga de dois parâmetros do TryStart para adicionar elementos coordenados a uma animação coordenada.Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. 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".This example demonstrates a coordinated animation of a Grid layout named "DescriptionRoot" that enters in tandem with a connected animation element named "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 fazerDo’s and don’ts

  • 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 a connected animation in page transitions where an element is shared between the source and destination pages.
  • Use GravityConnectedAnimationConfiguration para navegação progressiva.Use GravityConnectedAnimationConfiguration for forward navigation.
  • Use DirectConnectedAnimationConfiguration para navegação regressiva.Use DirectConnectedAnimationConfiguration for back navigation.
  • Não aguarde as solicitações de rede ou outras operações assíncronas de execução longa em entre preparar e iniciar uma animação conectada.Don't wait on network requests or other long-running asynchronous operations in between preparing and starting a connected animation. 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.You may need to pre-load the necessary information to run the transition ahead of time, or use a low-resolution placeholder image while a high-resolution image loads in the destination view.
  • Use SuppressNavigationTransitionInfo para evitar uma animação de transição em um quadro se você estiver usando ConnectedAnimationService, já que animações conectadas não devem ser usadas simultaneamente com as transições de navegação padrão.Use SuppressNavigationTransitionInfo to prevent a transition animation in a Frame if you are using ConnectedAnimationService, since connected animations aren't meant to be used simultaneously with the default navigation transitions. Consulte NavigationThemeTransition para obter mais informações sobre como usar as transições de navegação.See NavigationThemeTransition for more info on how to use navigation transitions.

ConnectedAnimationConnectedAnimation

ConnectedAnimationServiceConnectedAnimationService

NavigationThemeTransitionNavigationThemeTransition