Animaciones en XAML

Las animaciones pueden mejorar la aplicación agregando movimiento e interactividad. Con las animaciones de la biblioteca de animaciones de Windows Runtime, puedes integrar la apariencia de Windows en la aplicación. En este tema se proporciona un resumen de las animaciones y ejemplos de escenarios típicos en los que se usa cada uno.

Las animaciones de la biblioteca de animaciones de Windows Runtime proporcionan estas ventajas:

• Movimientos que se alinean con las Directrices para animaciones
• Transiciones rápidas y fluidas entre estados de la interfaz de usuario que informan, pero no distraer al usuario
• Comportamiento visual que indica las transiciones dentro de una aplicación al usuario

Por ejemplo, cuando el usuario agrega un elemento a una lista, en lugar del nuevo elemento que aparece instantáneamente en la lista, el nuevo elemento se anima en su lugar. Los demás elementos de la lista se animan a sus nuevas posiciones durante un breve período de tiempo, lo que hace espacio para el elemento agregado. El comportamiento de transición aquí hace que la interacción del control sea más evidente para el usuario.

Windows 10, versión 1607, presenta una nueva API ConnectedAnimationService para implementar animaciones en las que un elemento parece animar entre vistas durante una navegación. Esta API tiene un patrón de uso diferente del de la otra API de la biblioteca de animaciones. El uso de ConnectedAnimationService se trata en la página de referencia.

La biblioteca de animaciones no proporciona animaciones para todos los escenarios posibles. Hay casos en los que es posible que quieras crear una animación personalizada en XAML. Para obtener más información, consulta Animaciones con guion gráfico.

Además, para determinados escenarios avanzados, como animar un elemento en función de la posición de desplazamiento de un ScrollViewer, es posible que los desarrolladores deseen usar la interoperación de la capa visual para implementar animaciones personalizadas. Consulte Capa visual para obtener más información.

Tipos de animaciones

El sistema de animación de Windows Runtime y la biblioteca de animaciones sirven para el objetivo mayor de habilitar controles y otras partes de la interfaz de usuario para tener un comportamiento animado. Hay varios tipos distintos de animaciones.

• Las transiciones de tema se aplican automáticamente cuando ciertas condiciones cambian en la interfaz de usuario, que implican controles o elementos de los tipos predefinidos de la interfaz de usuario XAML de Windows Runtime. Se denominan transiciones de tema porque las animaciones admiten la apariencia de Windows y definen lo que hacen todas las aplicaciones para escenarios de interfaz de usuario concretos cuando cambian de un modo de interacción a otro. Las transiciones de tema forman parte de la biblioteca de animaciones.
• Las animaciones de tema son animaciones a una o varias propiedades de tipos predefinidos de interfaz de usuario XAML de Windows Runtime. Las animaciones de tema difieren de las transiciones de tema porque las animaciones de tema tienen como destino un elemento específico y existen en estados visuales específicos dentro de un control, mientras que las transiciones de tema se asignan a las propiedades del control que existen fuera de los estados visuales e influyen en las transiciones entre esos estados. Muchos de los controles XAML de Windows Runtime incluyen animaciones de tema dentro de guiones gráficos que forman parte de su plantilla de control, con las animaciones desencadenadas por estados visuales. Siempre que no modifique las plantillas, tendrá esas animaciones de tema integradas disponibles para los controles de la interfaz de usuario. Sin embargo, si reemplaza plantillas, también quitará las animaciones de tema de control integradas. Para recuperarlos, debe definir un guión gráfico que incluya animaciones de tema dentro del conjunto de estados visuales del control. También puede ejecutar animaciones de tema desde guiones gráficos que no están dentro de los estados visuales e iniciarlas con el método Begin , pero eso es menos común. Las animaciones de tema forman parte de la biblioteca de animaciones.
• Las transiciones visuales se aplican cuando un control pasa de uno de sus estados visuales definidos a otro estado. Se trata de animaciones personalizadas que se escriben y suelen estar relacionadas con la plantilla personalizada que se escribe para un control y las definiciones de estado visual dentro de esa plantilla. La animación solo se ejecuta durante el tiempo entre estados, y normalmente es una cantidad corta de tiempo, unos segundos como máximo. Para obtener más información, consulta la sección "VisualTransition" de animaciones con guion gráfico para estados visuales.
• Las animaciones con guion gráfico animan el valor de una propiedad de dependencia de Windows Runtime a lo largo del tiempo. Los guiones gráficos se pueden definir como parte de una transición visual o desencadenados en tiempo de ejecución por la aplicación. Para obtener más información, consulta Animaciones con guion gráfico. Para obtener más información sobre las propiedades de dependencia y dónde existen, consulte Introducción a las propiedades de dependencia.
• Las animaciones conectadas proporcionadas por la nueva API ConnectedAnimationService permiten a los desarrolladores crear fácilmente un efecto en el que un elemento parece animar entre vistas durante una navegación. Esta API está disponible a partir de Windows 10, versión 1607. Consulte ConnectedAnimationService para obtener más información.

