다음을 통해 공유

XAML UI의 3D 원근감 효과

  • 아티클

원근 변환을 사용하여 Windows 런타임 앱의 콘텐츠에 3-D 효과를 적용할 수 있습니다. 예를 들어 다음과 같이 개체가 사용자 쪽으로 또는 사용자 반대쪽으로 회전하는 듯한 착각을 일으킬 수 있습니다.

Image with Perspective Transform

원근 변환의 또 다른 일반적인 용도는 다음과 같이 개체를 서로 기준으로 정렬하여 3차원 효과를 만드는 것입니다.

Stacking objects to create a 3-D effect

정적 3차원 효과를 만드는 것 외에도 원근 변환 속성에 애니메이션을 적용하여 움직이는 3D 효과를 만들 수 있습니다.

이미지에 적용된 큐브 뷰 변환을 보았지만 컨트롤을 비롯한 모든 UIElement에 이러한 효과를 적용할 수 있습니다. 예를 들어 다음과 같이 컨트롤의 전체 컨테이너에 3D 효과를 적용할 수 있습니다.

3-D effect applied to a container of elements

다음은 이 샘플을 만드는 데 사용되는 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차원 공간에서 개체를 회전하고 이동하는 데 사용되는 PlaneProjection의 속성에 초점을 맞춥니다. 다음 샘플을 사용하면 이러한 속성을 실험하고 개체에 미치는 영향을 확인할 수 있습니다.

PlaneProjection 클래스

PlaneProjection을 사용하여 UIElement의 프로젝션 속성을 설정하여 모든 UIElement에 3D 효과를 적용할 수 있습니다. PlaneProjection은 변환이 공간에서 렌더링되는 방법을 정의합니다. 다음 예제에서는 간단한 사례를 보여줍니다.

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

이 그림에서는 이미지가 렌더링되는 내용을 보여 줍니다. x축, y축 및 z축은 빨간색 선으로 표시됩니다. 이미지는 RotationX 속성을 사용하여 x축을 중심으로 35도 뒤로 회전됩니다.

RotateX minus 35 degrees

RotationY 속성은 회전 중심의 y축을 중심으로 회전합니다.

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

RotateY minus 35 degrees

RotationZ 속성은 회전 중심(개체 평면에 수직인 선)의 z축을 중심으로 회전합니다.

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

RotateZ minus 45 degrees

회전 속성은 양수 또는 음수 값을 지정하여 어느 방향으로든 회전할 수 있습니다. 절대값은 360보다 클 수 있으며, 개체를 한 바퀴 이상 회전시킵니다.

CenterOfRotationX, CenterOfRotationY, 및 CenterOfRotationZ 속성을 사용하여 회전 중심을 이동할 수 있습니다. 기본적으로 회전 축은 개체의 중심을 직접 통과하므로 개체가 중심을 중심으로 회전합니다. 그러나 회전 중심을 개체의 바깥 가장자리로 이동하면 해당 가장자리를 중심으로 회전합니다. CenterOfRotationX 및 CenterOfRotationY의 기본값은 0.5이고 CenterOfRotationZ의 기본값은 0입니다. CenterOfRotationX 및 CenterOfRotationY의 경우 0에서 1 사이의 값은 개체 내의 일부 위치에서 피벗 지점을 설정합니다. 값 0은 하나의 개체 가장자리를 표시하고 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 equals 0.5

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

CenterOfRotationY = “0.1”

CenterOfRotationY equals 0.1

CenterOfRotationY 속성이 기본값 0.5로 설정하면 이미지가 중앙을 중심으로 회전하고 0.1로 설정하면 위쪽 가장자리 근처에서 회전하는 것을 확인할 수 있습니다. RotationY 속성이 개체를 회전하는 위치를 이동하도록 CenterOfRotationX 속성을 변경할 때도 비슷한 동작이 표시됩니다.

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

CenterOfRotationX = “0.5”(기본값)

CenterOfRotationX equals 0.5

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

CenterOfRotationX = “0.9”(오른쪽 가장자리)

CenterOfRotationX equals 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을 사용하는 것이 더 쉽습니다.