XAML UI 的 3D 透視效果3-D perspective effects for XAML UI

您可以使用透視轉換將 3D 效果套用到 Windows 執行階段 App 中的內容。You can apply 3-D effects to content in your Windows Runtime apps using perspective transforms. 例如,您可以建立物件轉近或轉離的動畫效果,如這裡所示。For example, you can create the illusion that an object is rotated toward or away from you, as shown here.

透視轉換的影像

透視轉換的另一個常見用法,就是將物件排列在一起以建立 3D 效果,如下所示。Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

堆疊物件以建立 3D 效果

除了建立靜態 3D 效果,您也可以動畫顯示透視轉換屬性,以建立移動中的 3D 效果。Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.

前述範例是套用至影像的透視轉換,而您可以將這些效果套用至任何 UIElement,包括控制項。You just saw perspective transforms applied to images, but you can apply these effects to any UIElement, including controls. 例如,您可以將一種 3D 效果套用到整個控制項容器,如下所示:For example, you can apply a 3-D effect to an entire container of controls like this:

套用 3D 效果的元素容器

以下是建立此範例所用的 XAML 程式碼: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>

以下我們將焦點放在 PlaneProjection 屬性,其用途是在 3D 空間中旋轉和移動物件。Here we focus on the properties of PlaneProjection which is used to rotate and move objects in 3-D space. 您可以在下一個範例中實驗這些屬性,查看它們對物件產生的效果。The next sample allows you to experiment with these properties and see their effect on an object.

PlaneProjection 類別PlaneProjection class

使用 PlaneProjection 設定 UIElement 的 Projection 屬性,即可將 3D 效果套用至任何 UIElementYou can apply 3D effects can to any UIElement, by setting the UIElement's Projection property using a PlaneProjection. PlaneProjection 定義如何在空間中呈現轉換。The PlaneProjection defines how the transform is rendered in space. 以下範例顯示一個簡單情況。The next example shows a simple case.

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

此圖表顯示影像呈現的情形。This figure shows what the image renders as. x 軸、y 軸以及 z 軸以紅線顯示。The x-axis, y-axis, and z-axis are shown as red lines. 此影像是使用 RotationX 屬性繞著 x 軸往後旋轉 35 度。The image is rotated backward 35 degrees around the x-axis using the RotationX property.

RotateX 減 35 度

RotationY 屬性是繞著旋轉中心的 y 軸轉動。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 減 35 度

RotationZ 屬性是繞著旋轉中心的 z 軸轉動 (與物件平面呈直角的一條線)。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 減 45 度

旋轉屬性可以指定正值或負值,朝正向或反向旋轉。The rotation properties can specify a positive or negative value to rotate in either direction. 絕對數字可以大於 360,這會完全旋轉物件一圈以上。The absolute number can be greater than 360, which rotates the object more than one full rotation.

您可以使用 CenterOfRotationXCenterOfRotationY 以及 CenterOfRotationZ 屬性來移動旋轉中心。You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. 根據預設,旋轉軸會直接穿過物件中心,導致物件繞著本身中心旋轉。By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center. 但是如果您將旋轉中心移出物件外部邊緣,物件就會繞著該邊緣旋轉。But if you move the center of rotation to the outer edge of the object, it will rotate around that edge. CenterOfRotationXCenterOfRotationY 的預設值是 0.5,CenterOfRotationZ 的預設值是 0。The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. 針對 CenterOfRotationXCenterOfRotationY,介於 0 與 1 的數值會將樞紐點設在物件內部的某個位置。For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. 0 代表物件某一邊緣,1 代表正對面的另一邊緣。A value of 0 denotes one object edge and 1 denotes the opposite edge. 值可以超出此範圍,並會據此移動旋轉中心。Values outside of this range are allowed and will move the center of rotation accordingly. 因為旋轉中心 z 軸的繪製方式是穿透物件平面,所以您可以使用負值在物件背面移動旋轉中心,或使用正值在物件前面 (朝向您) 移動旋轉中心。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 會沿著與物件平行的 X 軸移動旋轉中心,而 CenterOfRotationY 則是沿著物件 Y 軸移動旋轉中心。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. 下一個圖例示範 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" (預設值)CenterOfRotationY = "0.5" (default)

CenterOfRotationY 等於 0.5

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

CenterOfRotationY = "0.1"CenterOfRotationY = "0.1"

CenterOfRotationY 等於 0.1

請注意 CenterOfRotationY 屬性為預設值 0.5 時影像繞著中心旋轉的方式,而為 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. 在變更 CenterOfRotationX 屬性以移動 RotationY 屬性旋轉物件的位置時,會有類似行為。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" (預設值)CenterOfRotationX = "0.5" (default)

