XAML UI 用の 3-D 遠近効果3-D perspective effects for XAML UI

視点の変換を使って、3D 効果を Windows ランタイム アプリのコンテンツに適用することができます。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 効果を作成することも、視点の変換の一般的な使い方の 1 つです。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>

ここでは、3D 空間でのオブジェクトの回転と移動に使われる PlaneProjection のプロパティに注目してください。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 を使って UIElementProjection プロパティを設定することで、UIElement に 3D 効果を適用できます。You 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.

-35°の X 回転

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>

-35°の Y 回転

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>

-45°の Z 回転

回転プロパティでは、正または負の値を指定することで、どちらの方向にも回転させることができます。The rotation properties can specify a positive or negative value to rotate in either direction. 絶対値が 360 を超える値も指定でき、その場合、オブジェクトは 1 回転よりも大きく回転します。The absolute number can be greater than 360, which rotates the object more than one full rotation.

CenterOfRotationXCenterOfRotationYCenterOfRotationZ の各プロパティを使うと、回転の中心を移動できます。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 center またはの 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" (default)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

LocalOffsetXLocalOffsetYLocalOffsetZ の各プロパティは、オブジェクトを回転させた後で、オブジェクトの平面の該当する軸に沿ってオブジェクトを移動します。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. この考え方を示すために、次のサンプルでは、LocalOffsetX を 0 から 400 まで、RotationY を 0 から 65°まで変化させてアニメーションを表示します。To 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 の値が 0 (画面に平行) に近いときには、オブジェクトは画面に沿って 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. 次のサンプルでは、LocalOffsetY を 0 から 400 まで、RotationX を 0 から 65°まで変化させてアニメーションを表示します。In the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ ベクトルは、自分の方向にオブジェクトの背後から center から直接描画した場合と同様に、オブジェクトの面に垂直のオブジェクトを変換します。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 の機能を示すために、次のサンプルでは、LocalOffsetZ を 0 から 400 まで、RotationX を 0 から 65°まで変化させてアニメーションを表示します。To demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

アニメーションの冒頭で RotationX の値が 0 (画面に平行) に近いときには、オブジェクトはまっすぐ手前へ向かって移動しますが、オブジェクトの平面が下側に回転するにつれて、オブジェクトは下に向かって移動するようになります。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

GlobalOffsetXGlobalOffsetYGlobalOffsetZ の各プロパティは、画面を基準とした軸に沿ってオブジェクトを移動します。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.

次のサンプルでは、GlobalOffsetX を 0 から 400 まで、RotationY を 0 から 65°まで変化させてアニメーションを表示します。The 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.

オブジェクトの配置Positioning an object

PlaneProjection を使って対応できる場合よりもさらに複雑な疑似 3D のシナリオに対しては、Matrix3DProjection 型および Matrix3D 型を使うことができます。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. そのため、単純な 3D シナリオには、PlaneProjection を使う方が簡単です。Because of this, it is easier to use PlaneProjection for simple 3D scenarios.