Directrices para animaciones de atenuación

Applies to Windows and Windows Phone

Usa animaciones de atenuación para hacer aparecer o desaparecer los elementos de la vista. Existen tres tipos de animaciones de atenuación: de entrada, de salida y encadenado.

Qué hacer y qué no hacer

  • Cuando la aplicación realiza una transición entre elementos no relacionados o con mucho texto, usa el fundido de salida seguido de un fundido de entrada en lugar del encadenado. Esto permite que el objeto saliente desaparezca completamente antes de que el objeto entrante esté visible. No se recomienda, en particular, encadenar una gran cantidad de texto.
  • Usa la animación encadenada para crear una transición entre elementos de distintos tamaños o cuando actualices un área grande. En el medio de la animación, tanto los elementos entrantes como los salientes serán semitransparentes y el usuario podrá ver el fondo. Recuerda que los lenguajes de programación que se usan con el lenguaje de marcado de aplicaciones extensible (XAML) no contienen una animación encadenada dedicada. En esos lenguajes, puedes alcanzar el efecto con las animaciones de fundido de entrada y del fundido de salida con intervalos superpuestos.
  • Usa el fundido de entrada en los elementos entrantes o en los elementos situados encima de los elementos salientes si el tamaño de los elementos permanece constante y quieres que el usuario sienta que miran al mismo elemento. Puedes realizar un fundido de entrada del elemento entrante encima del elemento saliente. Después, una vez completado el fundido, el elemento saliente se puede quitar. Por supuesto, esta opción solo es viable cuando el elemento saliente estará completamente cubierto por el elemento entrante. Con este método, también se evita que el fondo se vea durante la transición.
  • No uses las animaciones de atenuación para agregar o eliminar elementos de una lista. Usa las animaciones lista creadas específicamente para ese propósito.
  • No uses las animaciones de atenuación para cambiar todo el contenido de una página. Usa las animaciones de transiciones de página creadas específicamente para ese propósito.

Temas relacionados

Para diseñadores
Directrices para agregar y eliminar
Directrices para animaciones de transiciones de contenido
Directrices para animaciones de arrastre
Directrices para animaciones de la interfaz de usuario basadas en el borde
Directrices para animaciones de transiciones de página
Directrices para animaciones de los clics del puntero
Directrices para animaciones de reposición
Directrices para animaciones de la interfaz de usuario emergentes
Directrices para animaciones de deslizar rápidamente
Para desarrolladores (HTML)
Muestra de HTML de la biblioteca de animaciones
Animación de la interfaz de usuario
Animación de atenuación
fadeIn
fadeOut
crossFade
Para desarrolladores (XAML)
Animación de la interfaz de usuario
Animación de atenuación
Inicio rápido: animar la interfaz de usuario con animaciones de la biblioteca
FadeInThemeAnimation
FadeOutThemeAnimation

 

 

Mostrar:
© 2014 Microsoft