Efeitos da perspectiva 3D na interface do usuário XAML3-D perspective effects for XAML UI

Você pode aplicar efeitos 3D ao conteúdo em seus aplicativos do Windows Runtime usando transformações de perspectiva.You can apply 3-D effects to content in your Windows Runtime apps using perspective transforms. Por exemplo, você pode criar a ilusão de que um objeto está sendo girado em sua direção ou para longe de você, como mostrado abaixo.For example, you can create the illusion that an object is rotated toward or away from you, as shown here.

Imagem com transformação de perspectiva

Outro uso comum para transformações de perspectiva é organizar objetos em relação uns aos outros para criar um efeito 3D, como visto aqui.Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

Empilhando objetos para criar um efeito 3D

Além de criar efeitos 3D estáticos, você pode animar as propriedades da transformação de perspectiva para criar efeitos 3D em movimento.Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.

Você acabou de ver transformações de perspectiva aplicadas a imagens, mas você pode aplicar esses efeitos a qualquer UIElement, incluindo controles.You just saw perspective transforms applied to images, but you can apply these effects to any UIElement, including controls. Por exemplo, você pode aplicar um efeito 3D a um contêiner de controles inteiro, assim:For example, you can apply a 3-D effect to an entire container of controls like this:

Efeito 3D aplicado a um contêiner de elementos

Aqui está o código XAML usado para criar esta amostra:Here is the XAML code used to create this sample:

<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>

Aqui, focamos nas propriedades do PlaneProjection, usado para girar e mover objetos em um espaço 3D.Here we focus on the properties of PlaneProjection which is used to rotate and move objects in 3-D space. A próxima amostra permite que você teste essas propriedades e veja o efeito em um objeto.The next sample allows you to experiment with these properties and see their effect on an object.

Classe PlaneProjectionPlaneProjection class

Você pode aplicar efeitos 3D a qualquer UIElement, configurando a propriedade Projeção do UIElement usando um PlaneProjection.You can apply 3D effects can to any UIElement, by setting the UIElement's Projection property using a PlaneProjection. O PlaneProjection define como a transformação é renderizada no espaço.The PlaneProjection defines how the transform is rendered in space. O próximo exemplo mostra um caso simples.The next example shows a simple case.

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

Esta figura mostra como a imagem é renderizada.This figure shows what the image renders as. O eixo x, o eixo y e o eixo z são mostrados como linhas vermelhas.The x-axis, y-axis, and z-axis are shown as red lines. A imagem é girada 35 graus para trás em torno do eixo x usando a propriedade RotationX.The image is rotated backward 35 degrees around the x-axis using the RotationX property.

RotateX menos 35 graus.

A propriedade RotationY gira em torno do eixo y do centro de rotação.The RotationY property rotates around the y-axis of the center of rotation.

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

RotateY menos 35 graus

A propriedade RotationZ gira em torno do eixo z do centro de rotação (uma linha perpendicular ao plano do objeto).The RotationZ property rotates around the z-axis of the center of rotation (a line that is perpendicular to the plane of the object).

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

RotateZ menos 45 graus

As propriedades de rotação podem especificar um valor positivo ou negativo a ser girado em qualquer direção.The rotation properties can specify a positive or negative value to rotate in either direction. O número absoluto pode ser maior que 360, que gira o objeto mais de uma rotação completa.The absolute number can be greater than 360, which rotates the object more than one full rotation.

