Efectos de perspectiva 3D para la interfaz de usuario XAML

Puede aplicar efectos 3D al contenido de las aplicaciones de Windows Runtime mediante transformaciones de perspectiva. Por ejemplo, puede crear la ilusión de que un objeto se gira hacia usted o se aleja de usted, como se muestra aquí.

Otro uso común para las transformaciones de perspectiva es organizar objetos en relación entre sí para crear un efecto 3D, como aquí.

Además de crear efectos estáticos 3D, puede animar las propiedades de transformación de perspectiva para crear efectos 3D móviles.

Acabas de ver las transformaciones de perspectiva aplicadas a las imágenes, pero puedes aplicar estos efectos a cualquier UIElement, incluidos los controles. Por ejemplo, puede aplicar un efecto 3D a un contenedor completo de controles como este:

Este es el código XAML que se usa para crear este ejemplo:

<StackPanel Margin="35" Background="Gray">
    <StackPanel.Projection>
        <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />
    </StackPanel.Projection>
    <TextBlock Margin="10">Type Something Below</TextBlock>
    <TextBox Margin="10"></TextBox>
    <Button Margin="10" Content="Click" Width="100" />
</StackPanel>

Aquí nos centramos en las propiedades de PlaneProjection que se usa para girar y mover objetos en un espacio 3D. El ejemplo siguiente le permite experimentar con estas propiedades y ver su efecto en un objeto .

Clase PlaneProjection

Puede aplicar efectos 3D a cualquier UIElement estableciendo la propiedad Projection de UIElement mediante un PlaneProjection. PlaneProjection define cómo se representa la transformación en el espacio. En el ejemplo siguiente se muestra un caso sencillo.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35"   />
    </Image.Projection>
</Image>

Esta figura muestra cómo se renderiza la imagen. El eje X, el eje Y y el eje Z se muestran como líneas rojas. La imagen se gira hacia atrás 35 grados alrededor del eje X mediante la propiedad RotationX .

La propiedad RotationY gira alrededor del eje Y del centro de rotación.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35"   />
    </Image.Projection>
</Image>

La propiedad RotationZ gira alrededor del eje Z del centro de rotación (una línea que es perpendicular al plano del objeto).

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationZ="-45"/>
    </Image.Projection>
</Image>

Las propiedades de rotación pueden especificar un valor positivo o negativo para girar en cualquier dirección. El número absoluto puede ser mayor que 360, lo que hace girar el objeto más de una vuelta completa.

Puede mover el centro de rotación mediante las propiedades CenterOfRotationX, CenterOfRotationY y CenterOfRotationZ . De forma predeterminada, los ejes de rotación se ejecutan directamente a través del centro del objeto, lo que hace que el objeto gire alrededor de su centro. Pero si mueve el centro de rotación al borde exterior del objeto, girará alrededor de ese borde. Los valores predeterminados de CenterOfRotationX y CenterOfRotationY son 0,5 y el valor predeterminado de CenterOfRotationZ es 0. Para CenterOfRotationX y CenterOfRotationY, los valores entre 0 y 1 establecen el punto dinámico en alguna ubicación dentro del objeto . Un valor de 0 denota un borde de objeto y 1 denota el borde opuesto. Se permiten valores fuera de este intervalo y moverán el centro de rotación en consecuencia. Dado que el eje Z del centro de rotación se dibuja a través del plano del objeto, puede mover el centro de rotación detrás del objeto mediante un número negativo y delante del objeto (hacia usted) mediante un número positivo.

CenterOfRotationX mueve el centro de rotación a lo largo del eje X paralelo al objeto mientras CenterOfRotationY mueve el centro o rotación a lo largo del eje Y del objeto. En las ilustraciones siguientes se muestra cómo usar valores diferentes para CenterOfRotationY.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationY = "0,5" (valor predeterminado)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.1"/>
    </Image.Projection>
</Image>

CenterOfRotationY = "0,1"

Observe cómo la imagen gira alrededor del centro cuando la propiedad CenterOfRotationY se establece en el valor predeterminado de 0,5 y gira cerca del borde superior cuando se establece en 0,1. Verá un comportamiento similar al cambiar la propiedad CenterOfRotationX para mover donde la propiedad RotationY gira el objeto.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0,5" (valor predeterminado)

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.9" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0,9" (borde derecho)