CenterOfRotationX 等於 0.5

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

CenterOfRotationX = "0.9" (右側邊緣)CenterOfRotationX = "0.9" (right-hand edge)

CenterOfRotationX 等於 0.9

使用 CenterOfRotationZ 將旋轉中心放在物件平面的下方或上方。Use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. 如此一來,物件繞著某點旋轉的方式,就如同行星圍繞恆星運行一般。This way, you can rotate the object around the point analogous to a planet orbiting around a star.

放置物件Positioning an object

目前為止,您已學會如何在空間中旋轉物件。So far, you learned how to rotate an object in space. 使用下列屬性可以將旋轉物件放在彼此之間的相對位置:You can position these rotated objects in space relative to one another by using these properties:

  • LocalOffsetX 使物件沿著旋轉物件平面的 x 軸移動。LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
  • LocalOffsetY 使物件沿著旋轉物件平面的 y 軸移動。LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
  • LocalOffsetZ 使物件沿著旋轉物件平面的 z 軸移動。LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
  • GlobalOffsetX 使物件沿著與螢幕對齊的 x 軸移動。GlobalOffsetX moves an object along the screen-aligned x-axis.
  • GlobalOffsetY 使物件沿著與螢幕對齊的 y 軸移動。GlobalOffsetY moves an object along the screen-aligned y-axis.
  • GlobalOffsetZ 使物件沿著與螢幕對齊的 z 軸移動。GlobalOffsetZ moves an object along the screen-aligned z-axis.

區域位移Local offset

LocalOffsetXLocalOffsetY 以及 LocalOffsetZ 屬性可在物件旋轉之後,沿著物件平面的各軸平移物件。The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. 因此,旋轉物件的方式會決定平移物件的方向。Therefore, the rotation of the object determines the direction that the object is translated. 為了示範此概念,下一個範例以動畫顯示 0 到 400 度的 LocalOffsetX,以及 0 到 65 度的 RotationYTo demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

請注意,前述範例中的物件是沿著本身 x 軸移動。Notice in the preceding sample that the object is moving along its own x-axis. 動畫一開始,RotationY 值接近零時 (與螢幕平行),物件是以 X 方向沿著螢幕移動,但是當物件朝向您旋轉時,則是沿著朝向您之物件平面的 X 軸移動。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. 另一方面,如果您以動畫顯示 RotationY 屬性到 -65 度,則物件會以曲線路徑轉離。On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.

LocalOffsetY 的運作方式與 LocalOffsetX 類似,不過是沿著垂直軸移動,因此,變更 RotationX 會影響 LocalOffsetY 移動物件的方向。LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. 下一個範例會動畫顯示 0 到 400 度的 LocalOffsetY,以及 0 到 65 度的 RotationXIn the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ 可平移與物件平面呈直角的物件,就像從物件背面直接穿透中心朝向您繪製一個向量。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. 為了示範 LocalOffsetZ 的運作方式,下一個範例將以動畫顯示 0 到 400 度的 LocalOffsetZ,以及 0 到 65 度的 RotationXTo demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

動畫一開始,RotationX 值接近零時 (與螢幕平行),物件是直接朝向您移動,但是當物件的正面向下旋轉,就會改為向下移動。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.

全域位移Global offset

GlobalOffsetXGlobalOffsetY 以及 GlobalOffsetZ 屬性會沿著相對於螢幕的各軸平移物件。The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. 也就是說,物件移動沿著的軸與物件套用的任何旋轉無關,這一點與區域位移屬性不同。That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. 若您只想沿著螢幕的 x、y 或 z 軸移動物件,這些屬性就非常實用,可以讓您不用擔心物件所套用的旋轉。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.

下一個範例會以動畫顯示 0 到 400 度的 GlobalOffsetX,以及 0 到 65 度的 RotationYThe next sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

請注意,此範例中的物件在旋轉時不會變更路徑。Notice in this sample that the object does not change course as it rotates. 因為物件是沿著螢幕的 x 軸移動,與其本身的旋轉無關。That is because the object is being moved along the x-axis of the screen without regard to its rotation.

更複雜的半 3D 案例More complex semi-3D scenarios

您可以使用 Matrix3DProjectionMatrix3D 類型取得 PlaneProjection 無法達到的更複雜 semi-3D 效果。You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. Matrix3DProjection 提供一個可套用至任何 UIElement 的完整 3D 轉換矩陣,讓您隨心所欲地將轉換矩陣與透視矩陣模型套用至元素。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. 請記住,這些 API 只含最基本的內容,如果您要使用它們,就必須寫入可正確建立 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. 因此,使用 PlaneProjection 創造簡單的 3D 效果會比較容易。Because of this, it is easier to use PlaneProjection for simple 3D scenarios.