Animación conectada para aplicaciones de WindowsConnected animation for Windows apps

Las animaciones conectadas te permiten crear una experiencia de navegación dinámica y atractiva al animar la transición de un elemento entre dos vistas distintas.Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views. Esto ayuda al usuario a mantener su contexto y proporciona continuidad entre las vistas.This helps the user maintain their context and provides continuity between the views.

En una animación conectada, un elemento aparece en "continuar" entre dos vistas durante un cambio en el contenido de la interfaz de usuario, volando por la pantalla desde su ubicación en la vista de origen hasta su destino en la nueva vista.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. Esto hace hincapié en el contenido común entre las vistas y crea un efecto atractivo y dinámico como parte de una transición.This emphasizes the common content between the views and creates a beautiful and dynamic effect as part of a transition.

API importantes: clase ConnectedAnimation, clase ConnectedAnimationServiceImportant APIs: ConnectedAnimation class, ConnectedAnimationService class

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tiene instalada la aplicación de Galería de controles de XAML , haga clic aquí para abrir la aplicación y ver la animación conectada en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see Connected Animation in action.

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.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. El efecto ayuda a mantener el contexto del usuario a través de la transición.The effect helps maintain user context across the transition.

Animación conectada

Resumen en vídeoVideo summary

Animación conectada y el sistema de diseño fluidaConnected animation and the Fluent Design System

Fluent Design System te ayuda a crear interfaces de usuario modernas y claras que incorporan luz, profundidad, movimiento, materiales y escala.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. La animación conectada es un componente del sistema de diseño fluida que agrega movimiento a la aplicación.Connected animation is a Fluent Design System component that adds motion to your app. Para más información, consulta la Introducción a Fluent Design.To learn more, see the Fluent Design overview.

¿Por qué se conecta la animación?Why connected animation?

Al navegar entre las 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.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. 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.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. Además, las animaciones conectadas agregan interés visual y la navegación de la página, lo que puede ayudar a diferenciar el diseño del movimiento de la aplicación.Additionally, connected animations add visual interest and polish to page navigation that can help differentiate the motion design of your app.

Cuándo se debe usar la animación conectadaWhen to use connected animation

Las animaciones conectadas suelen usarse al cambiar las páginas, aunque se pueden aplicar a cualquier experiencia en la que se cambia el contenido en una interfaz de usuario y se desea que el usuario mantenga el 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. Debe plantearse el uso de una animación conectada en lugar de una transición de navegación de obtención de detalles cada vez que haya una imagen u otra parte de la interfaz de usuario compartida entre las vistas de origen y de 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 animación conectadaConfigure connected animation

Importante

Esta característica requiere que la versión de destino de la aplicación sea Windows 10, versión 1809 (SDK 17763) o posterior.This feature requires that your app's Target version be Windows 10, version 1809 (SDK 17763) or later. La propiedad de configuración no está disponible en los SDK anteriores.The Configuration property is not available in earlier SDKs. Puede tener como destino una versión mínima inferior al SDK 17763 con código adaptativo o XAML condicional.You can target a Minimum version lower than SDK 17763 using adaptive code or conditional XAML. Para obtener más información, consulte versiones adaptablesde las aplicaciones.For more info, see Version adaptive apps.

A partir de la versión 1809 de Windows 10, las animaciones conectadas incluyen un diseño fluido al proporcionar configuraciones de animación adaptadas específicamente a la navegación de páginas hacia delante y hacia atrá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.

Especifique una configuración de animación mediante el establecimiento de la propiedad de configuración en ConnectedAnimation.You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. (Se mostrarán ejemplos de esto en la sección siguiente).(We’ll show examples of this in the next section.)

En esta tabla se describen las configuraciones disponibles.This table describes the available configurations. Para obtener más información sobre los principios de movimiento aplicados en estas animaciones, vea direccionalidad y gravedad.For more information about the motion principles applied in these animations, see Directionality and gravity.