Utilice CenterOfRotationZ para colocar el centro de rotación por encima o por debajo del plano del objeto. De este modo, puedes girar el objeto alrededor del punto análogo a un planeta que orbita alrededor de una estrella.

Posicionamiento de un objeto

Hasta ahora, has aprendido a rotar un objeto en el espacio. Puede colocar estos objetos girados en el espacio en relación entre sí mediante estas propiedades:

• LocalOffsetX mueve un objeto a lo largo del eje X del plano de un objeto girado.
• LocalOffsetY mueve un objeto a lo largo del eje Y del plano de un objeto girado.
• LocalOffsetZ mueve un objeto a lo largo del eje Z del plano de un objeto girado.
• GlobalOffsetX mueve un objeto a lo largo del eje X alineado con la pantalla.
• GlobalOffsetY mueve un objeto a lo largo del eje Y alineado con la pantalla.
• GlobalOffsetZ mueve un objeto a lo largo del eje Z alineado con la pantalla.

Desplazamiento local

Las propiedades LocalOffsetX, LocalOffsetY y LocalOffsetZ traducen un objeto a lo largo del eje respectivo del plano del objeto una vez girado. Por lo tanto, el giro del objeto determina la dirección en la que se traduce el objeto. Para demostrar este concepto, el siguiente ejemplo anima LocalOffsetX de 0 a 400 y RotationY de 0 a 65 grados.

Observe en el ejemplo anterior que el objeto se mueve a lo largo de su propio eje X. Al principio de la animación, cuando el valor RotationY está cerca de cero (paralelo a la pantalla), el objeto se mueve a lo largo de la pantalla en la dirección x, pero a medida que el objeto gira hacia usted, el objeto se mueve a lo largo del eje X del plano del objeto hacia usted. Por otro lado, si animaste la propiedad RotationY para -65 grados, el objeto se curvaría lejos de ti.

LocalOffsetY funciona de forma similar a LocalOffsetX, salvo que se mueve a lo largo del eje vertical, por lo que cambiar RotationX afecta a la dirección LocalOffsetY mueve el objeto. En el ejemplo siguiente, LocalOffsetY se anima de 0 a 400 y RotationX de 0 a 65 grados.

LocalOffsetZ traduce el objeto perpendicular al plano del objeto como si un vector se dibujase directamente a través del centro desde detrás del objeto hacia usted. Para demostrar cómo funciona LocalOffsetZ , el siguiente ejemplo anima LocalOffsetZ de 0 a 400 y RotationX de 0 a 65 grados.

Al principio de la animación, cuando el valor RotationX está cerca de cero (paralelo a la pantalla), el objeto se mueve directamente hacia usted, pero a medida que la cara del objeto gira hacia abajo, el objeto se mueve hacia abajo en su lugar.

Desplazamiento global

Las propiedades GlobalOffsetX, GlobalOffsetY y GlobalOffsetZ traducen el objeto a lo largo de ejes relativos a la pantalla. Es decir, a diferencia de las propiedades de desplazamiento local, el eje al que se mueve el objeto es independiente de cualquier rotación aplicada al objeto. Estas propiedades son útiles cuando se desea simplemente mover el objeto a lo largo del eje x, y-o z de la pantalla sin preocuparse por la rotación aplicada al objeto.

En el ejemplo siguiente se anima GlobalOffsetX de 0 a 400 y RotationY de 0 a 65 grados.

Observe en este ejemplo que el objeto no cambia el curso a medida que gira. Esto se debe a que el objeto se mueve a lo largo del eje X de la pantalla sin tener en cuenta su rotación.

Escenarios semi-3D más complejos

Puede usar los tipos Matrix3DProjection y Matrix3D para escenarios semi-3D más complejos de los que son posibles con PlaneProjection. Matrix3DProjection proporciona una matriz de transformación 3D completa que se aplica a cualquier UIElement, de modo que pueda aplicar matrices de transformación de modelos arbitrarios y matrices de perspectiva a los elementos. Tenga en cuenta que estas API son mínimas y, por lo tanto, si las usa, deberá escribir el código que crea correctamente las matrices de transformación 3D. Por este motivo, es más fácil usar PlaneProjection para escenarios 3D sencillos.