Foundation Silverlight 3 Animation- P11 pot

Projection plane Even though we’ve had our noses in the code for a little while now, we’re going to start talking about projection planes in the context of Blend.. In the following proje

In this chapter, we’re going to take a look at a couple of different methods for getting 3D effects in Silverlight The first method is utilizing the plane projection transforms that are new to Silverlight 3 Plane projections will allow us to create some interest-ing planar 3D effects very quickly and easily From there, we’re going to apply some

of the concepts from Chapter 6 to emulate 3D object rotations While Silverlight doesn’t yet support full 3D models, you can add a little pop to your applications by implementing the concepts we’ll talk about here

Projection plane

Even though we’ve had our noses in the code for a little while now, we’re going to start talking about projection planes in the context of Blend Why? Because Blend just makes it really easy to access the features with which we want to work I touched on the projection transforms very briefly earlier in this book The projections are avail-able on the Transform pane of the Properties panel, which is shown in Figure 7-1

SIMULATING 3D IN 2D

Figure 7-1 The Projection

transform paneWhen the controls on the Projection portion of the pane are adjusted, an object’s rotation, center point, and offsets can be adjusted or animated Rotations occur along the x, y, or z axis, which will allow you to spin an object as illustrated in Figure 7-2

Figure 7-2 Projection rotations

The second tab on the pane allows you to define the center of rotation As with the regular center point transform, values here range from 0 to 1, with 5 being in the center, as shown in Figure 7-3

The z center of rotation is likely to go unused for the time being but would be useful in the case of a true 3D model.

Figure 7-3 Projection rotation offsets

The third and fourth tabs allow you to adjust global or local coordinate offsets for your planar tions This is basically the equivalent of defining a radius offset for the rotation of the plane

rota-With a basic understanding of the concepts involved in planar projection transforms, let’s take a look

at a simple example Use Blend to open the PlaneProjection project for Chapter 7 The project

con-tains the H]ukqpNkkp canvas, as well as a simple, gradient-filled rectangle element

1. Select the BlueRectangle element in the Objects and Timeline panel

2. On the Rotation tab, enter 45 into the Y field Notice that the rectangle rotates to the left Change the Y rotation back to 0

3. Select the Center of Rotation tab (the second tab) In the X field, enter 1

4. Return to the Rotation tab, and enter 45 into the Y field again Notice that the plane now rotates around the right edge rather than the center point

5. Take a few minutes to experiment with the different values and see what types of effects they have on the object in the application In a moment, we’ll take a look at a more realistic usage scenario for projection planes

Think of the center of rotation point as the hinge around which your object is rotating In the ing example, we moved the rotation point from the center (.5 X) to the right side (1 X) of the object

preced-If you remember way back in one of the early chapters when we first talked about transforms, we used a Skew transform to make a door appear to swing open While the skewing action did a great job

of emulating the look we were going for, if you truly wanted to get that effect, the plane projections would make it easy

If you use Split view, or examine the code as you work, you will notice that Blend adds a Lnkfa_pekjcontainer to your element and fills in the appropriate values As with other objects in XAML, you can name the projection and access the properties using code if you’d like

One last thing to keep in mind—even though the example you just went through was very simple, any element inside of your applications can have projections applied If you rotate a canvas object, all of the content inside the canvas will also rotate Any controls or interactivity you have set up will remain working and active, so you can get some pretty interesting effects

Let’s turn our attention to an example that is probably a little more realistic In the following project, we’ll create a rotating group of objects, as shown in Figure 7-4 I’ve left them plain here, but a few real-world examples, such as contact cards and image galleries, come to mind

Figure 7-4 An example project that leverages the X projection plane transform

1. Use Blend to open the X_Projection project for Chapter 7 The project contains a canvas

called AllItems that contains seven more canvases, each containing a TextBlock so that the items can be identified as the application runs All of the item canvases are currently stacked

on top of one another There are also two buttons: one that says Rotate Up and another that saysRotate Down

2. Change to Split view so that the XAML code is visible beneath the artboard

3. Expand the AllItems canvas if it isn’t already, and select Item_0 by clicking it On the Center of Rotation tab of the Projection portion of the Transform pane, put –200 into the Z field This has the net effect of offsetting the X rotation 200 pixels from 0 Z On the Rotation tab, enter 1 into theX field, and then change it to 0 This will add a ?]jr]o*Lnkfa_pekj XAML container to the selected canvas and fill in the necessary properties