Animaciones disponibles en la biblioteca

Las siguientes animaciones se proporcionan en la biblioteca de animaciones. Haga clic en el nombre de una animación para obtener más información sobre sus principales escenarios de uso, cómo definirlos y ver un ejemplo de la animación.

• Transición de página: anima las transiciones de página en un marco.
• Transición de contenido y entrada: anima una pieza o un conjunto de contenido en o fuera de vista.
• Atenuación de entrada y salida cruzada: muestra controles o elementos transitorios, o actualiza un área de contenido.
• Puntero hacia arriba o hacia abajo: proporciona comentarios visuales de una pulsación o clic en un icono.
• Cambiar la posición: mueve un elemento a una nueva posición.
• Mostrar u ocultar elemento emergente: muestra la interfaz de usuario contextual en la parte superior de la vista.
• Mostrar u ocultar interfaz de usuario perimetral: desliza la interfaz de usuario basada en bordes, incluida una interfaz de usuario grande, como un panel, o hacia fuera de la vista.
• Cambios en los elementos de lista: agrega o elimina un elemento de una lista o reordena los elementos.
• Arrastrar y colocar: proporciona comentarios visuales durante una operación de arrastrar y colocar.

Transición de página

Usa transiciones de página para animar la navegación dentro de una aplicación. Dado que casi todas las aplicaciones usan algún tipo de navegación, las animaciones de transición de página son el tipo de animación de tema más común que usan las aplicaciones. Consulte NavigationThemeTransition para obtener más información sobre las API de transición de página.

Transición de contenido y transición de entrada

Use animaciones de transición de contenido (ContentThemeTransition) para mover una parte o un conjunto de contenido a o fuera de la vista actual. Por ejemplo, las animaciones de transición de contenido muestran contenido que no estaba listo para mostrarse cuando la página se cargó por primera vez, o cuando el contenido cambia en una sección de una página.

EntranceThemeTransition representa un movimiento que se puede aplicar al contenido cuando se carga por primera vez una página o una gran sección de la interfaz de usuario. Por lo tanto, la primera apariencia del contenido puede ofrecer comentarios diferentes de los que hace un cambio en el contenido. EntranceThemeTransition es equivalente a NavigationThemeTransition con los parámetros predeterminados, pero se puede usar fuera de un frame.

Atenuar entrada/salida y crossfade

Usa animaciones de atenuación y atenuación para mostrar u ocultar controles o interfaz de usuario transitorios. En XAML se representan como FadeInThemeAnimation y FadeOutThemeAnimation. Un ejemplo se encuentra en una barra de aplicaciones en la que pueden aparecer nuevos controles debido a la interacción del usuario. Otro ejemplo es un indicador transitorio de barra de desplazamiento o movimiento panorámico que se desvaneció después de que no se haya detectado ninguna entrada del usuario durante algún período de tiempo. Las aplicaciones también deben usar la animación de atenuación cuando pasan de un elemento de marcador de posición al elemento final a medida que el contenido se carga dinámicamente.

Use una animación de crossfade para suavizar la transición cuando el estado de un elemento cambie; por ejemplo, cuando la aplicación actualiza el contenido actual de una vista. La biblioteca de animaciones XAML no proporciona una animación crossfade dedicada (sin equivalente para crossFade), pero puedes lograr el mismo resultado mediante FadeInThemeAnimation y FadeOutThemeAnimation con tiempo superpuesto.

Puntero hacia arriba o hacia abajo

Use las animaciones PointerUpThemeAnimation y PointerDownThemeAnimation para proporcionar a los usuarios comentarios para obtener una pulsación correcta o hacer clic en un icono. Por ejemplo, cuando un usuario hace clic o pulsa en un icono, se reproduce la animación de puntero hacia abajo. Una vez que se ha liberado el clic o pulsado, se reproduce la animación de puntero hacia arriba.

