Animaciones de composición

Las API Microsoft.UI.Composition permiten crear, animar, transformar y manipular objetos compositores en una capa de API unificada. Las animaciones de composición proporcionan una manera eficaz y eficaz de ejecutar animaciones en la interfaz de usuario de la aplicación WinUI. Se han diseñado desde cero para garantizar que las animaciones se ejecuten a 60 FPS independientemente del hilo de la interfaz de usuario y ofrecerle la flexibilidad de crear experiencias increíbles utilizando no solo el tiempo, sino también la entrada y otras propiedades, para dar vida a las animaciones.

Movimiento en Windows

Piense en el diseño de movimiento como una película. Las transiciones sin problemas le mantienen centrado en la historia y aportan experiencias a la vida. Podemos invitar a esa sensación a nuestros diseños, llevando a las personas 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 de 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.

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

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 la 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 también con una amplia gama de tipos de animación, posibles para crear experiencias nuevas e increíbles con un degradado de personalizaciones.

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

Nota:

No todas las propiedades de compositionObject son animables. Consulte la documentación del objeto 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, el subcanal X o XY de una propiedad de desplazamiento Vector3.

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 describen el inicio, el final, la interpolación entre ellos y la duración de un movimiento utilizando el método tradicional de keyframing.
Movimiento relativo con ExpressionAnimations	ExpressionAnimations se utilizan para describir cómo se debe dirigir el 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. Las ImplicitAnimations se utilizan para describir cómo y cuándo ocurren las animaciones como respuesta a cambios directos en las propiedades.
Movimiento controlado por entrada con animaciones de entrada	Animaciones de entrada cubren un conjunto de escenarios que permiten a los desarrolladores describir el movimiento basado en la manipulación mediante entrada táctil 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)