Effetti di prospettiva 3D per l’interfaccia utente XAML3-D perspective effects for XAML UI

Puoi applicare effetti 3D al contenuto nelle tue app di Windows Runtime usando le trasformazioni prospettiche.You can apply 3-D effects to content in your Windows Runtime apps using perspective transforms. Puoi ad esempio creare l’illusione che un oggetto venga ruotato verso di te o in direzione opposta a te, come mostrato qui.For example, you can create the illusion that an object is rotated toward or away from you, as shown here.

Immagine con trasformazione prospettica

Altro utilizzo comune per le trasformazioni prospettiche è la disposizione degli oggetti in relazione reciproca per creare un effetto 3D, come illustrato qui.Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

Sovrapposizione di oggetti per creare un effetto 3D

Oltre a creare effetti 3D statici, è possibile animare le proprietà della trasformazione prospettica per creare effetti 3D in movimento.Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.

Hai appena visto le trasformazioni prospettiche applicate alle immagini, è possibile tuttavia applicare tali effetti a qualsiasi UIElement, inclusi i controlli.You just saw perspective transforms applied to images, but you can apply these effects to any UIElement, including controls. Puoi applicare, ad esempio, un effetto 3D a un intero contenitore di controlli come il seguente:For example, you can apply a 3-D effect to an entire container of controls like this:

Effetto 3-D applicato a un contenitore di elementi

Ecco il codice XAML usato per creare questo esempio: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>

Qui abbiamo focalizzato l’attenzione sulle proprietà di PlaneProjection usato per ruotare e muovere oggetti nello spazio 3D.Here we focus on the properties of PlaneProjection which is used to rotate and move objects in 3-D space. Il prossimo esempio consente di sperimentare queste proprietà e di vederne l'effetto su un oggetto.The next sample allows you to experiment with these properties and see their effect on an object.

Classe PlaneProjectionPlaneProjection class

Puoi applicare gli effetti 3D a qualsiasi oggetto UIElement, impostando la proprietà Projection di UIElement tramite PlaneProjection.You can apply 3D effects can to any UIElement, by setting the UIElement's Projection property using a PlaneProjection. PlaneProjection definisce il modo in cui viene eseguito il rendering della trasformazione nello spazio.The PlaneProjection defines how the transform is rendered in space. L'esempio seguente mostra un caso semplice.The next example shows a simple case.

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

Questa figura mostra come viene eseguito il rendering dell'immagine.This figure shows what the image renders as. Gli assi x, y e z vengono visualizzati come linee rosse.The x-axis, y-axis, and z-axis are shown as red lines. L’immagine viene ruotata all’indietro di 35 gradi attorno all’asse x usando la proprietà RotationX.The image is rotated backward 35 degrees around the x-axis using the RotationX property.

Proprietà per la rotazione inversa dell'asse X di 35 gradi

La proprietà RotationY ruota attorno all’asse y del centro di rotazione.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>

Proprietà per la rotazione inversa dell'asse Y di 35 gradi

La proprietà RotationZ ruota attorno all’asse z del centro di rotazione (una linea perpendicolare al piano dell’oggetto).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>

Proprietà per la rotazione inversa dell'asse Z di 45 gradi

Le proprietà di rotazione possono specificare un valore positivo o negativo per ruotare l'oggetto in una delle due direzioni.The rotation properties can specify a positive or negative value to rotate in either direction. Il numero assoluto può essere maggiore di 360, per ruotare l'oggetto di più di una rotazione completa.The absolute number can be greater than 360, which rotates the object more than one full rotation.

Il centro di rotazione può essere spostato usando le proprietà CenterOfRotationX, CenterOfRotationY e CenterOfRotationZ.You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. Per impostazione predefinita, gli assi di rotazione passano direttamente per il centro dell'oggetto, determinando la rotazione dell'oggetto attorno al proprio centro.By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center. Se tuttavia sposti il centro di rotazione sul bordo esterno dell'oggetto, la rotazione avverrà attorno a tale bordo.But if you move the center of rotation to the outer edge of the object, it will rotate around that edge. Il valore predefinito per CenterOfRotationX e CenterOfRotationY è 0,5, mentre quello per CenterOfRotationZ è 0.The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. Per CenterOfRotationX e CenterOfRotationY, i valori compresi fra 0 e 1 impostano il punto pivot in determinate posizioni all’interno dell’oggetto.For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. Il valore 0 indica il bordo di un oggetto, mentre 1 indica il bordo opposto.A value of 0 denotes one object edge and 1 denotes the opposite edge. I valori esterni a tale intervallo sono consentiti e spostano il centro di rotazione di conseguenza.Values outside of this range are allowed and will move the center of rotation accordingly. Dato che l'asse z del centro di rotazione viene disegnato attraverso il piano dell'oggetto, puoi spostare il centro di rotazione dietro l'oggetto impostando un numero negativo e davanti all'oggetto (verso l'utente) usando un numero 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 sposta il centro di rotazione lungo l'asse x parallelo all'oggetto, mentre CenterOfRotationY sposta il centro di rotazione lungo l'asse y dell'oggetto.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. Le illustrazioni seguenti mostrano l’uso di valori diversi per 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" (impostazione predefinita)CenterOfRotationY = "0.5" (default)

CenterOfRotationY uguale 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 uguale a 0,1

Osserva come l’immagine ruota attorno al centro quando la proprietà CenterOfRotationY è impostata sul valore predefinito 0,5 e come ruota vicino al bordo superiore quando è impostata su 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. Un comportamento simile è osservabile modificando la proprietà CenterOfRotationX per spostare il punto in cui la proprietà RotationY ruota l’oggetto.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" (impostazione predefinita)CenterOfRotationX = "0.5" (default)

