Compartir a través de

Animaciones basadas en relaciones

En este artículo se proporciona una breve visión general de cómo crear animaciones relacionadas mediante Composition ExpressionAnimations.

Experiencias dinámicas basadas en relaciones

Al crear experiencias de movimiento en una aplicación, hay ocasiones en las que el movimiento no se basa en el tiempo, sino está basado en una propiedad de otro objeto. KeyFrameAnimations no pueden expresar estos tipos de experiencias de movimiento muy fácilmente. En estas instancias específicas, el movimiento ya no debe ser discreto y predefinido. En su lugar, el movimiento puede adaptarse dinámicamente en función de su relación con otras propiedades de objeto. Por ejemplo, puede animar la opacidad de un objeto en función de su posición horizontal. Otros ejemplos incluyen experiencias de movimiento como encabezados pegajosos y parallax.

Estos tipos de experiencias de movimiento le permiten crear una interfaz de usuario que se sienta más conectada, en lugar de sentirse singular e independiente. Para el usuario, esto da la impresión de una experiencia de interfaz de usuario dinámica.

Círculo orbitante

Vista de lista con paralaje

Uso de ExpressionAnimations

Para crear experiencias de movimiento basadas en relaciones, use el tipo ExpressionAnimation. ExpressionAnimations (o Expressions for short), son un nuevo tipo de animación que permite expresar una relación matemática, una relación que el sistema usa para calcular el valor de una propiedad de animación cada fotograma. Por otra parte, las expresiones son simplemente una ecuación matemática que define el valor deseado de una propiedad de animación por fotograma. Las expresiones son un componente muy versátil que se puede usar en una amplia variedad de escenarios, entre los que se incluyen:

Al trabajar con ExpressionAnimations, hay un par de cosas que merece la pena mencionar por adelantado:

  • Never Ending: a diferencia de su elemento relacionado KeyFrameAnimation, las expresiones no tienen una duración finita. Dado que las expresiones son relaciones matemáticas, son animaciones que se "ejecutan" constantemente. Tienes la opción de detener estas animaciones si eliges.
  • Ejecución, pero no siempre evaluación: el rendimiento siempre es un problema con las animaciones que se ejecutan constantemente. Sin embargo, no es necesario preocuparse, el sistema es lo suficientemente inteligente como para que la expresión solo vuelva a evaluar si alguna de sus entradas o parámetros ha cambiado.
  • Resolución en el tipo de objeto correcto: dado que las expresiones son relaciones matemáticas, es importante asegurarse de que la ecuación que define la expresión se resuelve en el mismo tipo de la propiedad dirigida por la animación. Por ejemplo, si está animando Offset, su expresión debería resolverse en un tipo Vector3.

Componentes de una expresión

Al crear la relación matemática de una expresión, hay varios componentes principales:

  • Parámetros: valores que representan valores constantes o referencias a otros objetos Composition.
  • Operadores matemáticos: los operadores matemáticos típicos más(+), menos(-), multiplicar(*), divide(/) que unen parámetros para formar una ecuación. También se incluyen operadores condicionales como mayor que(>), equal(==), operador ternario (condición ? ifTrue : ifFalse), etc.
  • Funciones matemáticas: funciones matemáticas o accesos directos basados en System.Numerics. Para obtener una lista completa de las funciones admitidas, vea ExpressionAnimation.

Las expresiones también admiten un conjunto de palabras clave: frases especiales que tienen un significado distinto solo dentro del sistema ExpressionAnimation. Estos se enumeran (junto con la lista completa de funciones matemáticas) en la documentación de ExpressionAnimation .

Creación de expresiones con ExpressionBuilder

Hay dos opciones para compilar expresiones en la aplicación WinUI:

  1. Compile la ecuación como una cadena a través de la API pública oficial.
  2. Compile la ecuación en un modelo de objetos seguro para tipos a través de la herramienta ExpressionBuilder incluida con el Kit de herramientas de la comunidad de Windows.

Para este documento, definiremos nuestras expresiones mediante ExpressionBuilder.

Parámetros

Los parámetros constituyen el núcleo de una expresión. Hay dos tipos de parámetros:

  • Constantes: son parámetros que representan variables System.Numeric tipadas. Estos parámetros obtienen sus valores asignados una vez cuando se inicia la animación.
  • Referencias: estos son parámetros que representan referencias a CompositionObjects: estos parámetros obtienen continuamente sus valores actualizados después de iniciar una animación.

En general, Las referencias son el aspecto principal de cómo la salida de una expresión puede cambiar dinámicamente. A medida que cambian estas referencias, la salida de la expresión cambia como resultado. Si crea su expresión con cadenas o las utiliza en un contexto de plantillas (utilizando su expresión para apuntar a varios CompositionObjects), deberá asignar un nombre y establecer los valores de los parámetros. Consulta la sección Ejemplo para obtener más información.