4. SelectItem_1 Once again, set the Center of Rotation to –200 Z On the Rotation tab, enter 45into the X field You will see the element rotate and shift down on the artboard

5. Work around the remaining six canvas items Each one should have the Center of Rotation set to –200 Z, and for each item, the X rotate value should increase by 45 degrees Item_2 will be 90;Item_3 will be 135;Item_4 will be 180; and so on Once you have finished applying the projec-tions to each object, the project should look similar to the one shown in Figure 7-5

Figure 7-5 The X_Projection project taking shape

6. Next, we’ll create a storyboard that we will access from code to spin our objects Click the Newstoryboard button, and type Rotate in the Create Storyboard Resource dialog before clicking OK

7. Our animation will take 1 second, so move the timeline play head to that position.

8. SelectItem_0, and in the X Rotate field, enter 1, then 0 The purpose of this is to set a keyframe

at 1 second that contains the current rotation value It is necessary to change the value and then change it back to force the keyframe into the animation The result of this action will be

an animation that looks like the code shown following

12. To achieve this, start by declaring two variables above the I]ejL]ca$% constructor The first will be used to store the increment value so that it only needs to be changed in one place if necessary The second is used to control the direction of the rotation.

15. Inside the event handler, add code to increment each item’s value by the Nkp]pa@eop]j_aamount.

The code shown here is fairly explicit, so it’s easy to follow, but if there were many more objects, it would probably be a better idea to create a generalized method that can be called from either event handler to update the storyboard values Then, you can simply change the Nkp]pa@eop]j_a value to –45

or 45, call the method, and fire the storyboard This would help optimize your code a bit To give you

some idea of what that might look like, I’ve included that code in the X_ProjectionCompleted project.

To give yourself some practice, try two things for me First, modify the easing options for each tion in the storyboard See if you can get the entire set of items to rock back and forth a bit before turning Second, start from scratch, and see if you can mimic this behavior with a Y rotate (horizontal) projection.

anima-The projections are a lot of fun and certainly add a lot of flexibility to the feature set of Silverlight However, there is more you can do if you’re willing to get your hands dirty and work with a little more code In the next section, we’re going to talk more about 3D and how to simulate 3D effects in 2D with code

3D

As you are aware, the coordinate system in Silverlight has only x and y axes, where x is the horizontal axis and y is the vertical To imagine a 3D coordinate system like the one shown in Figure 7-6, a z axis line is drawn straight into your computer screen

We’re not going to be coding up a true 3D coordinate system—instead, we’ll fake the visual cues that make people see objects as being farther away using some of the trigonometry you learned in Chapter 6

Figure 7-6 The z axis for a 3D coordinate system in Silverlight

would run perpendicular to your monitor

Z axis rotation

We’ll start out with an easy one: z axis rotation Any object you rotate around the z axis on the screen would be moving in a circular or elliptical pattern, as shown in Figure 7-7

Figure 7-7 Z axis rotation results in a circular or elliptical rotation.

As such, z axis 3D movement isn’t really emulating any 3D motion It will still become part of your toolbox, however, so it’s worth taking a look at You saw how to create circular movements in Chapter

6, but let’s do a quick review project that puts our terms in a context that works for 3D In this ple, we will build a project that moves a ball around the z axis

exam-1. Open the ZAxis3D project This project contains a gradient-filled >]hh object and the main

page The I]ejL]ca*t]ih file also contains a storyboard timer named Ikra>]hh

2. If you were building an application that supported multiple objects traveling in circular or elliptical paths, you might choose to place some of the code in the object’s code-behind files However, for this project, we’ll just take a look at the one ball, so all of our code will go into theI]ejL]ca*t]ih*_o file Open I]ejL]ca*t]ih*_o for editing

3. Start by declaring an instance of the >]hh object:

lner]pa>]hhIu>]hh9jas>]hh$%7

4. Next, declare the variables we’ll be using for the movement Knecej will be the origin point for the motion, and N]`eqo will determine the radius of the circle the ball will travel =jcha and Olaa` will be used to determine our sine and cosine calculations, and Lkoepekj will determine where on the canvas the ball will be placed

5. Inside the I]ejL]ca$% constructor, add the following code to initialize the Knecej variable We’re adjusting the location of the point of origin for the size of the ball by subtracting half of the ball’s height or width from the center point on the canvas This adjustment accounts for the fact that objects are identified by the point at the top-left of the object rather than the center.

