Compartir a través de

Animaciones basadas en puntero

En este artículo se muestra cómo usar la posición de un puntero para crear experiencias dinámicas de "stick to the cursor".

Requisitos previos

En este caso, 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 Fluent Design, la opción táctil no es la única manera de interactuar con la interfaz de usuario. Dado que UWP abarca varios factores de forma de dispositivo, los usuarios finales interactúan con aplicaciones con otras modalidades de entrada, como mouse y lápiz. El uso de datos de posición de estas otras modalidades de entrada proporciona una oportunidad para que los usuarios finales se sientan aún más conectados con la aplicación.

Las experiencias basadas en la posición del puntero permiten aprovechar la posición en pantalla de una modalidad de entrada de puntero para crear experiencias adicionales de movimiento e interfaz de usuario para la 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 en la que el usuario final proporciona entradas con su modalidad de entrada y la interfaz de usuario de la aplicación puede reaccionar.

Estos son algunos ejemplos:

  • Animación de la posición de un contenido destacado 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 de PointerPositionPropertySet

Puede crear estas experiencias mediante PointerPositionPropertySet. Este PropertySet se crea para que UIElement mantenga la posición del puntero mientras UIElement realice una prueba de posicionamiento de manera positiva. 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 aprovechar esta propiedad establecida en una animación para impulsar el movimiento de otra propiedad.

Para cada una de las distintas modalidades de entrada de puntero, hay un número de estados de entrada en los que la entrada puede estar en la que cambia la posición: Hover, Pressed, Pressed & Moved. PointerPositionPropertySet solo mantiene la posición del puntero en los estados Hover, Pressed, Pressed & Moved. en el caso del mouse y el lápiz.

Pasos generales para empezar:

  1. Identifique UIElement donde desea tener la posición del puntero al que se realiza el seguimiento.
  2. Acceda a PointerPositionPropertySet a través de ElementCompositionPreview.
  3. Cree una expresiónAnimation que haga referencia a la propiedad Position en PropertySet.
    • No olvide establecer el parámetro de referencia.
  4. Establezca 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 sólida a ninguno de los objetos usados en la ecuación.

Ejemplo

Echemos un vistazo a un ejemplo en el que aprovechamos la posición Hover de una modalidad de entrada de mouse y lápiz 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:

  • Una expresión en la que la imagen gira en función de lo lejos que el puntero está del centro de la imagen. Cuanto más lejos, más rotación.
  • Una expresión en la que el eje de rotación cambia en función de la posición del puntero. Se recomienda 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