Compartir a través de


Animaciones de composición

Las API de Windows.UI.Composition permiten crear, animar, transformar y manipular objetos compositores en una capa de API unificada. Las animaciones de composición proporcionan una forma eficaz y eficiente para ejecutar animaciones en tu interfaz de usuario de la aplicación. Se han diseñado desde cero para garantizar que las animaciones se ejecuten a 60 FPS independientemente del subproceso de la interfaz de usuario, así como para proporcionarte flexibilidad para crear experiencias increíbles no solo con tiempo, sino también con la entrada y otras propiedades, para controlar las animaciones.

Movimiento en Windows

Piensa en un diseño de movimiento similar al de una película. Las transiciones sin interrupciones te ayudan a concentrarte en la historia y a darle vida a tus experiencias. Podemos invitar a ese sentimiento en nuestros diseños, llevando a la gente de una tarea a la siguiente con facilidad cinematográfica. El movimiento suele ser el factor diferenciador entre una interfaz de usuario y una experiencia de usuario.

Como bloque de creación fundamental de la Plataforma de interfaz de usuario de Windows, CompositionAnimations proporciona una manera eficaz y eficaz de crear experiencias de movimiento en la interfaz de usuario de la aplicación. El motor de animación se ha diseñado desde cero para asegurarse de que el movimiento se ejecuta a 60 FPS, independientemente del subproceso de la interfaz de usuario. Estas animaciones están diseñadas para proporcionar la flexibilidad necesaria para crear experiencias de movimiento innovadoras basadas en el tiempo, la entrada y otras propiedades.

Ejemplos de movimiento

Estos son algunos ejemplos de movimiento en una aplicación.

Aquí, 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.

Un ejemplo de animación conectada

En este caso, un efecto parallax visual mueve objetos diferentes a diferentes velocidades cuando la interfaz de usuario se desplaza o desplaza para crear una sensación de profundidad, perspectiva y movimiento.

Ejemplo de efecto de paralaje con una lista y una imagen en segundo plano

Uso de CompositionAnimations para crear movimiento

Para generar movimiento en la interfaz de usuario, los desarrolladores pueden acceder a animaciones en XAML o en la capa visual. Las animaciones de la capa visual proporcionan a los desarrolladores una serie de ventajas:

  • Rendimiento: en lugar de la animación tradicional enlazada a subprocesos de interfaz de usuario, las animaciones en la plataforma de interfaz de usuario de Windows funcionan en un subproceso independiente a 60 FPS, lo que permite experiencias de movimiento suaves.
  • Modelo de plantillas: las animaciones de la capa de interfaz de usuario de Windows son plantillas, lo que significa que puede usar una sola animación en varios objetos y ajustar propiedades o parámetros sin preocuparse de obstruir los usos anteriores.
  • Personalización: la capa de interfaz de usuario de Windows no solo facilita la creación de una interfaz de usuario hermosa, sino con una gama completa de tipos de animación, posible crear experiencias nuevas e increíbles con un degradado de personalizaciones.

Como desarrollador que crea experiencias en la capa de interfaz de usuario de Windows, tienes acceso a una variedad de conceptos de animación para que tus diseños cobren vida. Puede usar cualquiera de estos conceptos para animar una propiedad o un componente de subcanal (cuando corresponda) de cualquier CompositionObject.

Nota:

No todas las propiedades de compositionObject son animables. Consulte la documentación del compositionObject individual para determinar si una propiedad es animable.

Nota:

El término subcanal hace referencia a una forma de componente de una propiedad. Por ejemplo, la subcanal X o XY de una propiedad Vector3 Offset.

Concepto de animación Descripción
Movimiento basado en tiempo con KeyFrameAnimations KeyFrameAnimations se usan para controlar directamente la totalidad de una experiencia de movimiento durante un período de tiempo. Los desarrolladores que describen el inicio, el final, la interpolación entre y la duración de un movimiento en un fotograma clave tradicional.
Movimiento relativo con ExpressionAnimations ExpressionAnimations se usan para describir cómo se debe controlar un movimiento de la propiedad de un objeto en relación con la propiedad de otro objeto. Los desarrolladores definen una ecuación matemática que define la relación basada en referencia.
ImplicitAnimations Estas animaciones se basan en desencadenadores y se definen por separado de la lógica de la aplicación principal. ImplicitAnimations se usan para describir cómo y cuándo se producen las animaciones como respuesta a los cambios directos de las propiedades.
Movimiento controlado por entrada con animaciones de entrada Las animaciones de entrada abarcan un conjunto de escenarios que permiten a los desarrolladores describir el movimiento basado en la manipulación a través de las modalidades táctiles u otras modalidades de entrada. Estas animaciones se controlan en función de la entrada o los gestos activos del usuario.
Movimiento basado en física con NaturalMotionAnimations NaturalMotionAnimations se usan para describir experiencias de movimiento naturales y familiares basadas en el movimiento controlado por fuerza real. En lugar de definir el tiempo, los desarrolladores definen las características del movimiento (por ejemplo, la relación de amortiguación para Springs)