Animaciones de composición

  • Artículo

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 manera eficaz y eficaz de ejecutar animaciones en la interfaz de usuario de la aplicación. Se han diseñado desde cero para asegurarse de que las animaciones se ejecutan a 60 FPS independientemente del subproceso de la interfaz de usuario y para ofrecerle la flexibilidad de crear experiencias increíbles usando no solo el tiempo, sino la entrada y otras propiedades, para impulsar 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 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.

Un ejemplo de animación conectada

Aquí, un efecto parallax visual mueve diferentes objetos a diferentes velocidades cuando la interfaz de usuario se desplaza o se 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 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 que crea experiencias en la capa de interfaz de usuario de Windows, tiene acceso a una variedad de conceptos de animación para llevar a su vida los 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, la subcanal X o XY de una propiedad Offset 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 que describen el inicio, el final, la interpolación entre y la duración de un movimiento de forma 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. Las implicitAnimations se usan para describir cómo y cuándo se producen las animaciones como respuesta a los cambios directos de propiedad.
Movimiento controlado por entrada con animaciones de entrada Animaciones de entrada cubre un conjunto de escenarios que permiten a los desarrolladores describir el movimiento basado en la manipulación a través de la 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)