Trabajar con KeyFrameAnimations

Las expresiones también se pueden usar con KeyFrameAnimations. En estos casos, se desea usar una expresión para definir el valor de un fotograma clave en un momento dado: estos tipos de fotogramas clave se denominan ExpressionKeyFrames.

KeyFrameAnimation.InsertExpressionKeyFrame(Single, String)
KeyFrameAnimation.InsertExpressionKeyFrame(Single, ExpressionNode)

Sin embargo, a diferencia de ExpressionAnimations, ExpressionKeyFrames solo se evalúa una vez cuando se inicia KeyFrameAnimation. Tenga en cuenta que no se pasa un ExpressionAnimation como valor del fotograma clave, sino una cadena (o un ExpressionNode, si está utilizando ExpressionBuilder).

Ejemplo

Ahora vamos a ver un ejemplo de uso de expresiones, específicamente el ejemplo PropertySet de la Galería de ejemplos de interfaz de usuario de Windows. Veremos la expresión que administra el comportamiento del movimiento de órbita de la bola azul.

Círculo orbitante

Hay tres componentes en juego para la experiencia total:

  1. Una KeyFrameAnimation, que anima el desplazamiento Y de la bola roja.
  2. PropertySet con una propiedad Rotation que ayuda a controlar la órbita, animada mediante otra animación KeyFrameAnimation.
  3. ExpressionAnimation que impulsa el desplazamiento de la bola azul haciendo referencia al desplazamiento de la bola roja y a la propiedad de rotación para mantener una órbita perfecta.

Nos centraremos en el ExpressionAnimation definido en el #3. También usaremos las clases ExpressionBuilder para construir esta expresión. Al final se muestra una copia del código utilizado para construir esta experiencia mediante el objeto String.

En esta ecuación, hay dos propiedades a las que debe hacer referencia desde propertySet; uno es un desplazamiento de punto central y el otro es la rotación.

var propSetCenterPoint =
_propertySet.GetReference().GetVector3Property("CenterPointOffset");

// This rotation value will animate via KFA from 0 -> 360 degrees
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");

A continuación, debe definir el componente Vector3 que tiene en cuenta la rotación en órbita real.

var orbitRotation = EF.Vector3(
    EF.Cos(EF.ToRadians(propSetRotation)) * 150,
    EF.Sin(EF.ToRadians(propSetRotation)) * 75, 0);

Nota:

EF es una notación abreviada de "using" para definir ExpressionFunctions de la biblioteca del generador de expresiones WinUI.

Por último, combine estos componentes y haga referencia a la posición de la Bola Roja para definir la relación matemática.

var orbitExpression = redSprite.GetReference().Offset + propSetCenterPoint + orbitRotation;
blueSprite.StartAnimation("Offset", orbitExpression);

En un escenario hipotético, qué pasaría si quisiera usar esta misma Expression pero con dos otros objetos visuales, lo que significa dos conjuntos de círculos orbitando. Con CompositionAnimations, puede volver a usar la animación y tener como destino varios CompositionObjects. Lo único que necesita cambiar al utilizar esta expresión en el caso de la órbita adicional es la referencia al Visual. A esto lo llamamos 'templating'.

En este caso, modificará la expresión que creó anteriormente. En lugar de "obtener" una referencia a CompositionObject, cree una referencia con un nombre y, a continuación, asigne valores diferentes:

var orbitExpression = ExpressionValues.Reference.CreateVisualReference("orbitRoundVisual");
orbitExpression.SetReferenceParameter("orbitRoundVisual", redSprite);
blueSprite.StartAnimation("Offset", orbitExpression);
// Later on … use same Expression to assign to another orbiting Visual
orbitExpression.SetReferenceParameter("orbitRoundVisual", yellowSprite);
greenSprite.StartAnimation("Offset", orbitExpression);

Este es el código si definió la expresión con cadenas a través de la API pública.

ExpressionAnimation expressionAnimation = compositor.CreateExpressionAnimation("visual.Offset + " +
    "propertySet.CenterPointOffset + " +
    "Vector3(cos(ToRadians(propertySet.Rotation)) * 150," + "sin(ToRadians(propertySet.Rotation)) * 75, 0)");
    
var propSetCenterPoint = _propertySet.GetReference().GetVector3Property("CenterPointOffset");
var propSetRotation = _propertySet.GetReference().GetScalarProperty("Rotation");
expressionAnimation.SetReferenceParameter("propertySet", _propertySet);
expressionAnimation.SetReferenceParameter("visual", redSprite);
  • Last updated on