Поделиться через

Трехмерные эффекты для пользовательского интерфейса XAML

  • Статья

Вы можете применить трехмерные эффекты к содержимому в приложениях среда выполнения Windows с помощью преобразований перспективы. Например, можно создать иллюзию, что объект поворачивается в сторону или от вас, как показано здесь.

Изображение с преобразованием перспективы

Другое частое использование преобразований перспективы заключается в том, чтобы упорядочить объекты в отношении друг друга, чтобы создать трехмерный эффект, как здесь.

Стек объектов для создания эффекта 3-D

Помимо создания статических трехмерных эффектов, можно анимировать свойства преобразования перспективы для создания 3-D эффектов.

Вы только что видели преобразования перспективы, примененные к изображениям, но эти эффекты можно применить к любому UIElement, включая элементы управления. Например, можно применить трехмерный эффект ко всему контейнеру элементов управления следующим образом:

Эффект 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>

Здесь мы сосредоточимся на свойствах PlaneProjection, которые используются для поворота и перемещения объектов в трехмерном пространстве. Следующий пример позволяет экспериментировать с этими свойствами и видеть их влияние на объект.

Класс PlaneProjection

Вы можете применить трехмерные эффекты к любому UIElement, задав свойство проекции UIElement с помощью ПлоскостиProjection. Класс PlaneProjection определяет, как преобразование отрисовывается в пространстве. В следующем примере показан простой случай.

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

На этом рисунке показано, как отображается изображение. Оси x, оси Y и z отображаются красными линиями. Изображение поворачивается назад 35 градусов вокруг оси x с помощью свойства RotationX .

Поворот X минус 35 градусов

Свойство RotationY поворачивается вокруг оси Y центра поворота.

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

Поворотy минус 35 градусов

Свойство RotationZ поворачивается вокруг оси z центра поворота (линия, которая является перпендикулярной плоскости объекта).

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

ПовернутьZ минус 45 градусов

Свойства поворота могут указывать положительное или отрицательное значение для поворота в любом направлении. Абсолютное число может быть больше 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 равно 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 вы увидите аналогичное поведение, чтобы переместить место поворота объекта.

<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.5" />
    </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 и Поворот от 0 до 65 градусов.

Обратите внимание, что в предыдущем примере объект перемещается по собственной оси x. В самом начале анимации, когда значение RotationY находится почти нулю (параллельно с экраном), объект перемещается вдоль экрана в направлении x, но по мере поворота объекта по оси X к вам объект перемещается по оси x плоскости объекта к вам. С другой стороны, если вы анимируете свойство RotationY до -65 градусов, объект будет кривым от вас.

LocalOffsetY действует аналогично свойству LocalOffsetX за исключением того, что выполняет перемещение вдоль вертикальной оси, поэтому изменение свойства RotationX влияет на направление, в котором LocalOffsetY перемещает объект. В следующем примере LocalOffsetY анимируется от 0 до 400, а поворот от 0 до 65 градусов.

LocalOffsetZ перемещает объект перпендикулярно плоскости объекта, как если бы прямо через центр из задней части объекта наружу по направлению к вам был проведен вектор. Чтобы продемонстрировать работу LocalOffsetZ, следующий пример анимирует LocalOffsetZ от 0 до 400 и RotationX от 0 до 65 градусов.

В начале анимации, когда значение RotationX приближается к нулю (параллельно экрану), объект перемещается непосредственно к вам, но по мере поворота лица объекта вниз объект перемещается вниз.

Глобальное смещение

Свойства GlobalOffsetX, GlobalOffsetY и GlobalOffsetZ преобразуют объект по осям относительно экрана. То есть, в отличие от свойств локального смещения, ось перемещения объекта не зависит от любого поворота, примененного к объекту. Эти свойства полезны, если вы хотите просто переместить объект вдоль оси X, Y или Z экрана, не беспокоясь о повороте, примененном к объекту.

Следующий пример анимирует GlobalOffsetX от 0 до 400 и Поворот от 0 до 65 градусов.

Обратите внимание, что в этом примере объект не изменяет курс по мере поворота. Это связано с тем, что объект перемещается вдоль оси x экрана без учета поворота.

Более сложные сценарии с полуобъемными эффектами

Типы Matrix3DProjection и Matrix3D можно использовать для более сложных сценариев с полу-3D, чем это возможно с помощью PlaneProjection. Matrix3DProjection предоставляет полную матрицу трехмерного преобразования для применения к любому uiElement, чтобы можно было применить к элементам матрицы произвольного преобразования модели и матрицы перспективы. Помните, что эти API являются минимальными и поэтому при их использовании необходимо написать код, который правильно создает матрицы трехмерного преобразования. Из-за этого проще использовать PlaneProjection для простых трехмерных сценариев.