Knecej*T9H]ukqpNkkp*Se`pd+.)Iu>]hh*Se`pd+.7

Knecej*U9H]ukqpNkkp*Daecdp+.)Iu>]hh*Daecdp+.7

6. Continue adding code inside the I]ejL]ca$% constructor The following three lines will place the ball object at the Knecej position calculated in step 5, and add it to the H]ukqpNkkpCanvas

7. The next thing we need to do is make the ball move The following two lines also go into the I]ejL]ca$% constructor They set up an event listener for the ?kilhapa` event of the Ikra>]hhstoryboard, and start the storyboard

9. Change the N]`eqo data type to Lkejp:

lner]paLkejpN]`eqo7

10. Inside the I]ejL]ca$% constructor, initialize N]`eqo*T and N]`eqo*U with some values:

Take some time and look at the ZAxis3DCompleted project, shown in Figure 7-8 It contains the code

shown here in the example, but I also added a few sliders so you can manipulate some of the values

in real time as the application runs

Figure 7-8 The ZAxis3DCompleted project

A model of the inner solar system

So you’ve built this project and put some thought into it, but maybe you’re not entirely sure where something like this can be applied in your own applications As an example, let’s build a real-world, working model of the orbits of the inner planets in our solar system We will write the program in a way that supports elliptical orbits—the inner planets travel in more circular orbits than the outer plan-ets, but you may choose to augment the program with elliptical orbits at a later time

1. Open the InnerSolarSystem project The project contains the sun and four planet objects:

Mercury, Venus, Earth, and Mars (the planets are not to scale) We will be coding up each et’s code-behind file in order, starting at the center of the solar system and moving outward There is also a timer storyboard called IkraLh]japo

plan-2. Open the I]ejL]ca*t]ih*_o file for editing Since we’re starting from the center and ing our way out, we’ll begin with the sun Declare an instance of the Oqj object just above the I]ejL]ca$% constructor:

lner]paIan_qnuIuIan_qnu9jasIan_qnu$%7

5. Inside of the I]ejL]ca$% constructor, add the Mercury object to the main canvas Notice here that we’re not positioning the planet We’ll be calculating its location mathematically, so it’s not necessary to specify a starting location It will automatically be added at 0,0

H]ukqpNkkp*?deh`naj*=``$IuIan_qnu%7

6. We’ll add a little code to make the planet move Open the Ian_qnu*t]ih*_o file for editing

7. Before the Ian_qnu$% constructor, declare the following variables We’ll declare `kq^has for

=jcha and Olaa` and Lkejpo for ?ajpan and N]`eqo The smaller a planet’s orbit, the faster the planet travels As such, Mercury will be our fastest-moving planet, and the speed of all of our other planets will be determined using Mercury’s speed as a base

lner]pa`kq^ha=jcha9,7

lner]pa`kq^haOlaa`9*,17

lner]paLkejp?ajpan7

lner]paLkejpN]`eqo7

8. Inside the Ian_qnu$% constructor, initialize the N]`eqo and ?ajpan variables as shown in the following code The values being used were determined by me from a reference image Notice that we are once again adjusting the location of the center point to accommodate the way Silverlight references objects by their top-left coordinate.

10. To make Mercury orbit the sun, we’ll need to add a little more code to the main code-behind,

so return to the I]ejL]ca*t]ih*_o file In the I]ejL]ca$% constructor, add the following code

to attach a ?kilhapa` event listener to the IkraLh]japo storyboard, and start the storyboard:IkraLh]japo*?kilhapa`'9jasArajpD]j`han$IkraLh]japo[?kilhapa`%7

IkraLh]japo*>acej$%7

11. The event handler code for the IkraLh]japo[?kilhapa`$% event is shown following This code calls the IkraIan_qnu$% method of the IuIan_qnu object, which will update the location of the planet on the main canvas The storyboard timer is then restarted

Figure 7-9 Mercury orbiting the sun

12. The next planet is Venus In the I]ejL]ca*t]ih*_o file, declare an instance of the Rajqo user control:

lner]pa`kq^ha=jcha9,7

lner]pa`kq^haOlaa`9*,/27

lner]paLkejp?ajpan7

lner]paLkejpN]`eqo7

15. Next, add the following bold code to the Rajqo$% constructor to initialize the N]`eqo and

Figure 7-10 The InnerSolarSystem project with both Venus and Mercury in view

20. Inside the A]npd$% constructor, initialize the N]`eqo and ?ajpan variables by adding the code shown in bold in the following listing: