Animación conectada para aplicaciones de Windows

Las animaciones conectadas permiten crear una experiencia de navegación dinámica y atractiva animando la transición de un elemento entre dos vistas diferentes. Esto ayuda al usuario a mantener su contexto y proporciona continuidad entre las vistas.

En una animación conectada, un elemento parece "continuar" entre dos vistas durante un cambio en el contenido de la interfaz de usuario, volando a través de la pantalla desde su ubicación en la vista de origen hasta su destino en la nueva vista. Esto hace hincapié en el contenido común entre las vistas y crea un efecto hermoso y dinámico como parte de una transición.

API importantes: Clase ConnectedAnimation, Clase ConnectedAnimationService

Ejemplos

WinUI 2 Gallery
	Si tienes instalada la aplicación WinUI 2 Gallery , haz clic aquí para abrir la aplicación y consulta Animación conectada en acción. Obtenga la aplicación WinUI 2 Gallery (Microsoft Store) Obtener el código fuente (GitHub)

En este vídeo corto, una aplicación usa una animación conectada para animar una imagen de elemento a medida que "continúa" para formar parte del encabezado de la página siguiente. El efecto ayuda a mantener el contexto del usuario en toda la transición.

Animación conectada y la Sistema Fluent Design

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala. La animación conectada es un componente de Sistema Fluent Design que agrega movimiento a la aplicación. Para más información, consulta la Introducción a Fluent Design.

¿Por qué la animación conectada?

Al navegar entre páginas, es importante que el usuario comprenda qué nuevo contenido se presenta después de la navegación y cómo se relaciona con su intención al navegar. Las animaciones conectadas proporcionan una metáfora visual eficaz que enfatiza la relación entre dos vistas dibujando el foco del usuario en el contenido compartido entre ellas. Además, las animaciones conectadas agregan interés visual y pulido a la navegación de páginas que pueden ayudar a diferenciar el diseño de movimiento de la aplicación.

Cuándo usar la animación conectada

Las animaciones conectadas se suelen usar al cambiar las páginas, aunque se pueden aplicar a cualquier experiencia en la que se cambia el contenido de una interfaz de usuario y se quiere que el usuario mantenga el contexto. Debe considerar el uso de una animación conectada en lugar de una transición de exploración en profundidad siempre que haya una imagen u otra parte de la interfaz de usuario compartida entre las vistas de origen y destino.

Configuración de la animación conectada

A partir de Windows 10, versión 1809, las animaciones conectadas incorporan aún más el diseño fluent al proporcionar configuraciones de animación adaptadas específicamente para la navegación hacia delante y hacia atrás de la página.

Para especificar una configuración de animación, establezca la propiedad Configuration en ConnectedAnimation. (Se mostrarán ejemplos de esto en la sección siguiente).

En esta tabla se describen las configuraciones disponibles. Para obtener más información sobre los principios de movimiento aplicados en estas animaciones, consulta Direccionalidad y gravedad.

Configuración de ConnectedAnimationService

La clase ConnectedAnimationService tiene dos propiedades que se aplican a las animaciones individuales en lugar del servicio general.

• DefaultDuration
• DefaultEasingFunction

Para lograr los distintos efectos, algunas configuraciones omiten estas propiedades en ConnectedAnimationService y usan sus propios valores en su lugar, como se describe en esta tabla.

Cómo implementar la animación conectada

La configuración de una animación conectada implica dos pasos:

1. Prepare un objeto de animación en la página de origen, que indica al sistema que el elemento de origen participará en la animación conectada.
2. Inicie la animación en la página de destino y pase una referencia al elemento de destino.

Al navegar desde la página de origen, llame a ConnectedAnimationService.GetForCurrentView para obtener una instancia de ConnectedAnimationService. Para preparar una animación, llame a PrepareToAnimate en esta instancia y pase una clave única y el elemento de interfaz de usuario que quiera usar en la transición. La clave única permite recuperar la animación más adelante en la página de destino.

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

Cuando se produzca la navegación, inicie la animación en la página de destino. Para iniciar la animación, llame a ConnectedAnimation.TryStart. Puede recuperar la instancia de animación correcta llamando a ConnectedAnimationService.GetAnimation con la clave única que proporcionó al crear la animación.

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

Navegación hacia delante

