XAML UI の 3-D パースペクティブ効果

パースペクティブ変換を使用して、Windows ランタイム アプリのコンテンツに 3-D 効果を適用できます。 たとえば、次に示すように、オブジェクトが自分の方向または離れた方向に回転するという錯覚を作成できます。

透視変換画像

パースペクティブ変換のもう 1 つの一般的な使用方法は、次のように、オブジェクトを相互に関連して配置して 3-D 効果を作成することです。

オブジェクトを積み重ねて 3-D 効果を作成する

静的な 3-D 効果を作成するだけでなく、パースペクティブ変換プロパティをアニメーション化して、移動する 3-D 効果を作成できます。

パースペクティブ変換が画像に適用されているのを見ただけですが、コントロールを含む任意の UIElement にこれらの効果を適用できます。 たとえば、次のようなコントロールのコンテナー全体に 3-D 効果を適用できます。

要素のコンテナーに適用される 3-D 効果

このサンプルの作成に使用する XAML コードを次に示します。

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

ここでは、3-D 空間でオブジェクトを回転および移動するために使用される PlaneProjection のプロパティに注目します。 次のサンプルでは、これらのプロパティを試して、オブジェクトへの影響を確認できます。

PlaneProjection クラス

PlaneProjection を使用して UIElement の Projection プロパティを設定することで、任意の UIElement に 3D 効果を適用できます。 PlaneProjection は、空間内での変換のレンダリング方法を定義します。 次の例は、単純なケースを示しています。

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

この図は、イメージがレンダリングされる内容を示しています。 x 軸、y 軸、z 軸は赤い線で表示されます。 イメージは、 RotationX プロパティを使用して x 軸を中心に 35 度後方に回転します。

RotateX - 35 度

RotationY プロパティは、回転の中心の y 軸を中心に回転します。

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

RotateY - 35 度

RotationZ プロパティは、回転の中心 (オブジェクトの平面に対して垂直な線) の z 軸を中心に回転します。

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

RotateZ マイナス45度

回転プロパティでは、正または負の値を指定して、どちらの方向にも回転させることができます。 絶対数は 360 より大きくすることができ、オブジェクトは複数の完全回転を回転します。

回転の中心は、CenterOfRotationX、CenterOfRotationY、CenterOfRotationZ プロパティを使用して移動できます。 既定では、回転の軸はオブジェクトの中心を直接通過し、オブジェクトはその中心を中心に回転します。 ただし、回転の中心をオブジェクトの外側の端に移動すると、そのエッジを中心に回転します。 CenterOfRotationX と CenterOfRotationY の既定値は 0.5、CenterOfRotationZ の既定値は 0 です。 CenterOfRotationX と CenterOfRotationY の場合、0 ~ 1 の値は、オブジェクト内のある場所にピボット ポイントを設定します。 値 0 は 1 つのオブジェクト エッジを表し、1 は反対のエッジを表します。 この範囲外の値は許可され、それに応じて回転の中心が移動します。 回転の中心の z 軸はオブジェクトの平面を通して描画されるため、負の数を使用してオブジェクトの後ろに回転の中心を移動し、正の数値を使用してオブジェクトの前に移動できます。

CenterOfRotationX は回転の中心を x 軸に沿ってオブジェクトと平行に移動し、 CenterOfRotationY はオブジェクトの y 軸に沿って中心または回転を移動します。 次の図は、 CenterOfRotationY に異なる値を使用する方法を示しています。

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

CenterOfRotationY = "0.5" (既定値)

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.5 に設定すると画像は中央を軸に回転し、0.1 に設定すると上端付近を軸に回転することに注目してください。 CenterOfRotationX プロパティを変更して RotationY プロパティがオブジェクトを回転する位置に移動すると、同様の動作が表示されます。

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

CenterOfRotationX = "0.5" (既定値)

CenterOfRotationX が 0.5 に等しい 

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

CenterOfRotationX = "0.9" (右端)

CenterOfRotationX が 0.9 に等しい

CenterOfRotationZ を使用して、回転の中心をオブジェクトの平面の上または下に配置します。 これにより、星の周りを周回する惑星に似た点を中心にオブジェクトを回転させることができます。

