Трехмерные эффекты для пользовательского интерфейса XAML3-D perspective effects for XAML UI

C помощью преобразований перспективы можно применять объемные эффекты к содержимому ваших приложений среды выполнения 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.

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

Другой распространенный сценарий использования преобразований перспективы — это размещение объектов относительно друг друга для создания объемного эффекта, как здесь.Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

Наложение объектов для создания объемного эффекта

Помимо создания статических объемных эффектов, вы можете анимировать преобразование перспективы, чтобы создать движущиеся объемные эффекты.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. Например, можно применить объемный эффект ко всему контейнеру элементов управления, как показано ниже:For example, you can apply a 3-D effect to an entire container of controls like this:

Объемный эффект, примененный к контейнеру элементов

Вот код 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>

Здесь мы обращаем внимание на свойства 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.

Класс PlaneProjectionPlaneProjection class

Можно применить трехмерные эффекты к любому элементу UIElement, задав значение свойства Projection элемента UIElement с помощью PlaneProjection.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. Изображение повернуто на 35 назад градусов вокруг оси X с помощью свойства RotationX.The image is rotated backward 35 degrees around the x-axis using the RotationX property.

RotateX минус 35 градусов

Свойство 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>

RotateY минус 35 градусов

Свойство 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>

RotateZ минус 45 градусов

Свойствам вращения можно задать положительное или отрицательное значение, чтобы выполнить поворот в любом направлении.The rotation properties can specify a positive or negative value to rotate in either direction. Абсолютное значение может превышать 360. В таком случае вращение объекта превысит один полный оборот.The absolute number can be greater than 360, which rotates the object more than one full rotation.

С помощью свойств CenterOfRotationX, CenterOfRotationY и CenterOfRotationZ можно переместить центр вращения.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. По умолчанию свойства CenterOfRotationX и CenterOfRotationY имеют значение 0,5, а значение по умолчанию для свойства CenterOfRotationZ — 0.The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. Для свойств CenterOfRotationX и CenterOfRotationY значения от 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 смещает центр вращения вдоль оси 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" (по умолчанию)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

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

Свойства GlobalOffsetX, GlobalOffsetY и GlobalOffsetZ перемещают объект вдоль осей относительно экрана.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.

Более сложные сценарии с полуобъемными эффектамиMore complex semi-3D scenarios

Можно воспользоваться типами Matrix3DProjection и Matrix3D для более сложных сценариев полуобъемных эффектов, чем те, которые реализуются с помощью PlaneProjection.You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. Matrix3DProjection предоставляет вам матрицу полного объемного преобразования, применимую к любому объекту UIElement, так что можно применять матрицы произвольного преобразования модели и матрицы перспективы к элементам.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 минимальны, поэтому при использовании их необходимо написать код, который правильно создает матрицы объемного преобразования.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. По этой причине в простых сценариях объемных эффектов легче использовать PlaneProjection.Because of this, it is easier to use PlaneProjection for simple 3D scenarios.