En este ejemplo se muestra cómo usar ConnectedAnimationService para crear una transición para la navegación hacia delante entre dos páginas (Page_A a Page_B).

La configuración de animación recomendada para la navegación hacia delante es GravityConnectedAnimationConfiguration. Este es el valor predeterminado, por lo que no es necesario establecer la propiedad Configuration a menos que desee especificar una configuración diferente.

Configure la animación en la página de origen.

<!-- 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 la animación en la 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);
    }
}

Navegación hacia atrás

Para la navegación inversa (Page_B a Page_A), sigue los mismos pasos, pero se invierten las páginas de origen y destino.

Cuando el usuario vuelve, espera que la aplicación se devuelva al estado anterior lo antes posible. Por lo tanto, la configuración recomendada es DirectConnectedAnimationConfiguration. Esta animación es más rápida, más directa y usa la aceleración deceleración.

Configure la animación en la página de origen.

// 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 la animación en la 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 el momento en que se configura la animación y cuándo se inicia, el elemento de origen aparece inmovilizado encima de otra interfaz de usuario de la aplicación. Esto le permite realizar cualquier otra animación de transición simultáneamente. Por este motivo, no debe esperar más de ~250 milisegundos entre los dos pasos, ya que la presencia del elemento de origen puede distraerse. Si prepara una animación y no la inicia en un plazo de tres segundos, el sistema eliminará la animación y se producirá un error en las llamadas posteriores a TryStart .

Animación conectada en experiencias de lista y cuadrícula

A menudo, querrá crear una animación conectada desde o a un control de lista o cuadrícula. Puede usar los dos métodos en ListView y GridView, PrepareConnectedAnimation e TryStartConnectedAnimationAsync para simplificar este proceso.

Por ejemplo, supongamos que tiene un control ListView que contiene un elemento con el nombre "PortraitEllipse" en su plantilla de datos.

<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 una animación conectada con la elipse correspondiente a un elemento de lista determinado, llame al método PrepareConnectedAnimation con una clave única, el elemento y el nombre "PortraitEllipse".

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

Para iniciar una animación con este elemento como destino, como al volver desde una vista de detalles, use TryStartConnectedAnimationAsync. Si acaba de cargar el origen de datos de ListView, TryStartConnectedAnimationAsync esperará a iniciar la animación hasta que se haya creado el contenedor de elementos correspondiente.

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");
        }
    }
}

Animación coordinada

Una animación coordinada es un tipo especial de animación de entrada donde un elemento aparece junto con el destino de animación conectado, animando en conjunto con el elemento de animación conectado a medida que se mueve a través de la pantalla. Las animaciones coordinadas pueden agregar más interés visual a una transición y atraer aún más la atención del usuario al contexto que se comparte entre las vistas de origen y destino. En estas imágenes, la interfaz de usuario del título del elemento se anima mediante una animación coordinada.

Cuando una animación coordinada usa la configuración de gravedad, la gravedad se aplica tanto al elemento de animación conectado como a los elementos coordinados. Los elementos coordinados "se desenvolcarán" junto con el elemento conectado para que los elementos permanezcan realmente coordinados.

Use la sobrecarga de dos parámetros de TryStart para agregar elementos coordinados a una animación conectada. En este ejemplo se muestra una animación coordinada de un diseño grid denominado "DescriptionRoot" que entra en conjunto con un elemento de animación conectado denominado "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 });
     }
}

Do's and don'ts

• Use una animación conectada en transiciones de página donde se comparte un elemento entre las páginas de origen y de destino.
• Use GravityConnectedAnimationConfiguration para la navegación hacia delante.
• Use DirectConnectedAnimationConfiguration para la navegación hacia atrás.
• No espere en solicitudes de red u otras operaciones asincrónicas de ejecución prolongada entre preparar e iniciar una animación conectada. Es posible que tenga que cargar previamente la información necesaria para ejecutar la transición con antelación o usar una imagen de marcador de posición de baja resolución mientras se carga una imagen de alta resolución en la vista de destino.
• Use SuppressNavigationTransitionInfo para evitar una animación de transición en un frame si usa ConnectedAnimationService, ya que las animaciones conectadas no están diseñadas para usarse simultáneamente con las transiciones de navegación predeterminadas. Consulta NavigationThemeTransition para obtener más información sobre cómo usar transiciones de navegación.

Artículos relacionados

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition