Idioma: HTML | XAML

Inicio rápido: animación de la interfaz de usuario con animaciones de la biblioteca (XAML)

Applies to Windows and Windows Phone

Las animaciones en Windows en tiempo de ejecución pueden mejorar tu aplicación al incorporar movimiento e interactividad. Si usas animaciones de la biblioteca de animaciones de Windows en tiempo de ejecución, puedes integrar su apariencia en tu aplicación.

Nota  Para descargar un ejemplo que muestra muchos de los conceptos tratados en este tema, consulta la página de muestra de animaciones de personalidad XAML.

Guía básica: relación de este tema con los demás. Consulta:

Animaciones de transición

En teoría, tu aplicación usa animaciones para mejorar la interfaz de usuario o para hacerla más atractiva sin molestar a los usuarios. Una forma de hacer esto es aplicar transiciones animadas a la interfaz de usuario para que, cuando algo entre en la pantalla o salga de ella o se produzca algún otro cambio, la animación capte la atención del usuario para informarle del cambio. Por ejemplo, los botones pueden mostrar un fundido de entrada o de salida en vez de simplemente aparecer o desaparecer. Hemos creado diversas API que se pueden usar para crear transiciones de animación recomendadas o habituales que sean coherentes. En el siguiente ejemplo se muestra cómo aplicar una animación a un botón de forma que este se deslice rápidamente en la pantalla.


<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 presente por primera vez, se deslizará rápidamente en la pantalla en lugar de aparecer simplemente. Puedes establecer unas cuantas propiedades en el objeto de animación para ajustar la distancia y la dirección en la que se desliza, pero se trata de una sencilla API para un escenario específico: realizar una entrada atractiva.

También puedes definir temas de animación de transición en los recursos de estilo de tu aplicación, lo que te permitirá aplicar el efecto de forma uniforme. Este ejemplo es equivalente al anterior, con la única diferencia de que se aplica con un Style:


<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, pero las transiciones de tema muestran efectos aún más interesantes cuando se aplican a un contenedor de objetos. Cuando se hace esto, todos los objetos secundarios del contenedor forman parte de la transición. En el ejemplo siguiente, se aplica EntranceThemeTransition a una Grid 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 la Grid se presentan uno detrás de otro de una forma agradable, en lugar de mostrarse todos a la vez como sería el caso si aplicaras esta animación a los rectángulos de forma individual.

En este vídeo se demuestra esta animación:

|

Los objetos secundarios incluidos en un contenedor también se pueden redistribuir cuando uno o varios de esos objetos cambian de posición. En el ejemplo siguiente, aplicamos RepositionThemeTransition a una cuadrícula de rectángulos. Cuando se quita uno de los rectángulos, el resto se redistribuye a 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);
    }		  		  		  
}

En este vídeo se demuestra la animación que se ejecuta para los rectángulos que se quitan:

|

Puedes aplicar varias animaciones de transición a un solo objeto o contenedor de objetos. Por ejemplo, si quieres que la lista de rectángulos muestre una animación de entrada y otra cuando cambien de posición, puedes aplicar RepositionThemeTransition y EntranceThemeTransition de la forma siguiente:



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

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

APIDescripción
AddDeleteThemeTransition Ofrece el comportamiento de transición animada cuando los controles agregan o eliminan objetos secundarios o contenido. El control suele ser un contenedor de elementos.
ContentThemeTransition Proporciona el comportamiento de transición animada correspondiente a cuando cambia el contenido de un control. Puedes aplicar esta animación junto con AddDeleteThemeTransition.
EdgeUIThemeTransition Proporciona el comportamiento de transición animada de una interfaz de usuario de borde pequeña.
EntranceThemeTransition Ofrece el comportamiento de transición animada cuando los controles aparecen por primera vez.
PaneThemeTransition Proporciona el comportamiento de transición animada de una interfaz de usuario de borde de panel (grande).
PopupThemeTransition Proporciona el comportamiento de transición animada que se aplica a los componentes emergentes de controles (por ejemplo, interfaces de usuario de tipo información sobre herramientas en un objeto) cuando aparecen.
ReorderThemeTransition Ofrece el comportamiento de transición animada cuando los elementos de los controles de vista de lista cambian de orden. Esto suele ocurrir como resultado de una operación de arrastrar y soltar. Los temas y controles diferentes pueden tener características distintas en las animaciones.
RepositionThemeTransition Ofrece el comportamiento de transición animada cuando los controles cambian de posición.

 

Animaciones de tema

Las animaciones de transición son sencillas de aplicar. Pero puede que desees tener un poco más de control sobre la sincronización y el orden de los efectos de tu animación. Puedes usar las animaciones de tema para permitir un mayor control mientras sigues usando un tema coherente en la forma en que se comporta tu animación. Además, las animaciones de tema requieren menos marcado que las personalizadas. En este ejemplo, usamos FadeOutThemeAnimation para que un rectángulo desaparezca mediante un fundido de salida.


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

Al contrario que las animaciones de transición, una animación de tema no cuenta con un desencadenador integrado (la transición) que la ejecuta automáticamente. Debes usar un Storyboard para incluir una animación de tema al definirla en XAML. También puedes cambiar el comportamiento predeterminado de la animación. Por ejemplo, puedes ralentizar el fundido de salida aumentando el valor de tiempo de Duration en la FadeOutThemeAnimation.

Nota  A los fines de mostrar técnicas de animación básicas, estamos usando código de la aplicación para iniciar la animación llamando a los métodos deStoryboard. Puedes controlar cómo se ejecutan las animaciones Storyboard mediante los métodos Begin, Stop, Pause y Resume Storyboard. Pero esa no es la manera más común de incluir animaciones de la biblioteca en las aplicaciones. En cambio, las animaciones se suelen integrar en los estilos y las plantillas de XAML que se aplican a los controles o elementos. Comprender el uso de plantillas y estados visuales es un poco más complicado. Pero sí explicamos cómo usar las animaciones de la biblioteca en los estados visuales como parte del tema sobre las animaciones con guión 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. Todos los nombres de estas API contienen "ThemeAnimation":

APIDescripción
DragItemThemeAnimation Representa la animación preconfigurada que se aplica a los elementos que se arrastran.
DragOverThemeAnimation Representa la animación preconfigurada que se aplica a los elementos que se encuentran debajo de los que se arrastran.
DropTargetItemThemeAnimation La animación preconfigurada que se aplica a elementos potenciales de destino para soltar.
FadeInThemeAnimation La animación de opacidad preconfigurada que se aplica a los controles cuando aparecen por primera vez.
FadeOutThemeAnimation La animación de opacidad preconfigurada que se aplica a los controles cuando se quitan de la interfaz de usuario o se ocultan.
PointerDownThemeAnimation La animación preconfigurada de acciones de usuario que pulsan o hacen clic en un elemento.
PointerUpThemeAnimation La animación preconfigurada para la acción de usuario que se ejecuta después de que el usuario pulsa un elemento y se libera la acción.
PopInThemeAnimation La animación preconfigurada que se aplica a componentes emergentes de los controles según aparecen. Esta animación combina opacidad y traducción.
PopOutThemeAnimation La animación preconfigurada que se aplica a componentes emergentes de los controles según se cierran o se quitan. Esta animación combina opacidad y traducción.
RepositionThemeAnimation La animación preconfigurada de un objeto según cambia de posición.
SplitCloseThemeAnimation La animación preconfigurada que oculta una UI de destino que usa una animación de división.
SplitOpenThemeAnimation La animación preconfigurada que revela una UI de destino que usa una animación de división.
SwipeBackThemeAnimation La animación preconfigurada que se aplica a los controles cuando un elemento vuelve a su lugar en el diseño tras una interacción de deslizar rápidamente.
SwipeHintThemeAnimation La animación preconfigurada que indica que ahora es posible un gesto de deslizar rápidamente.

 

Animaciones integradas para controles

Existen animaciones integradas en algunos de los controles de Windows en tiempo de ejecución, como parte de su lógica de control y las plantillas XAML predeterminadas. Recomendamos que te familiarices con estos controles, para que puedas usarlos en tus animaciones en la interfaz de usuario.

Aquí verás una lista de algunos controles con animaciones integradas:

Nota  Esta no es la lista completa. Para más información, consulta los temas "Animación de..." en esta área o los temas sobre estilos y plantillas para controles específicos.

Creación de tus propias animaciones

Cuando las animaciones de tema no son suficientes para cubrir tus necesidades, puedes crear las tuyas propias. Puedes animar objetos al animar uno o más valores de sus propiedades. Por ejemplo, puedes animar el ancho de un rectángulo, el ángulo de un RotateTransform o el valor de color de un botón. Este tipo de animación personalizada se denomina animación con guión gráfico para distinguirla de las animaciones de la biblioteca que Windows en tiempo de ejecución ya proporciona como un tipo de animación preconfigurado. En las animaciones con guión gráfico, usas una animación que puede cambiar los valores de un tipo en particular (por ejemplo, una DoubleAnimation para animar un Double) y la colocas dentro de un Storyboard para controlarla.

Para que pueda ser animada, la propiedad que te interesa debe ser una propiedad de dependencia. Si quieres obtener más información sobre las propiedades de dependencia, consulta Introducción a las propiedades de dependencia. Para obtener más información para crear animaciones de guion gráfico personalizadas, lo que incluye cómo orientarlas 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 el XAML, donde definirás animaciones con guión gráfico personalizadas, es al definir los estados visuales de los controles en el XAML. Tendrás que hacer esto al crear una nueva clase de control o al crear nuevas plantillas de un control existente que tiene estados visuales en su plantilla de control. Para más información, consulta el tema sobre animaciones con guión gráfico para estados visuales. Estas animaciones no suelen ser transiciones a lo largo de un período de tiempo, sino que suceden de forma instantánea y realmente son una técnica para definir un conjunto de cambios de propiedades para un estado. No necesariamente aplican un comportamiento animado visualmente a una interfaz de usuario, aunque, como verás, los estados visuales de los controles suelen incluir las propias animaciones de la biblioteca. En este caso, las animaciones de tema sí aplican un cambio a lo largo de un período de tiempo, pero este suele durar muy poco.

Temas relacionados

Guía básica para crear aplicaciones con C# o VB
Sintaxis de property-path
Introducción a las propiedades de dependencia
Animaciones con guion gráfico
Animaciones con guión gráfico para estados visuales
Animaciones de fotograma clave y animaciones de función de aceleración
Storyboard
Storyboard.TargetProperty

 

 

Mostrar:
© 2014 Microsoft