CenterOfRotationX uguale a 0,5

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

CenterOfRotationX = "0,9" (bordo destro)CenterOfRotationX = "0.9" (right-hand edge)

CenterOfRotationX uguale a 0,9

Usa CenterOfRotationZ per posizionare il centro di rotazione sopra o sotto il piano dell’oggetto.Use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. In questo modo, puoi ruotare l'oggetto attorno al punto in modo analogo a un pianeta in orbita attorno a una stella.This way, you can rotate the object around the point analogous to a planet orbiting around a star.

Posizionamento di un oggettoPositioning an object

Fin qui, hai appreso come ruotare un oggetto nello spazio.So far, you learned how to rotate an object in space. Usando le proprietà riportate di seguito, puoi posizionare gli oggetti ruotati nello spazio uno rispetto all'altro:You can position these rotated objects in space relative to one another by using these properties:

  • LocalOffsetX muove un oggetto lungo l'asse x del piano di un oggetto ruotato.LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
  • LocalOffsetY muove un oggetto lungo l'asse y del piano di un oggetto ruotato.LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
  • LocalOffsetZ muove un oggetto lungo l'asse z del piano di un oggetto ruotato.LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
  • GlobalOffsetX muove un oggetto lungo l'asse x allineato allo schermo.GlobalOffsetX moves an object along the screen-aligned x-axis.
  • GlobalOffsetY muove un oggetto lungo l'asse y allineato allo schermo.GlobalOffsetY moves an object along the screen-aligned y-axis.
  • GlobalOffsetZ muove un oggetto lungo l'asse z allineato allo schermo.GlobalOffsetZ moves an object along the screen-aligned z-axis.

Offset localeLocal offset

Le proprietà LocalOffsetX, LocalOffsetY eLocalOffsetZ traslano un oggetto lungo il rispettivo asse del piano dell’oggetto dopo la rotazione dell’oggetto.The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. Di conseguenza, la rotazione dell'oggetto determina la direzione di traslazione dell'oggetto.Therefore, the rotation of the object determines the direction that the object is translated. Per dimostrare questo concetto, l’esempio seguente esegue l’animazione di LocalOffsetX da 0 a 400 gradi e di RotationY da 0 a 65 gradi.To demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Nota che nell'esempio precedente l'oggetto si sposta lungo il proprio asse x.Notice in the preceding sample that the object is moving along its own x-axis. All’inizio dell’animazione, quando il valore di RotationY è prossimo a zero (parallelo allo schermo), l’oggetto si sposta lungo lo schermo in direzione x, ma poiché ruota verso di te, l’oggetto si sposta lungo l’asse x del piano dell’oggetto verso di te.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. Al contrario, se la proprietà RotationY viene animata impostando un valore di -65 gradi, l’oggetto forma una curva in direzione opposta a te.On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.

LocalOffsetY funziona in modo simile a LocalOffsetX, con l'unica differenza che si sposta lungo l'asse verticale. Di conseguenza, la modifica di RotationX influisce sulla direzione in base alla quale LocalOffsetY sposta l'oggetto.LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. Nell’esempio seguente viene eseguita l’animazione di LocalOffsetY da 0 a 400 gradi e di RotationX da 0 a 65 gradi.In the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ esegue la traslazione dell'oggetto perpendicolarmente al piano dell'oggetto, come se venisse disegnato un vettore partendo direttamente da dietro l'oggetto verso di te attraverso il centro.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. Per dimostrare il funzionamento di LocalOffsetZ, l’esempio seguente esegue l’animazione di LocalOffsetZ da 0 a 400 gradi e di RotationX da 0 a 65 gradi.To demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

All’inizio dell’animazione, quando il valore di RotationX è prossimo a zero (parallelo allo schermo), l’oggetto si sposta direttamente verso l’utente, ma poiché la superficie dell’oggetto ruota verso il basso, l’oggetto si sposta verso il basso anziché verso l’utente.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.

Offset globaleGlobal offset

Le proprietà GlobalOffsetX, GlobalOffsetY eGlobalOffsetZ consentono di traslare l’oggetto lungo gli assi rispetto allo schermo.The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. Ovvero, diversamente dalle proprietà dell'offset locale, l'asse lungo cui si sposta l'oggetto è indipendente da qualsiasi rotazione applicata all'oggetto.That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. Queste proprietà risultano utili quando vuoi semplicemente spostare l'oggetto lungo l'asse x, y o z dello schermo indipendentemente dalla rotazione applicata all'oggetto.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.

Nell’esempio seguente viene eseguita l’animazione di GlobalOffsetX da 0 a 400 gradi e di RotationY da 0 a 65 gradi.The next sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Si noti che in questo esempio l'oggetto non cambia direzione durante la rotazione.Notice in this sample that the object does not change course as it rotates. Ciò accade in quanto l'oggetto viene spostato lungo l'asse x dello schermo indipendentemente dalla rotazione.That is because the object is being moved along the x-axis of the screen without regard to its rotation.

Scenari semi-3D più complessiMore complex semi-3D scenarios

Puoi usare i tipi Matrix3DProjection e Matrix3D per scenari semi-3D più complessi rispetto a quelli possibili con PlaneProjection.You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. Matrix3DProjection offre una matrice di trasformazione 3D completa da applicare a qualsiasi oggetto UIElement, per permettere l’applicazione di matrici di trasformazione del modello arbitrarie e matrici prospettiche agli elementi.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. Tieni presente che poiché queste API offrono funzionalità minime, se scegli di usarle dovrai scrivere il codice che crea correttamente le matrici di trasformazione 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. Per questo motivo, è più facile usare PlaneProjection per gli scenari 3D semplici.Because of this, it is easier to use PlaneProjection for simple 3D scenarios.