Cambiar la posición

Utilice las animaciones de reposición (RepositionThemeAnimation o RepositionThemeTransition) para mover un elemento a una nueva posición. Por ejemplo, mover los encabezados de un control de elementos usa la animación de posición.

Mostrar u ocultar elemento emergente

Use PopInThemeAnimation y PopOutThemeAnimation cuando muestre y oculte una interfaz de usuario emergente o contextual similar encima de la vista actual. PopupThemeTransition es una transición de tema que es útil si desea descartar un elemento emergente.

Mostrar u ocultar interfaz de usuario perimetral

Usa la animación EdgeUIThemeTransition para deslizar una interfaz de usuario pequeña y basada en bordes hacia y fuera de la vista. Por ejemplo, use estas animaciones al mostrar una barra de aplicaciones personalizada en la parte superior o inferior de la pantalla o una superficie de interfaz de usuario para errores y advertencias en la parte superior de la pantalla.

Use la animación PaneThemeTransition para mostrar y ocultar un panel o panel. Esto es para una interfaz de usuario de gran tamaño basada en bordes, como un teclado personalizado o un panel de tareas.

Cambios en los elementos de lista

Use la animación AddDeleteThemeTransition para agregar un comportamiento animado al agregar o eliminar un elemento en una lista existente. Para agregar, la transición cambiará primero la posición de los elementos existentes en la lista para hacer espacio para los nuevos elementos y, a continuación, agregará los nuevos elementos. Para eliminar, la transición quita los elementos de una lista y, si es necesario, cambia la posición de los elementos de lista restantes una vez que se han quitado los elementos eliminados.

También hay un ReorderThemeTransition independiente que se aplica si un elemento cambia de posición en una lista. Esto es diferente de eliminar un elemento y agregarlo en un nuevo lugar con las animaciones de eliminación o adición asociadas.

Tenga en cuenta que estas animaciones se incluyen en las plantillas ListView y GridView predeterminadas, por lo que no es necesario agregar manualmente estas animaciones si ya usa estos controles.

Arrastrar y colocar

Use las animaciones de arrastre (DragItemThemeAnimation, DragOverThemeAnimation) y la animación de colocación (DropTargetItemThemeAnimation) para proporcionar comentarios visuales cuando el usuario arrastra o coloca un elemento.

Cuando está activa, las animaciones muestran al usuario que la lista se puede reorganizar alrededor de un elemento descartado. Resulta útil que los usuarios sepan dónde se colocará el elemento en una lista si se quita en la ubicación actual. Las animaciones proporcionan comentarios visuales que un elemento que se arrastra se puede quitar entre otros dos elementos de la lista y que esos elementos se desplacen del camino.

Uso de animaciones con controles personalizados

En la tabla siguiente se resumen nuestras recomendaciones para qué animación debes usar al crear una versión personalizada de estos controles de Windows Runtime:

Ejemplos de animación de transición

Idealmente, la aplicación usa animaciones para mejorar la interfaz de usuario o para que sea más atractiva sin molestar a los usuarios. Una manera de hacerlo es aplicar transiciones animadas a la interfaz de usuario para que cuando algo entre o salga de la pantalla o cambie, la animación llama la atención del usuario al cambio. Por ejemplo, los botones pueden atenuarse y salir de la vista rápidamente en lugar de simplemente aparecer y desaparecer. Hemos creado una serie de API que se pueden usar para crear transiciones de animación recomendadas o típicas que son coherentes. En el ejemplo siguiente se muestra cómo aplicar una animación a un botón para que se deslice rápidamente en la vista.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

En este código, agregamos el objeto EntranceThemeTransition a la colección de transición del botón. Ahora, cuando el botón se representa por primera vez, se desliza rápidamente en la vista en lugar de simplemente aparecer. Puede establecer algunas propiedades en el objeto de animación para ajustar la distancia que se desliza y desde qué dirección, pero realmente está pensada para ser una API sencilla para un escenario específico, es decir, para hacer una entrada atractiva.

También puedes definir temas de animación de transición en los recursos de estilo de la aplicación, lo que te permite aplicar el efecto uniformemente. Este ejemplo es equivalente al anterior, solo se aplica mediante un estilo:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Los ejemplos anteriores aplican una transición de tema a un control individual; sin embargo, las transiciones de tema son aún más interesantes cuando se aplican a un contenedor de objetos. Al hacerlo, todos los objetos secundarios del contenedor participan en la transición. En el ejemplo siguiente, se aplica una propiedad EntranceThemeTransition a una cuadrícula de rectángulos.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

