Windows Phone Development (19): Three-dimensional perspective effect

The three-dimensional effect can also be called perspective effect, so I simply call three-dimensional perspective effect. Less theoretical knowledge, direct use case opening bar, because this three-dimensional effect is actually very simple, more convenient than the transformation in the previous section, do not believe? Let's do a practice.

Exercise one: Rotate the object 45 degrees along the Y axis.

By default, the center of rotation is at the center, such as the center of the y-axis. And as for the angle of rotation, which direction is positive, which direction is negative, hey, you have to try to know, I believe you can understand, otherwise, Hello Kitty laughed at you.

OK, because it is the first exercise, we first say X, Y, z three axes exactly where, X axis Needless to say, on the horizontal put that, Y axis, of course is vertical, that Z axis? You guess? Knowing that these three axes are perpendicular to each other, you'll guess, where? Not seen on the chart? Why is it?
Yes, the z-axis is pointing at you, how can you see it? To you that is, so, in the three-dimensional perspective, if you want to pull the object farther away, the z-value set a little bit, if you want the object with you "intimate" point, then the z translation value is set a little bit, know not, Z axis is also called "Intimacy Index", hehe.

The sheer effect of the Planeprojection class can be easily done, if you want a complex 3D model, you need to have a strong gray space thinking ability, it is recommended to use other 3D modeling software such as 3D Max, Express Blend supports the import, Complex three-dimensional models are also recommended to use express blend for graphical operation, which is intuitive, of course, if you use the Planeprojection class, it is not necessary, because it is relatively simple.

Okay, now let's do it. Rotate the object along the x-axis 45 degrees, that is, the effect of the above picture, of course, the Planeprojection class can be used in many UI elements, not necessarily pictures, in order to be intuitive and beautiful, I use the picture, also by the way to find two mm to lively.

1. <image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
2. Width= ">"
3. <Image.Projection>
4. <planeprojection rotationy= "/>"
5. </Image.Projection>
6. </Image>

OK, it is so simple, may not see the effect in the designer, it's OK, you now gently press F5, immediately you will see the miracle happen.

Here I suggest that all UI elements use the same method for Planeprojection, as you'll see in the example below, setting the object's Projection property
。

Exercise two: Rotate along the x-axis-60 degrees.

<image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
Width= ">"
<Image.Projection>
<planeprojection rotationx= " -60"/>
</Image.Projection>
</Image>

It doesn't make any difference, it's just y turns x.

Exercise three: Rotate 180 degrees along the z axis.

<image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
Width= ">"
<Image.Projection>
<planeprojection rotationz= "/>"
</Image.Projection>
</Image>

Just now, the z axis is pointing to yourself, maybe this is obvious, now you change it to 35 degrees, I believe the effect is obvious.
<image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
Width= ">"
<Image.Projection>
<planeprojection rotationz= "/>"
</Image.Projection>
</Image>

Exercise four: integrated rotation.

The above example is the rotation of a single axis, then can x, Y, z three axes work at the same time? Of course, XYZ collocation, work not tired!

Now, we rotate the object 15 degrees along the x axis, rotate 65 degrees along the Y axis, rotate 40 degrees along the z axis, and see what happens?

<image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
Width= ">"
<Image.Projection>
<planeprojection
rotationx= "15"
Rotationy= "-65"
Rotationz= "/>"
</Image.Projection>
</Image>

Exercise Five: Heart Change center point position.

The default center point is on the middle line of the object, but we can change the center position by Centerofrotationx,centerofrotationy,centerofrotationz three properties, with a value range of 0 to 1, two extremes, not on that side. , if the value between 0 and 1 is calculated proportionally, such as 0.5 is the default middle position.

Now let's change the center of the x axis to the center of the 0.2,y axis and change the center of the 0.7,z axis to 1 to see what happens.

<image source= "1.jpg" stretch= "Uniform" horizontalalignment= "center" verticalalignment= "center"
Width= ">"
<Image.Projection>
<planeprojection
rotationx= "15"
Rotationy= "-65"
Rotationz= "40"
centerofrotationx= "0.2"
centerofrotationy= "0.7"
centerofrotationz= "1"/>
</Image.Projection>
</Image>

Obviously, the position is not in the middle, careful observation, you will find.

Exercise six: Local offset.

I'm talking about local panning just to translate it relative to the screen, which is actually a bit harsh. The properties involved also have three--localoffsetx, localoffsety, Localoffsetz, I believe that I have to say, you play a few to understand, the key is more hands-on, multi-contrast.

<image source= "2.jpg" stretch= "Uniform"
Horizontalalignment= "Center"
Verticalalignment= "Center"
Height= ">"
<Image.Projection>
<planeprojection
localoffsetx= "12"
Localoffsety= "5"
localoffsetz= "24"
rotationx= "10"
rotationy= "-30"
rotationz= " -25"/>
</Image.Projection>
</Image>

Practice VII: Global offset.

This global offset is the mobile screen coordinates, if you are willing to summarize, you will find it and analytic geometry in the coordinate system translation of the same law.
That is: Zoga right minus, plus minus.
You can constantly change the value to test, I believe you can find the regular, hehe, rest assured that Hello kitty will encourage you.

<image source= "2.jpg" stretch= "Uniform"
Horizontalalignment= "Center"
Verticalalignment= "Center"
Height= ">"
<Image.Projection>
<planeprojection
globaloffsetx= "8"
Globaloffsety= "55"
globaloffsetz= "800"
rotationx= "10"
rotationy= "-30"
rotationz= " -25"/>
</Image.Projection>
</Image>

Study the perspective, or the old method----------and constantly use the numerical test, think about it, sometimes it is very valuable.

Windows Phone Development (19): Three-dimensional perspective effect