GravityConnectedAnimationConfigurationGravityConnectedAnimationConfiguration
Esta es la configuración predeterminada y se recomienda para la navegación hacia delante.This is the default configuration, and is recommended for forward navigation.
A medida que el usuario navega hacia delante en la aplicación (a a B), aparece el elemento conectado físicamente "extraer de la página".As the user navigates forward in the app (A to B), the connected element appears to physically “pull off the page”. Al hacerlo, el elemento aparece para avanzar en el espacio z y se coloca un bit como efecto de la gravedad de la suspensión.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 los efectos de la gravedad, el elemento obtiene la velocidad y se acelera en su posición final.To overcome the effects of gravity, the element gains velocity and accelerates into its final position. El resultado es una animación "Scale and DIP".The result is a “scale and dip” animation.
DirectConnectedAnimationConfigurationDirectConnectedAnimationConfiguration
A medida que el usuario navega hacia atrás en la aplicación (de B a A), la animación es más directa.As the user navigates backwards in the app (B to A), the animation is more direct. El elemento conectado se traduce linealmente de B a mediante una función de aceleración de Bézier cúbica decelerada.The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. La rentabilidad visual hacia atrás devuelve el usuario a su estado anterior lo más rápido posible mientras sigue manteniendo el contexto del flujo de navegación.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
Esta es la animación predeterminada (y solo) utilizada en versiones anteriores a Windows 10, versión 1809 (SDK 17763).This is the default (and only) animation used in versions prior to Windows 10, version 1809 (SDK 17763).

Configuración de ConnectedAnimationServiceConnectedAnimationService configuration

La clase ConnectedAnimationService tiene dos propiedades que se aplican a las animaciones individuales en lugar del servicio general.The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

Para lograr los distintos efectos, algunas configuraciones omiten estas propiedades en ConnectedAnimationService y usan sus propios valores, como se describe en esta tabla.To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

ConfiguraciónConfiguration ¿Respeta DefaultDuration?Respects DefaultDuration? ¿Respeta DefaultEasingFunction?Respects DefaultEasingFunction?
PesoGravity Yes Sí*Yes*
*La traducción básica de a a B usa esta función de aceleración, pero la "DIP" tiene su propia función de aceleración.*The basic translation from A to B uses this easing function, but the "gravity dip" has its own easing function.
DirectoDirect NoNo
Anima por 150MS.Animates over 150ms.
NoNo
Usa la función de aceleración decelerada.Uses the Decelerate easing function.
BásicoBasic Yes Yes

Cómo implementar la animación conectadaHow to implement connected animation

La configuración de una animación conectada implica dos pasos:Setting up a connected animation involves two steps:

  1. Preparar 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.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 la animación en la página de destino, pasando una referencia al elemento de destino.Start the animation on the destination page, passing a reference to the destination element.

Al navegar desde la página de origen, llame a ConnectedAnimationService. GetForCurrentView para obtener una instancia de ConnectedAnimationService.When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of ConnectedAnimationService. Para preparar una animación, llame a PrepareToAnimate en esta instancia y pase una clave única y el elemento de la interfaz de usuario que desea usar en la transición.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. La clave única permite recuperar la animación más adelante en la página de destino.The unique key lets you retrieve the animation later on the destination page.

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

Cuando se produzca la navegación, inicie la animación en la página de destino.When the navigation occurs, start the animation in the destination page. Para iniciar la animación, llame a ConnectedAnimation. TryStart.To start the animation, call ConnectedAnimation.TryStart. Puede recuperar la instancia de la animación adecuada llamando a ConnectedAnimationService. GetAnimation con la clave única que proporcionó al crear la animación.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);
}

Navegación hacia delanteForward navigation

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).This example shows how to use ConnectedAnimationService to create a transition for forward navigation between two pages (Page_A to Page_B).

La configuración de animación recomendada para la navegación hacia delante es GravityConnectedAnimationConfiguration.The recommended animation configuration for forward navigation is GravityConnectedAnimationConfiguration. Este es el valor predeterminado, por lo que no es necesario establecer la propiedad de configuración a menos que desee especificar una configuración diferente.This is the default, so you don't need to set the Configuration property unless you want to specify a different configuration.

Configure la animación en la página origen.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 la animación en la página de 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);
    }
}

Navegación hacia atrásBack navigation

Para la navegación hacia atrás (Page_B a Page_A), sigue los mismos pasos, pero las páginas de origen y de destino se invierten.For back navigation (Page_B to Page_A), you follow the same steps, but the source and destination pages are reversed.

Cuando el usuario se desplaza hacia atrás, espera que la aplicación se devuelva al estado anterior lo antes posible.When the user navigates back, they expect the app to be returned to the previous state as soon as possible. Por lo tanto, la configuración recomendada es DirectConnectedAnimationConfiguration.Therefore, the recommended configuration is DirectConnectedAnimationConfiguration. Esta animación es más rápida, más directa y usa la aceleración de deceleración.This animation is quicker, more direct, and uses the decelerate easing.

