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

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

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

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

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

Вот код 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, задав значение свойства Projection элемента UIElement с помощью PlaneProjection. PlaneProjection определяет, каким образом преобразование отображается в пространстве. В следующем примере рассмотрен простой случай.

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

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

Свойство RotationY выполняет поворот вокруг оси Y, проходящей через центр вращения.

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

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

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

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

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

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" (по умолчанию)

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

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 близко к нулю (параллельно экрану), объект перемещается вдоль экрана в направлении X, но по мере того как объект поворачивается в вашу сторону, он начинает перемещаться вдоль оси X плоскости объекта по направлению к вам. С другой стороны, если вы задали анимацию свойства RotationY до –65 градусов, объект будет удаляться от вас по кривой.

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

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

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

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

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

В следующем примере выполняется анимация GlobalOffsetX в диапазоне от 0 до 400 градусов и анимация RotationY — от 0 до 65 градусов.

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

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

Можно воспользоваться типами Matrix3DProjection и Matrix3D для более сложных сценариев полуобъемных эффектов, чем те, которые реализуются с помощью PlaneProjection. Matrix3DProjection предоставляет вам матрицу полного объемного преобразования, применимую к любому объекту UIElement, так что можно применять матрицы произвольного преобразования модели и матрицы перспективы к элементам. Не забывайте, что эти API минимальны, поэтому при использовании их необходимо написать код, который правильно создает матрицы объемного преобразования. По этой причине в простых сценариях объемных эффектов легче использовать PlaneProjection.