Los rectángulos secundarios de la transición de cuadrícula a la vista uno después del otro de una manera visualmente agradable en lugar de todo a la vez como sería el caso si aplicara esta animación a los rectángulos individualmente.

Esta es una demostración de esta animación:

Los objetos secundarios de un contenedor también pueden volver a fluir cuando uno o varios de esos elementos secundarios cambian de posición. En el ejemplo siguiente, aplicamos una reposiciónThemeTransition a una cuadrícula de rectángulos. Al quitar uno de los rectángulos, todos los demás rectángulos vuelven a fluir en su nueva posición.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

Puede aplicar varias animaciones de transición a un único objeto o contenedor de objetos. Por ejemplo, si quieres que la lista de rectángulos se animen a la vista y también animas cuando cambien de posición, puedes aplicar la RepositionThemeTransition y EntranceThemeTransition como esta:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

Hay varios efectos de transición para crear animaciones en los elementos de la interfaz de usuario a medida que se agregan, quitan, reordenan, etc. Los nombres de estas API contienen "ThemeTransition":

Ejemplos de animación de tema

Las animaciones de transición son sencillas de aplicar. Pero es posible que quiera tener un poco más control sobre el tiempo y el orden de los efectos de animación. Puedes usar animaciones de tema para habilitar más control mientras sigues usando un tema coherente para el comportamiento de la animación. Las animaciones de tema también requieren un marcado menor que las animaciones personalizadas. Aquí usamos FadeOutThemeAnimation para hacer que un rectángulo se desvanezca de la vista.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

A diferencia de las animaciones de transición, una animación de tema no tiene un desencadenador integrado (la transición) que lo ejecuta automáticamente. Debes usar un guión gráfico para contener una animación de tema al definirla en XAML. También puede cambiar el comportamiento predeterminado de la animación. Por ejemplo, puede ralentizar el fundido aumentando el valor de tiempo de duración en FadeOutThemeAnimation.

Nota Para mostrar técnicas básicas de animación, usamos código de aplicación para iniciar la animación llamando a métodos de Storyboard. Puede controlar cómo se ejecutan las animaciones storyboard mediante los métodos Begin, Stop, Pause y Resume Storyboard. Sin embargo, esto no suele ser la forma en que se incluyen animaciones de biblioteca en aplicaciones. En su lugar, normalmente se integran las animaciones de biblioteca en los estilos y plantillas XAML aplicados a controles o elementos. Aprender sobre plantillas y estados visuales es un poco más implicado. Pero tratamos cómo usaría animaciones de biblioteca en estados visuales como parte del tema Animaciones con guion gráfico para estados visuales.

Puedes aplicar otras animaciones de tema a los elementos de la interfaz de usuario para crear efectos de animación. Los nombres de estas API contienen "ThemeAnimation":

Crear sus propias animaciones

Cuando las animaciones de tema no son suficientes para sus necesidades, puede crear sus propias animaciones. Anima objetos animando uno o varios de sus valores de propiedad. Por ejemplo, puede animar el ancho de un rectángulo, el ángulo de un RotateTransform o el valor de color de un botón. Denominamos este tipo de animación personalizada una animación de guion gráfico, para distinguirla de las animaciones de biblioteca que Windows Runtime ya proporciona como un tipo de animación preconfigurado. En el caso de las animaciones con guion gráfico, se usa una animación que puede cambiar los valores de un tipo determinado (por ejemplo, DoubleAnimation para animar un double) y colocar esa animación dentro de un Guión gráfico para controlarla.

Para poder animarse, la propiedad que estás animando debe ser una propiedad de dependencia. Para obtener más información sobre las propiedades de dependencia, consulte Introducción a las propiedades de dependencia. Para obtener más información sobre cómo crear animaciones personalizadas con guion gráfico, incluido cómo dirigirse y controlarlas, consulta Animaciones con guion gráfico.

El área más grande de la definición de la interfaz de usuario de la aplicación en XAML donde definirá animaciones de guion gráfico personalizado es si estás definiendo estados visuales para controles en XAML. Lo hará porque va a crear una nueva clase de control o porque vuelve a crear plantillas de un control existente que tenga estados visuales en su plantilla de control. Para obtener más información, consulta Animaciones con guion gráfico para estados visuales.