Configure la animación en la página origen.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 la animación en la página de 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 el momento en que se configura la animación y el momento en que se inicia, el elemento de origen aparece inmovilizado por encima de otra interfaz de usuario de la aplicación.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. Esto le permite realizar cualquier otra animación de transición simultáneamente.This lets you perform any other transition animations simultaneously. Por esta razón, no debe esperar más de ~ 250 milisegundos entre los dos pasos porque la presencia del elemento de origen puede ser distraer.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. Si prepara una animación y no la inicia en menos de tres segundos, el sistema eliminará la animación y las llamadas subsiguientes a TryStart producirán un error.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.

Animación conectada en experiencias de lista y cuadrículaConnected animation in list and grid experiences

A menudo, querrá crear una animación conectada desde o a un control de lista o cuadrícula.Often, you will want to create a connected animation from or to a list or grid control. Puede usar los dos métodos en ListView y GridView, PrepareConnectedAnimation y TryStartConnectedAnimationAsyncpara simplificar este proceso.You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

Por ejemplo, supongamos que tiene un control ListView que contiene un elemento con el nombre "PortraitEllipse" en su plantilla de datos.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 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".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 una animación con este elemento como destino, por ejemplo, al navegar de nuevo desde una vista de detalle, use TryStartConnectedAnimationAsync.To start an animation with this element as the destination, such as when navigating back from a detail view, use TryStartConnectedAnimationAsync. Si acaba de cargar el origen de datos para ListView, TryStartConnectedAnimationAsync esperará para iniciar la animación hasta que se haya creado el contenedor de elementos correspondiente.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");
        }
    }
}

Animación coordinadaCoordinated animation

Animación coordinada

Una animación coordinada es un tipo especial de animación de entrada en el que aparece un elemento junto con el destino de animación conectado, animando en conjunto con el elemento de animación conectado a medida que se mueve por la pantalla.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. Las animaciones coordinadas pueden agregar más interés visual a una transición y, además, atraer la atención del usuario al contexto compartido entre las vistas de origen y de 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. En estas imágenes, la interfaz de usuario de la leyenda del elemento se anima mediante una animación coordinada.In these images, the caption UI for the item is animating using a coordinated animation.

Cuando una animación coordinada usa la configuración de gravedad, la gravedad se aplica al elemento de animación conectado y a los elementos coordinados.When a coordinated animation uses the gravity configuration, gravity is applied to both the connected animation element and the coordinated elements. Los elementos coordinados se "swoop" junto con el elemento conectado para que los elementos permanezcan realmente coordinados.The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

Use la sobrecarga de dos parámetros de TryStart para agregar elementos coordinados a una animación conectada.Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. En este ejemplo se muestra una animación coordinada de un diseño de cuadrícula denominado "DescriptionRoot" que entra junto con un elemento de animación conectado denominado "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 });
     }
}

Y noDo’s and don’ts

  • Utilice una animación conectada en las transiciones de página donde se comparte un elemento entre las páginas de origen y de destino.Use a connected animation in page transitions where an element is shared between the source and destination pages.
  • Use GravityConnectedAnimationConfiguration para la navegación hacia delante.Use GravityConnectedAnimationConfiguration for forward navigation.
  • Use DirectConnectedAnimationConfiguration para la navegación hacia atrás.Use DirectConnectedAnimationConfiguration for back navigation.
  • No espere en las solicitudes de red u otras operaciones asincrónicas de ejecución prolongada entre la preparación y el inicio de una animación conectada.Don't wait on network requests or other long-running asynchronous operations in between preparing and starting a connected animation. Es posible que tenga que cargar previamente la información necesaria para ejecutar la transición con antelación, o bien 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.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 una animación de transición en un fotograma si usa ConnectedAnimationService, ya que las animaciones conectadas no están diseñadas para usarse simultáneamente con las transiciones de navegación predeterminadas.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. Vea NavigationThemeTransition para obtener más información sobre cómo usar las transiciones de navegación.See NavigationThemeTransition for more info on how to use navigation transitions.

ConnectedAnimationConnectedAnimation

ConnectedAnimationServiceConnectedAnimationService

NavigationThemeTransitionNavigationThemeTransition