Você pode mover o centro de rotação usando as propriedades CenterOfRotationX, CenterOfRotationY e CenterOfRotationZ.You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. Por padrão, os eixos de rotação são executados diretamente através do centro do objeto, fazendo com que o mesmo gire ao redor do próprio centro.By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center. Mas se você mover os centros de rotação para a borda externa do objeto, ele girará em torno daquela borda.But if you move the center of rotation to the outer edge of the object, it will rotate around that edge. Os valores padrão para CenterOfRotationX e CenterOfRotationY são 0,5 e o valor padrão para CenterOfRotationZ é 0.The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. Para CenterOfRotationX e CenterOfRotationY os valores entre 0 e 1 definem o ponto dinâmico em um local dentro do objeto.For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. O valor 0 representa uma borda de objeto e o valor 1 representa a borda oposta.A value of 0 denotes one object edge and 1 denotes the opposite edge. Valores fora desse intervalo são permitidos e moverão o centro da rotação de forma apropriada.Values outside of this range are allowed and will move the center of rotation accordingly. Pelo eixo z do centro de rotação ser desenhado através do plano do objeto, você pode mover o centro de rotação para trás do objeto usando um número negativo e para a frente do objeto (em direção a você) usando um número positivo.Because the z-axis of the center of rotation is drawn through the plane of the object, you can move the center of rotation behind the object using a negative number and in front of the object (toward you) using a positive number.

CenterOfRotationX move o centro de rotação ao longo do eixo x, paralelo ao objeto, enquanto CenterOfRotationY move o centro de rotação ao longo do eixo y do objeto.CenterOfRotationX moves the center of rotation along the x-axis parallel to the object while CenterOfRotationY moves the center or rotation along the y-axis of the object. As próximas ilustrações demonstram o uso de valores diferentes para CenterOfRotationY.The next illustrations demonstrate using different values for CenterOfRotationY.

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

CenterOfRotationY = "0,5" (padrão)CenterOfRotationY = "0.5" (default)

CenterOfRotationY igual a 0,5

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

CenterOfRotationY = "0,1"CenterOfRotationY = "0.1"

CenterOfRotationY igual a 0,1

Perceba como a imagem gira em torno do centro quando a propriedade CenterOfRotationY está definida para o valor padrão de 0,5 e gira próximo à borda superior quando está definida para 0,1.Notice how the image rotates around the center when the CenterOfRotationY property is set to the default value of 0.5 and rotates near the upper edge when set to 0.1. Pode-se ver um comportamento semelhante ao mudar a propriedade CenterOfRotationX para mover-se para onde a propriedade RotationY gira o objeto.You see similar behavior when changing the CenterOfRotationX property to move where the RotationY property rotates the object.

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

CenterOfRotationX = "0,5" (padrão)CenterOfRotationX = "0.5" (default)

CenterOfRotationX igual a 0,5

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

CenterOfRotationX = "0,9" (borda direita)CenterOfRotationX = "0.9" (right-hand edge)

CenterOfRotationX igual a 0,9

Usa o CenterOfRotationZ para posicionar o centro de rotação acima ou abaixo do plano do objeto.Use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. Dessa forma, você pode girar o objeto em torno do ponto de forma análoga a um planeta que orbita em torno de uma estrela.This way, you can rotate the object around the point analogous to a planet orbiting around a star.

Posicionando um objetoPositioning an object

Até agora, você aprendeu como girar um objeto no espaço.So far, you learned how to rotate an object in space. Você pode posicionar estes objetos girados no espaço em relação um ao outro usando estas propriedades:You can position these rotated objects in space relative to one another by using these properties:

  • LocalOffsetX move um objeto ao longo do eixo x do plano de um objeto rotacionado.LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
  • LocalOffsetY move um objeto ao longo do eixo y do plano de um objeto rotacionado.LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
  • LocalOffsetZ move um objeto ao longo do eixo z do plano de um objeto rotacionado.LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
  • GlobalOffsetX move um objeto ao longo do eixo x alinhado à tela.GlobalOffsetX moves an object along the screen-aligned x-axis.
  • GlobalOffsetY move um objeto ao longo do eixo y alinhado à tela.GlobalOffsetY moves an object along the screen-aligned y-axis.
  • GlobalOffsetZ move um objeto ao longo do eixo z alinhado à tela.GlobalOffsetZ moves an object along the screen-aligned z-axis.

Deslocamento localLocal offset