オブジェクトの配置

ここまでは、空間内でオブジェクトを回転させる方法について学習しました。 回転したオブジェクトは、次のプロパティを使用して、相互に相対的な空間に配置できます。

  • LocalOffsetX は、回転したオブジェクトの平面の x 軸に沿ってオブジェクトを移動します。
  • LocalOffsetY は、回転したオブジェクトの平面の y 軸に沿ってオブジェクトを移動します。
  • LocalOffsetZ は、回転したオブジェクトの平面の z 軸に沿ってオブジェクトを移動します。
  • GlobalOffsetX は、画面に合わせた x 軸に沿ってオブジェクトを移動します。
  • GlobalOffsetY は、画面に配置された y 軸に沿ってオブジェクトを移動します。
  • GlobalOffsetZ は、画面に合わせた z 軸に沿ってオブジェクトを移動します。

ローカル オフセット

LocalOffsetX、LocalOffsetY、および LocalOffsetZ プロパティは、回転後にオブジェクトの平面のそれぞれの軸に沿ってオブジェクトを移動します。 したがって、オブジェクトの回転によって、オブジェクトが変換される方向が決まります。 この概念を示すために、次のサンプルでは LocalOffsetX を 0 から 400 に、 RotationY を 0 から 65 度にアニメーション化します。

前のサンプルでは、オブジェクトが独自の x 軸に沿って移動していることに注意してください。 アニメーションの最初に、 RotationY の値が 0 (画面と平行) に近い場合、オブジェクトは画面に沿って x 方向に移動しますが、オブジェクトが方向に向かって回転すると、オブジェクトはオブジェクトの平面の x 軸に沿って移動します。 一方、 RotationY プロパティを -65 度にアニメーション化した場合、オブジェクトは離れてカーブします。

LocalOffsetY はLocalOffsetX と同様に動作しますが、縦軸に沿って移動するため、 RotationX を変更すると LocalOffsetY がオブジェクトを移動する方向に影響します。 次のサンプルでは、 LocalOffsetY は 0 から 400、 RotationX は 0 から 65 度にアニメーション化されています。

LocalOffsetZ は、オブジェクトの平面に垂直な方向へオブジェクトを移動します。これは、オブジェクトの背後から中心を通って手前に向かうベクトルが直接引かれているかのような移動です。 LocalOffsetZ のしくみを示すために、次のサンプルでは LocalOffsetZ を 0 から 400、RotationX を 0 から 65 度にアニメーション化します。

アニメーションの開始時に、 RotationX の値が 0 に近い場合 (画面と平行)、オブジェクトは直接方向に移動しますが、オブジェクトの面が下方向に回転すると、オブジェクトは下に移動します。

グローバル オフセット

GlobalOffsetX、GlobalOffsetY、および GlobalOffsetZ プロパティは、画面を基準に軸に沿ってオブジェクトを平行移動します。 つまり、ローカル オフセット プロパティとは異なり、オブジェクトが移動する軸は、オブジェクトに適用される回転とは無関係です。 これらのプロパティは、オブジェクトに適用される回転を気にせずに、画面の x 軸、y 軸、または z 軸に沿ってオブジェクトを移動する場合に便利です。

次のサンプルでは、 GlobalOffsetX を 0 から 400 に、 RotationY を 0 から 65 度にアニメーション化します。

このサンプルでは、オブジェクトが回転してもコースが変更されないことに注意してください。 これは、オブジェクトが回転に関係なく、画面の x 軸に沿って移動されているためです。

より複雑な半 3D シナリオ

PlaneProjection よりも複雑な半 3D シナリオでは、Matrix3DProjection 型と Matrix3D 型を使用できます。 Matrix3DProjection には、 UIElement に適用する完全な 3D 変換マトリックスが用意されているため、任意のモデル変換行列とパースペクティブ マトリックスを要素に適用できます。 これらの API は最小限であるため、使用する場合は、3D 変換マトリックスを正しく作成するコードを記述する必要があることに注意してください。 このため、単純な 3D シナリオでは PlaneProjection を使用する方が簡単です。

  • Last updated on