Compartir a través de

Animaciones basadas en puntero

En este artículo se muestra cómo usar la posición de un puntero en las aplicaciones de WinUI y Windows App SDK para crear experiencias dinámicas de "seguimiento del cursor".

Prerrequisitos

Aquí se supone que está familiarizado con los conceptos descritos en estos artículos:

¿Por qué crear experiencias basadas en la posición del puntero?

En el Lenguaje de Diseño Fluent, táctil no es la única manera de interactuar con la interfaz de usuario. Dado que las aplicaciones WinUI pueden abarcar varios factores de forma de dispositivo, los usuarios finales interactúan con las aplicaciones con otras modalidades de entrada, como mouse y lápiz. El uso de datos de posición de estas otras modalidades de entrada ofrece una oportunidad para que los usuarios finales se sientan aún más conectados con la aplicación.

Las experiencias controladas por posición de puntero te permiten aprovechar la posición en pantalla de una modalidad de entrada de puntero para crear experiencias adicionales de movimiento y interfaz de usuario para tu aplicación. Estas experiencias a menudo pueden proporcionar contexto y comentarios adicionales a los usuarios finales sobre el comportamiento y la estructura de la interfaz de usuario. La experiencia ya no es una secuencia unidireccional, sino que empieza a convertirse en una secuencia bidireccional donde el usuario final proporciona la entrada con su modalidad de entrada y la interfaz de usuario de la aplicación puede responder de nuevo.

Estos son algunos ejemplos:

  • Animar la posición de un foco de luz para seguir el cursor

    Ejemplo de contenido destacado del puntero

  • Rotación de una imagen basada en la posición de un puntero

    Ejemplo de rotación de puntero

Uso del conjunto de propiedades de posición del puntero

Puede crear estas experiencias mediante PointerPositionPropertySet. Este PropertySet se crea para un UIElement con el fin de mantener la posición del puntero mientras dicho UIElement se somete a una prueba positiva de detección. El valor de posición es relativo al espacio de coordenadas de UIElement (una posición de <0,0> es la esquina superior izquierda de UIElement). A continuación, puede utilizar esta propiedad configurada en una animación para controlar el movimiento de otra propiedad.

Para cada una de las diferentes modalidades de entrada de puntero, hay una serie de estados de entrada en los que la entrada podría estar en donde cambia la posición: Mantener el puntero, Presionar, Presionar y Mover. PointerPositionPropertySet solo mantiene la posición del puntero en los estados Hover, Pressed y Pressed y Moved para Mouse y Pen.

Pasos generales para empezar:

  1. Identifique el UIElement en el que desea rastrear la posición del puntero.
  2. Acceda a PointerPositionPropertySet a través de ElementCompositionPreview.
  3. Cree una ExpressionAnimation que haga referencia a la propiedad Position en el PropertySet.
    • No olvide establecer el parámetro de referencia.
  4. Establecer como destino la propiedad de CompositionObject con ExpressionAnimation.

Nota:

Se recomienda asignar el PropertySet devuelto desde el método GetPointerPositionPropertySet a una variable de clase. Esto garantiza que el conjunto de propiedades no se limpia mediante la recolección de elementos no utilizados y, por tanto, no tiene ningún efecto en expressionAnimation en el que se hace referencia. ExpressionAnimations no mantienen una referencia fuerte a ninguno de los objetos usados en la ecuación.

Ejemplo

Echemos un vistazo a un ejemplo en el que aprovechamos la posición de desplazamiento de un ratón y un lápiz como método de entrada para girar dinámicamente una imagen.

Ejemplo de rotación de puntero

La imagen es un UIElement, por lo que primero obtendremos una referencia a PointerPositionPropertySet.

_pointerPositionPropSet = ElementCompositionPreview.GetPointerPositionPropertySet(UIElement element);

En este ejemplo, tiene dos expresiones en juego:

  • Expresión en la que la imagen gira en función de lo lejos que el puntero está desde el centro de la imagen. Cuanto más lejos, más rotación.
  • Expresión en la que el eje de rotación cambia en función de la posición del puntero. Desea que el eje de rotación sea perpendicular al vector de la posición.

Aquí, definirá las dos expresiones, una que tiene como destino la propiedad RotationAngle y la otra la propiedad RotationAxis. Se hace referencia a PointerPositionPropertySet como cualquier otro PropertySet.

En este ejemplo, va a compilar expresiones mediante las clases ExpressionBuilder .

// using EF = ExpressionBuilder.ExpressionFunctions;
// || DEFINE THE EXPRESSION FOR THE ROTATION ANGLE ||
var hoverPosition = _pointerPositionPropSet.GetSpecializedReference
<PointerPositionPropertySetReferenceNode>().Position;
var angleExpressionNode =
EF.Conditional(
 hoverPosition == new Vector3(0, 0, 0),
 ExpressionValues.CurrentValue.CreateScalarCurrentValue(),
 35 * ((EF.Clamp(EF.Distance(center, hoverPosition), 0, distanceToCenter) % distanceToCenter) / distanceToCenter));
_tiltVisual.StartAnimation("RotationAngleInDegrees", angleExpressionNode);

// || DEFINE THE EXPRESSION FOR THE ROTATION AXIS ||
var axisAngleExpressionNode = EF.Vector3(
-(hoverPosition.Y - center.Y) * EF.Conditional(hoverPosition.Y == center.Y, 0, 1),
 (hoverPosition.X - center.X) * EF.Conditional(hoverPosition.X == center.X, 0, 1),
 0);
_tiltVisual.StartAnimation("RotationAxis", axisAngleExpressionNode);

Consulte también

  • Last updated on