As propriedades LocalOffsetX, LocalOffsetY e LocalOffsetZ traduzem um objeto ao longo do respectivo eixo do plano do objeto depois de ele ter sido girado.The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. Portanto, a rotação do objeto determina a direção que em que o objeto está traduzido.Therefore, the rotation of the object determines the direction that the object is translated. Para demonstrar este conceito, a próxima amostra anima o LocalOffsetX de 0 a 400 e o RotationY de 0 a 65 graus.To demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Perceba que na amostra anterior o objeto está se movendo ao longo do seu próprio eixo x.Notice in the preceding sample that the object is moving along its own x-axis. Bem no início da animação, quando o valor RotationY está próximo a zero (paralelo à tela), o objeto se move ao longo da tela na direção x, mas conforme ele gira em direção a você, ele se move ao longo do eixo x do plano do objeto na sua direção.At the very beginning of the animation, when the RotationY value is near zero (parallel to the screen), the object moves along the screen in the x direction, but as the object rotates toward you, the object moves along the x-axis of the plane of the object toward you. Por outro lado, se você tivesse animado a propriedade RotationY para -65 graus, o objeto se curvaria na sua direção oposta.On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.

O LocalOffsetY trabalha de maneira semelhante ao LocalOffsetX, exceto por se mover ao longo dos eixos verticais. Então, mudar o RotationX afeta a direção para a qual LocalOffsetY move o objeto.LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. Na próxima amostra, o LocalOffsetY é animado de 0 a 400 e o RotationX de 0 a 65 graus.In the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ converte o objeto perpendicular para o plano do objeto mesmo que um vetor tenha sido desenhado diretamente através do centro de trás do objeto até você.LocalOffsetZ translates the object perpendicular to the plane of the object as though a vector was drawn directly through the center from behind the object out toward you. Para demonstrar como o LocalOffsetZ funciona, a próxima amostra anima o LocalOffsetZ de 0 a 400 e o RotationX de 0 a 65 graus.To demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

Bem no início da animação, quando o valor RotationX está próximo a zero (paralelo à tela), o objeto se move em direção a você, mas conforme a face dele gira para baixo, ele se move para baixo.At the beginning of the animation, when the RotationX value is near zero (parallel to the screen), the object moves directly out toward you, but as the face of the object rotates down, the object moves down instead.

Deslocamento globalGlobal offset

As propriedades GlobalOffsetX, GlobalOffsetY e GlobalOffsetZ traduzem o objeto ao longo dos eixos em relação à tela.The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. Ou seja, ao contrário das propriedades de deslocamento local, o eixo no qual o objeto é movido é independente de qualquer rotação aplicada ao objeto.That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. Essas propriedades são úteis quando você quer apenas mover o objeto pelos eixos x, y ou z da tela sem se preocupar com a rotação aplicada ao objeto.These properties are useful when you want to simply move the object along the x-, y-, or z-axis of the screen without worrying about the rotation applied to the object.

A próxima amostra anima o GlobalOffsetX de 0 a 400 e o RotationY de 0 a 65 graus.The next sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Perceba que, nesta amostra, o objeto não muda de direção conforme gira.Notice in this sample that the object does not change course as it rotates. Isso ocorre porque o objeto está sendo movido ao longo do eixo x da tela sem levar em consideração a sua rotação.That is because the object is being moved along the x-axis of the screen without regard to its rotation.

Mais cenários semi-3D complexosMore complex semi-3D scenarios

Você pode usar os tipos Matrix3DProjection e Matrix3D para cenários semi-3D mais complexos que são possíveis com o PlaneProjection.You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. O Matrix3DProjection fornece uma matriz de transformação 3D completa para ser aplicada a qualquer UIElement, para que você possa aplicar um modelo arbitrário de matrizes de transformação e de perspectiva aos elementos.Matrix3DProjection provides you with a complete 3D transform matrix to apply to any UIElement, so that you can apply arbitrary model transformation matrices and perspective matrices to elements. Não se esqueça de que essas APIs são mínimas e, logo, se você usá-las, precisará escrever o código que cria corretamente as matrizes de transformação 3D.Keep in mind that these API are minimal and therefore if you use them, you will need to write the code that correctly creates the 3D transform matrices. Por causa disso, é mais fácil usar o PlaneProjection para cenários 3D simples.Because of this, it is easier to use PlaneProjection for simple 3D scenarios.